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.

[ADR]

Hi Dan, 

Here is my week 2 submission. Monsters Inc is one of my favorites. 

This is the screenshot from laptop browserThis one from Android mobile preview app, the background color is not considering the borders.

I have used a long logic to randomize the colors. 

COLOR(RGB(MOD((RANDOM_INTEGER_BETWEEN(0, 255) * repeated.current),255),MOD((RANDOM_INTEGER_BETWEEN(0, 255) * repeated.current),255),MOD((RANDOM_INTEGER_BETWEEN(0, 255) * repeated.current),255)))

Looking forward for the next challenge. 

Regards,

Anupam

[Dan_Wroblewski]

Nice!!

Why did you need the COLOR functions? What was the repeated list?

[ADR]

Hi Dan, 

My repeated list is just a simple array [1,2,3,4,5]. I realized it works without the COLOR function. The result is same. Thanks for highlighting.

Regards,

Anupam

[anjalymgeorge]

Hi Dan,

Here is my week 2 submission. It was a good chance to explore more on UI designing using SAP Build Apps.
I would like to explore on implementing Input value help using Build Apps.
The "Mike and Sully and Boo" are charecters from Monsters Inc.Android App PreviewWeb Preview

Thanks,
Anjaly

[evra83]

Hi Dan,

Thanks for this challenge

[Dan_Wroblewski]

Thanks for participating -- you're text in the app is funny 😺

[Cylia_Oulebsir]

Hi @Dan_Wroblewski , 

Thank you for these interesting challenges,

I have one comment/question 😁

while working on this challenge, and in order to move the different objects in the right places, I use the layout to adjust the dimensions, my question is: can we do it differently, for example using drag-and-drop option like  what we do in smartforms / adobe Forms

looking forward to what's next 🤗

[Dan_Wroblewski]

Thanks for participating 😺

Can you show me how it's done with Adobe Forms? What do you mean by drag-and-drop option for configuration?

[manuelbordallo]

Hi @Dan_Wroblewski,

I am really enjoying these challenges and learning about SAP Build Apps. It is a very promising tool for developers and customers.

Here is my answer to the challenge and the related film is Monsters SA, really great movie.

Best regards,
Manuel Bordallo

[KarthickD]

Hi @Dan_Wroblewski ,
Here is my Output for Week 2,

Well it was interesting !!
Here is my Formula for repeating the stars 

MAP(REPEAT({"color": ""}, 5),{"color":RGB(FLOOR(RANDOM() * 255),FLOOR(RANDOM() * 255),FLOOR(RANDOM() * 255))})

Thanks for the Challenge!!

[Dan_Wroblewski]

And then you set the color of the icon to: repeated.current.color ?

Funny, if I try to set it directly to Item in repeat and then select color, it doesn't work for me ... just shows black stars. The formula works.

[KarthickD]

Yeah Right!! I too tried through Data Item in Repeat ..Doesn't work but formula does...

[Dan_Wroblewski]

@merituulimelkko Do you know why the formula would work but not Data Item in Repeat?

[merituulimelkko]

I don't know why but I do know it's a known bug I've encountered before and there's a bug report about it in JIRA, on number 5007 😅

[saranraj_9021]

Hi @Dan_Wroblewski , 

Here's my UI for challenge two. 

I've previously did completed few tutorials from SAP learning hub which helped in completing this challenge and i'd like to explore more on the formulas (There are sooo mannyyyy out there)  

Thanks Again for the challenge Dan !

Bonus Question : Monster, Inc. 

[Dan_Wroblewski]

Thanks for entering 😺

[PriyanjanaRoy]

The Repeat for icons worked for me, aligning them horizontally is getting difficult. And a few trials of approaches on the random colors are not working. There are quite a few things I need to refine here. But was pretty happy to have achieved this as my first UI try with Build apps! Maybe will update the submission by end date. 

[Dan_Wroblewski]

Thanks for participating even if there is work to do 😺

• To repeat something you just have to provide a list in the Repeat With field -- the list can be from anything like a variable, or from a formula like [1,2,3,4,5]
• To align things horizontally, you just add your things into a container and set the container layout to horizontal.

Let me know if you need anything else

[PriyanjanaRoy]

Did a few updates! thank you for the horizontal container detail! Added random color , shadow, change in a few other places, looks much similar now. Hope this counts! 

[Vishal_97]

Hi @Dan_Wroblewski ,

Here is my submission for week 2. I struggled a bit with understanding the opacity as I have never used RGB palette in my life. I achieved the color randomize with use of the formula in a custom style class for the icon.

Also I got an itch of "Life of PI" movie on looking at the tiger from this UI. Looking forward for more interesting challenges!

[Dan_Wroblewski]

Yes, it looks like the "tiger" (if that's what it was) on the lifeboat in Life of Pi 😺

[evra83]

Hi Dan,

Thanks for challenge 2

[LeandroRibeiro]

Very cool challenge!
I ended up using the formula below and then "repeated.current.Color" in the Style (color) of the icon.

[Dan_Wroblewski]

Nice 😺

Couldn't you just use the REPEAT function without the MAP?

[LeandroRibeiro]

Hi @Dan_Wroblewski ,

Thanks for the answer.

I'm having a little trouble using just REPEAT without MAP.  Should i use an array  [1,2,3,4,5]? Where do i use it? In a parameter of REPEAT?

With the REPEAT formula below, without the MAP, I generated the 5 stars with random colors but they all come with the same color.

[Dan_Wroblewski]

It could be that you need MAP. WHat I did was set the REpeat with with [1,2,3,4,5] and the color style to this formula:

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

But there are many ways to do it and if you found one then that is fine. In my color formula, I did need to add something that changed (index) otherwise it would produce the same colors for all stars.

[govardhansahil]

Hi @Dan_Wroblewski ,

Thanks for the challenge. It took me time to get to know about the components and make use of them. Getting the random colored stars was the tricky, I got black stars every time but finally solved it by assigned the Color value in styles. Great way to learn new things.

 

[Dan_Wroblewski]

Thanks for participating 😺

I also got black stars when using Data item in repeat but then used formula and it was fine. Can you explain what you did that didn't work and then what did work?

[govardhansahil]

Sure!

I wrote the formula for generating list of random colors in Repeat hoping that each icon would adapt the color generated. But it just showed black stars, seems like Repeat just makes use of the count that returns from the formula. Similarly formula binding for Icon expects "icon" and "set". Would have been better if "color" was also a property for icon object. So, I assigned the repeated.current.color in the style of icon and then the random colors worked.

[Ranjith_Kumar]

Hi Dan,

 Felt like designing adobe forms the properties, styles and layout functionalities reminds me pallette functions like working in sfp tcode...Eagerly waiting for next challenge

[induthiru]

Hello @Dan_Wroblewski ,

Thanks for the challenge. My preview from web is below. Like some of the builders, I too have a problem with the preview on my phone where the outer box's colour is gone.

                

The movie that struck me as soon as I saw the "Bengal Tiger" was "Life of Pi". The grumpy cat on the laptop resembles the lead character (Pi Patel) on the boat 😊.

Although I could achieve a fair replica of what you have built, this challenge took me longer time. I started with a lot of questions and redesigned it a few times until the latest. Also reading through the comments regularly about some of the features that I did not use, I wonder whether I have done it the right/easy way. Eg: I did not use the 'Z' index anywhere, I could not set the padding on either side of the cat as I was able to add padding either on the left or right and not both. So, had to set the padding on left and adjust the width of the picture. It would be nice if you could post video tutorials of how you built this app at the end of the month/challenge phase to help us understand any features that we may have not used.

A feature that I would like to know more about is 'Z-Index'.

Looking forward to the next challenge 🙂

Cheers,
Indu

[Dan_Wroblewski]

Thanks for persevering 😺

In the end I do not believe I used Z-index but used absolute position so the inside container would go on top of the tiger. I will definitely do a blog showing how we did the different challenges.

[brodierose]

Here is my Week 2 Challenge submission.

I am using IOS 16.4.1, but I can't seem to get the shadow to be visible on the preview app. 

Regarding a new feature, I would really appreciate a formula for generating random colours, as trying to figure out this formula took me way too long 😅

Regards, Brodie

[Dan_Wroblewski]

It's funny because I sort of just added the stars at the end ... the main thing was to show how to make the picture go to the edges, and how to use containers. That's for keeping at it. 

[NoeJC]

Hi Dan,

Great challenge! UI part was easier for me but I have to improve the interaction through Formula...I need more practice on SAP Build 🙂

[Dan_Wroblewski]

Glad you managed to complete!!

[ManojSutar]

 

[Dan_Wroblewski]

Nice!

[former_member136915]

Hello Dan,

unfortunately in the preview on Android mobile the background of inner container covers the rounded top corners and the color of the borders.

In web preview rounded top corners and border are not covered by the background:

Nevertheless very good learning session about styles, layouts and formula for randomizing colors for icon like the stars.

Bengal tiger reminds me to "Life of Pi".

[govardhansahil]

Hi @former_member136915 ,

I faced the same issue in my mobile. We can resolve it by applying corner radius of 24px to inner container. Why 24? Because Outer Container radius is 37px with size of 13px, 37-13=24px. This would exactly align inner container to outer. Not sure if there is a better workaround. @Dan_Wroblewski please share if there is optimal alternative for this.

Thank you