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
25,111

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

ADR
Participant
5,033

Hi Dan, 

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

This is the screenshot from laptop browserThis is the screenshot from laptop browserThis one from Android mobile preview app, the background color is  not considering the borders.This 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
Developer Advocate
Developer Advocate
0 Kudos
4,130

Nice!!

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




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

0 Kudos
4,091

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
Discoverer
4,439

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 PreviewAndroid App PreviewWeb PreviewWeb Preview

Thanks,
Anjaly

evra83
Explorer
4,367

Hi Dan,

Thanks for this challenge

WhatsApp Image 2023-04-11 at 15.57.03.jpeg

0 Kudos
4,136

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




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

Cylia_Oulebsir
Participant
4,354

Hi @Dan_Wroblewski , 

Thank you for these interesting challenges,

Challeng2.png

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 🤗

 

0 Kudos
4,137

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?




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

manuelbordallo
Explorer
4,218

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.

IMG_1757.PNG

Best regards,
Manuel Bordallo

KarthickD
Participant
4,212

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

KarthickD_0-1681301180325.jpeg

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

KarthickD_1-1681301310484.png

 

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

Thanks for the Challenge!!

0 Kudos
4,134

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.

 




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

0 Kudos
4,126

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

0 Kudos
4,104

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




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

4,041

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
Explorer
4,211

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. 

Challenge 2.jpg

0 Kudos
4,125

Thanks for entering 😺




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

PriyanjanaRoy
Associate
Associate
4,217

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. 

PriyanjanaRoy_0-1681305081373.png

 

0 Kudos
4,131

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




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

4,105

PriyanjanaRoy_0-1681381064630.png

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
Explorer
4,112

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!

Screenshot 2023-04-13 163211.png

0 Kudos
4,001

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




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

evra83
Explorer
4,100

Hi Dan,

Thanks for challenge 2

Challenge 2 Vladimir Romero.jpeg

LeandroRibeiro
Participant
4,114

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

LeandroRibeiro_0-1681406264663.png

Screenshot_20230413-141201.png

0 Kudos
4,092

Nice 😺

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




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

4,031

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.

 

LeandroRibeiro_0-1681571312791.png

Screenshot_20230415-121242.png

0 Kudos
4,024

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.




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

govardhansahil
Explorer
4,120

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.

Created_Page.jpg

0 Kudos
4,101

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?




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

4,090

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
Explorer
4,119

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

Ranjith_Kumar_0-1681415462988.png

 

induthiru
Participant
4,083

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.

induthiru_1-1681473443349.png                

induthiru_2-1681473567894.png

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

 

 

0 Kudos
4,041

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.




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

brodierose
Explorer
4,087

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 😅

IMG_9168.PNG

Regards, Brodie

4,048

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. 




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

NoeJC
Explorer
3,989

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 🙂

noe_jimenez_0-1681640596327.png

 

0 Kudos
3,926

Glad you managed to complete!!




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

ManojSutar
Explorer
3,953

Screenshot_20230417_000619_SAP Build Apps.jpg

0 Kudos
3,931

Nice!




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

former_member136915
Product and Topic Expert
Product and Topic Expert
3,953

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.

SAP Build Challenge 2 UI Design.jpg

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

SAP Build Challenge 2 UI Design web.jpg

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

3,948

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