SAP Builders Discussions
Join the discussion -- ask questions and discuss how you and fellow SAP Builders are using SAP Build, SAP Build Apps, SAP Build Process Automation, and SAP Build Work Zone.
cancel
Showing results for 
Search instead for 
Did you mean: 

SAP Build Challenge – Week 2 – UI Design

Dan_Wroblewski
Developer Advocate
Developer Advocate

This post is part of the SAP Build Community Challenge (April 2023)

dan_wroblewski_0-1680162815071.png

This week’s challenge involves another area that is key to build apps with SAP Build Apps, but is often overlooked when learning about the tool: UI Design.

Here is a UI – admittedly not the most sophisticated (and still includes that grumpy cat), but it illustrates some of the techniques that you can use to make a professional UI.

dan_wroblewski_0-1680975373026.png

Notice the following:

  • The Bengal tiger image (at top) goes right to the edge of the app.
  • The inner container is translucent (i.e., opacity < 100%, so that you can see the tiger underneath).
  • The inner container has a shadow with X and Y offsets of 5, a blur radius of 5, and a color of #BB9B9B.
  • The inner container has custom padding on the left and right, so that the cat picture fits nicely into with breathing room of 4 pixels either side.
  • The top of the inner container has rounded corners, while the bottom has straight corners.
  • The background of the app is light gray (Level 4 Background in the Universal pallette).
  • There are multiple stars, and the colors are randomized.
  • The navigation bar at the bottom of the page says "Home Page" (not "Empty Page").

Here are some learning materials:

And here are some specs about the app:

dan_wroblewski_0-1680976806425.png

For the images, I used these:

Bengal tiger (3000 x 1500 pixels):

285921_shutterstock_212951629.jpg

Grumpy cat (3089 x 2048 pixels):

295021_GettyImages-165189794_medium_jpg.jpg

 

Challenge

  1. Re-create the above app – EXCEPT: change the "Mike and Sully and Boo" text to something unique for your app, and remember that colors of the stars are randomized.
  2. Launch the app (either on preview app or on web).
  3. Enter your name in the input box, and take a screenshot.
  4. Post the screenshot to this discussion thread, along with at least one sentence – about how you knew what to do, and either a new feature you'd like to see or an existing feature you'd like to learn more about.
    • BONUS: Add to your entry the name of the movie alluded to by something in the UI shown above. 

Even if you can’t get it exactly like the one we gave, and it ends up being more like a Dali painting, post it anyway. We’d like to see what you were able to do.

dan_wroblewski_1-1680975844504.png

 

Quick Start

Here's a 1-minute video of what you need to do.

 

 




--------------
See all my blogs and connect with me on Twitter / LinkedIn
149 REPLIES 149

0 Kudos

The border itself is 13px? The intricacies of the slight variances between devices in how they display such specific features is not my forte, though generally I can find workarounds ... but you already found it. I have nothing better right now.




--------------
See all my blogs and connect with me on Twitter / LinkedIn

0 Kudos

Hi govardhansahil,

thanks for providing your workaround but I could not solve it in that way. I guess it depends on how to position the new created inner container to the outer container.

Sharadha1
Active Contributor

My entry for challenge 2. I am not a UI person but thoroughly enjoyed the challenge. I learned a lot about layering the UI elements and how easy it is do it with SAP Build. Thanks for setting this up.

Movie: Monsters Inc..

Screenshot 2023-04-17 at 18.42.52.png

 

0 Kudos

It's pretty cool that a non-UI person can build something with these UI features, no? Thanks for entering.




--------------
See all my blogs and connect with me on Twitter / LinkedIn

Jarmel
Explorer

Hi Dan!

Keep them coming! 

This was a collaboration work with @nishantbansal91 

 

 

Screenshot 2023-04-18 at 14.38.22.png

0 Kudos

#3 is already published ... waiting for your answer 😺




--------------
See all my blogs and connect with me on Twitter / LinkedIn

vinay050
Participant

Hi @Dan_Wroblewski 

Please find my week2 submission

vinay050_0-1681897607003.png

I hope this looks good 

0 Kudos

Looks nice 😺See if you can center the text and the image 




--------------
See all my blogs and connect with me on Twitter / LinkedIn

Hi @Dan_Wroblewski ,

I have fixed it now ...

 

vinay050_0-1682481188610.png

 

Regards

Vinay

rohit_kadam
Discoverer

Hi @Dan_Wroblewski,
Thanks for the Amazing Challenge! 😊

Challange 2.png

0 Kudos

Glad you liked it 😺




--------------
See all my blogs and connect with me on Twitter / LinkedIn

PranayaBhanja
Discoverer

Hi Dan !!

Thanks for the Challenge.

Challenge-2.png

HelenaFortun
Explorer

Hello Dan,

it was a great fun - but it took two hours to get the random colour working in the repeat function. Now it's done:

Screenshot_20230422_233616_SAP Build Apps.jpg

As movie I think it is Monsters.

Best regards!

Helena

0 Kudos

Glad you kept with it with the random colors ... probably should have given some hints to that part 😺




--------------
See all my blogs and connect with me on Twitter / LinkedIn

Chetan_Jadhav
Discoverer

Hi @Dan_Wroblewski ,
Challenge 2 Completed. It was Amazing !
Challenge 2.png

0 Kudos

Glad you liked it 😺 Please continue on to the rest

https://blogs.sap.com/2023/03/30/you-think-you-know-sap-build-take-our-challenge/




--------------
See all my blogs and connect with me on Twitter / LinkedIn

rsraj
Explorer

Hello Dan,

Here's my 2nd week challenge submission. It was really nice experience in participating this SAP Build challenge. Thank you so much! 

Challenge2.jpg

rajkumar
Explorer

I already know how CSS works in web development so that has helped me in building this easily and I did some development when this platform was called Appgyver. The random colored stars generation was a bit interesting to do, and while building random colored stars I felt it would have been great if we had option to write JS code instead of just depending on existing functions from Formula. I have found the JS option in logic building area at bottom side anyway but if it is available also for UI components properties(wherever Formula is available) would be great.

 

Here is my application screen:

rajkumar_1-1682313102881.png

 

 

 

SandipAgarwalla
Active Contributor

Finally completed 2nd week Challenge. Here is my submission

week2.jpg

The random color generation was tricky, used ajitkumarpanda's solution. 

manupulating the layout was difficult to begin with, but glad I learned few things along the way. 

0 Kudos

Glad you kept at it ... now on to challenge #3 😺




--------------
See all my blogs and connect with me on Twitter / LinkedIn

I have already submitted 3 & 4. 

When week2 came out, I started it but left it mid way as layout thing was making me crazy. 

I started again afresh, and glad I could complete it. 

 

shridharshetty
Explorer

Week 2 challenge:  Really curious to know how "Home Page" title is shown at the bottom of the screen. Week 2.png

Thanks

Shridhar

0 Kudos

Thanks for participating ... What do you want to do/know about "Home Page"?




--------------
See all my blogs and connect with me on Twitter / LinkedIn

0 Kudos

How to make page menu "Home Page" being shown at the bottom of the screen ?

0 Kudos

For web, there is a hamburger menu in upper right. The bottom menu will appear on mobile devices. You can of course make any UI you want, including a menu at the bottom. See this menu for ideas: https://www.youtube.com/watch?v=JI7j7ryVMO8 




--------------
See all my blogs and connect with me on Twitter / LinkedIn

sainithesh21
Active Participant

Hi Dan,

Here is my Week 2 submission.

sainithesh_0-1682431827919.png

Unfortunately, I couldn't able to get random color for the star. The issue I am suspecting might be because of style class. I couldn't able to overwrite it. few more suggestion may help me.

Below is the formula and screenshots for reference. 

MAP(REPEAT(16777215, 5), {"Color":"#"+NUMERIC_BASE(FLOOR(RANDOM()*item), 16)}) 

sainithesh_1-1682431988088.png

sainithesh_2-1682432018404.png

 

 

Regards,

Sai Nithesh

I know many people did as you did, embedding the color in the list used for the repeat.

But I just created a simple list of 5 or 7 elements (the elements could be anything).

dan_wroblewski_1-1682581904595.png

And then for the color in Style I created a randomize formula. I needed to add something dynamic to the formula otherwise all the stars would have the same color.

RGB(RANDOM_INTEGER_BETWEEN(0, 255), RANDOM_INTEGER_BETWEEN(0, 255), RANDOM_INTEGER_BETWEEN(0, 255)  + repeatedInfo.current.index)

dan_wroblewski_2-1682581933420.png

 

 

 




--------------
See all my blogs and connect with me on Twitter / LinkedIn

Thanks Dan for the suggestion.

Now I can able to get the start with different colors.

sainithesh_0-1682595901897.png

Just curious to know why the earlier code which worked for everyone didn't worked for me. 

 

Regards,

Sai Nithesh Gajula

You can use the formula you used ... but you still need a formula for the color property of the icon, like this:

repeated.current.Color

 




--------------
See all my blogs and connect with me on Twitter / LinkedIn

mrpz
Explorer

Hi,

Ok, it was hard to set the colors on the stars 😰, but interesting exercise.

mrpz_1-1682456018840.png

Thanks!

Maximiliano.

 

Dan_Wroblewski
Developer Advocate
Developer Advocate
0 Kudos

Glad you liked it. Funny, because the exercise was designed to teach layouting, but turns out the toughest part was the random colors.




--------------
See all my blogs and connect with me on Twitter / LinkedIn

ec1
Active Participant

Hi Dan,

I'd like to be able to use Fiori UI Elements on the Canvas & integration with Fiori Themes.

The movie is Monsters Inc.

230426_195700_uiSubmission.jpg

Dan_Wroblewski
Developer Advocate
Developer Advocate
0 Kudos

Yours is the Lion King 😺

At the moment I do not know of any integration with Fiori except for the color theming that is available




--------------
See all my blogs and connect with me on Twitter / LinkedIn

WannL_Tan
Explorer

Home page button should be straight forward.  

WannL_Tan_0-1682581404595.png

 

 

Ian_Thain
Developer Advocate
Developer Advocate

Phew, managed it... Thank you Daniel

IMG_F5D53E613C7F-1.jpeg

0 Kudos

I hope it wasn't too difficult ... glad you managed it in the end 😺




--------------
See all my blogs and connect with me on Twitter / LinkedIn

staseeb
Active Participant

Hi @Dan_Wroblewski ,

Here is my output.

Challenge 2.png

  1.  I encountered some issues while using the AppGyver Mobile Preview to test my mobile app.
  2. During the AppGyver Challenge 2, I gained knowledge on concepts such as Z Index and Opacity, which helped me to enhance my mobile app.

 

Thanks

Taseeb Saeed

 

0 Kudos

What type of problems did you encounter?

Note that the preview app is now SAP Build Apps preview -- even for the AppGyver community edition.




--------------
See all my blogs and connect with me on Twitter / LinkedIn

Kashish_Rajpal
Explorer

Hi Dan,

Here's my submission for week 2 challenge.

Kashish_Rajpal_0-1682595264454.png

It was a great learning to explore on SAP Build and this will definitely help me in showcasing demo for the apps to our clients using LCNC approach.

0 Kudos

Nice job ... glad you finished the challenge. Please try the other ones 😺




--------------
See all my blogs and connect with me on Twitter / LinkedIn