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

MioYasuatke
Active Contributor

My week 2 submission. 

Something I couldn't achieve was to adjust the spacing between the wrapped text "Mike and Sully and Boo". My app has more vertical space than the original one. I could create two containers for the first and the second lines, but I feel it is not the appropriate solution.

 

miyasuta_0-1680998033590.png

 

Well done ... that was really quick!!!

I don't remember explicitly setting the line spacing, but there is a setting for that for a Text component:

dan_wroblewski_0-1681029162272.png

 

 




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

Thank you for your comment.

Fixed the line height. Also, my initial idea of showing randomized colors was to simply create an array of 5 colors and pick one of them randomly. Learning from other participants' solutions, I improved that part as well.

miyasuta_0-1681070649315.png

 

JJAIMES
Participant

Hi @Dan_Wroblewski ,

We keep moving! 

02_challenge.jpg

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Thanks,
José Darío JAIMES

Thanks 😺 Your stars and my stars have the same color ... the color of the stars are to be randomized. Can you upload another with a different text (see the instructions which I changed), and with random colors for the stars, and let me know where you set the formula for randomizing the colors? Thanks.

Also, try to make the size of screenshot smaller or otherwise reduce the physical size of your reply..




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

Hi @Dan_Wroblewski 

For the color in the stars, I've reused the @Ajit_K_Panda formula which is relly ellegant and you can see the effects on how the star' colors change when I type my name down in the input box on the video URL.

VIDEO URL:  https://youtube.com/shorts/8LCpVMliYRE?feature=share 

MAIN SCREEN:

02nd_challenge.jpg

 

 

 

 

 

 

 

 

 

 

Thanks

Bharathi_S
Explorer

Hi @Dan_Wroblewski ,

Thank you for the well-written explanation and steps about the challenge.

solution.png

 

0 Kudos

Thanks for the entry. If you feel like it, write a few words on how the challenge went for you and how you knew what to do.




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

For the last couple of days, I've explored the different properties in some components and gotten to know the behavior of those properties, so it's made it easier for me to complete this challenge.

I've faced a little bit of a challenge to generate a random color. got some piece of code in Java Script, so I've tried to apply the same logic using a formula. It worked.

0 Kudos

See my code and even better the code by ajitkumarpanda above




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

0 Kudos

Thank you!

Here is my piece of code.

SmartSelect_20230409_183123_Chrome.jpg

I've refered below JS code.

var RandomColor = "#" + Math.floor(Math.random()*16777215).toString(16);

Ajit_K_Panda
Product and Topic Expert
Product and Topic Expert

Hi @Dan_Wroblewski , 
Here is my output:

File.jpg

  • Somehow i have a feeling z-index is not working properly or works conditionally.
  • Also option to import purely custom UI component is desirable as well as some kind of open marketplace for partners to contribute their own ui components would be great.

0 Kudos

Thanks. I think I wrote Z index but the technique here was simply absolute positioning.

Your idea for an open marketplace is a great one, and I believe development here is working on something like that. I think it would be very popular.

How did you make the repeat for the 5 stars?




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

Ajit_K_Panda
Product and Topic Expert
Product and Topic Expert

 

Icon is repeated with following formula where i am generating a list with 5 elements and each element has a peroperty 'Color' with value of randomized hexadecimal color code. Property 'Color' is used to set the color of each icon.

IconFormula.jpg

That's an elegant solution and use of formulas. All I did was do repeat with using [1,2,3,4,5} -- although it would have been even easier with REPEAT function -- and then created a formula for the color property:

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



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

cwitschel
Explorer

Here we go:  Spacing around the cat kept me busy for a while. Also the random color were tricky as 
[{"color": RGB(R… does not work

F809FB9A-FDA2-44C5-8492-4582BF239034.jpeg

0 Kudos

Great work! See below for some alternative ideas for the repeat and random colors.




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

Farid
Active Participant

Hello,

Here is my week 2 contribution. For someone who never heard of RGB , the random colors were the difficult part.  The previous contributions were very helpful.

gracefeline80.jpg

abdullahgunes
Participant

Hi All,

Here is my week 2 contribution. 

Looking forward to next week.

Week2.png

 

0 Kudos

Not bad 😺 The spacing and color is a little off (and the bottom of the Y in "You" is cut off). If you have time, consider trying to figure out how to tweak it.




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

Hi Dan,

Thanks for corrections, updated.

javiermartin02
Product and Topic Expert
Product and Topic Expert

Thanks Dan for another great challenge!

Captura de pantalla 2023-04-10 a las 17.11.48.png

aaruljothi
Participant

Hello,

My week 2 submission. I found this challenging but interesting !!

aaruljothi_0-1681158564127.png

 

Glad it led to your learning something new 😺

If you preview it on mobile phone (or use Developer Tools to display a simulation of a mobile device on browser), it looks even better -- with the tiger's eyes in the perfect spot




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

samuelesalines
Explorer

Hi @Dan_Wroblewski!
I was looking forward to this challenge all week 😁

Here's my submission, the heading is my BONUS answer haha 😎

ui_design_challenge_submission.jpg

I didn't really know howt to do things, since these challenges are my first hands-on experiences with SAP Build.. it's a good way to get started! 

Now looking forward to the next challenge 🤓

@Dan_Wroblewski in the iOS app the shadow is not showing ( original screenshot ), didn't find a solution to make it work.
In the following screenshot, taken from web preview, the shadow it's being shown

samuelesalines_0-1681205209844.png

 

0 Kudos

I'm using iOS on iPhone 13, latest IOS and I am able to see shadow in preview app.

dan_wroblewski_0-1680975373026.png




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

0 Kudos

I'm on iPhone 14 Pro, latest iOS update and "SAP Build Apps" app downloaded this morning.. idk haha

0 Kudos

@merituulimelkko Have you heard of any issues like described here?




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

Not for a long time, but issues with shadows have appeared in the past 🤔. I’ll make a ticket to look into this.

@samuelesalines I think I figured out what is going on. There is a known behavior difference in iOS that it clips shadows if the container is set to overflow:hidden (the default) instead of overflow:visible. You can find this setting under Layout, please check if it solves your issue!

Thank you @merituulimelkko that was it! 
Totally missed the "Clip overflowing content" setting 😅 

Now everything is ok! Thanks again, the both of you @Dan_Wroblewski@merituulimelkko 

ui_design_challenge_final.jpg

Jidnyasa
Explorer

Week 2 submission

Random color generation was tricky part but enjoyed doing this challenge. Looking forward for more such challenges.

Jidnyasa_1-1681204885863.png

 

 

0 Kudos

Thanks for participating. There are several responses with different ways of doing random colors -- some quite elegant




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

PAstolfi86
Explorer

Hi,

here my screenshot taken from preview webapp

PAstolfi86_0-1681210368143.png

But from preview on mobile (Samsung S10 with SAP Build Apps application) the background of inner container not disappear under top corners and cover the color of the borders.

PAstolfi86_2-1681210706130.jpeg

 

 

 

0 Kudos

Hmmm ... as you may have seen elsewhere on this thread, there are some idiosyncrasies on different devices for a few features. Not sure how I would fix that. If you want to pursue, please add a separate question in the discussions in this group.




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

enzoleon
Explorer

Thanks for the challenge Dan.

All the explanation and tips that you gave us help me a lot, I wouldn't be able to copy the app without them.

I've learned about the navigation tab that I haven't used before and the random color stars was a little tricky but I got it after a few tries 🤣. Very useful to understand Properties, Styles and Layouts.

Challenge2.jpg

Another great movie btw, Monsters Inc.

Your feedback is nice to hear, and I'm glad the information is helpful and leading you to learn about SAP Build Apps 😺




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

PatrikMajer
Explorer

Hi Dan, 

thank you for another great challange.

PatrikMajer_0-1681218915443.png