SAP Build Challenge – Week 2 – UI Design

[Dan_Wroblewski]

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

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.

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:

• Full screen background
• Star Wars App – No-Code Challenge (example of an app with background image)
• Z-index (documentation about positioning things on top of each other)
• Example (see how Onno Bos overlays things in his app – just a few minutes)

And here are some specs about the app:

For the images, I used these:

Bengal tiger (3000 x 1500 pixels):

Grumpy cat (3089 x 2048 pixels):

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.

Quick Start

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

[MioYasutake]

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.

[Dan_Wroblewski]

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:

[MioYasutake]

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.

[JJAIMES]

Hi @Dan_Wroblewski ,

We keep moving! 

Thanks,
José Darío JAIMES

[Dan_Wroblewski]

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..

[JJAIMES]

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:

Thanks

[Bharathi_S]

Hi @Dan_Wroblewski ,

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

[Dan_Wroblewski]

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.

[Bharathi_S]

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.

[Dan_Wroblewski]

See my code and even better the code by ajitkumarpanda above

[Bharathi_S]

Thank you!

Here is my piece of code.

I've refered below JS code.

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

[Ajit_K_Panda]

Hi @Dan_Wroblewski , 
Here is my output:

• 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.

[Dan_Wroblewski]

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?

[Ajit_K_Panda]

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.

[Dan_Wroblewski]

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)

[cwitschel]

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

[Dan_Wroblewski]

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

[Farid]

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.

[abdullahgunes]

Hi All,

Here is my week 2 contribution. 

Looking forward to next week.

[Dan_Wroblewski]

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.

[abdullahgunes]

Hi Dan,

Thanks for corrections, updated.

[javiermartin02]

Thanks Dan for another great challenge!

 

 

[aaruljothi]

Hello,

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

[Dan_Wroblewski]

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

[samuelesalines]

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

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

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 🤓

 

[samuelesalines]

@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

[Dan_Wroblewski]

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

[samuelesalines]

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

[Dan_Wroblewski]

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

[merituulimelkko]

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

[merituulimelkko]

@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!

[samuelesalines]

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 

[Jidnyasa]

Week 2 submission

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

[Dan_Wroblewski]

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

[PAstolfi86]

Hi,

here my screenshot taken from preview webapp

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.

[Dan_Wroblewski]

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.

[enzoleon]

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.

Another great movie btw, Monsters Inc.

[Dan_Wroblewski]

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

[PatrikMajer]

Hi Dan, 

thank you for another great challange.