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
24,778

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

joeremo
Participant
3,225

Monsters, Inc. (BONUS answer for movie alluded to)

0 Kudos
3,205

Did you like Monsters Inc.? What about Monsters University?




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

3,190

Yes, my kids and I loved Monsters. Inc.! But I love both movies even before their final cuts. My favorite part was watching my kids enjoy 3D animated movies. I taught them a lot about 3D and now my son is starting to do 3D modeling.

GRABLERE
Product and Topic Expert
Product and Topic Expert
3,225

Hi Dan,

nice challenge.

As for some of the others the shadow is not showing up on IOS preview currently. For reference another screenshot from the Webapp showing the shadow

GRABLERE_0-1682630569974.png

GRABLERE_1-1682630624046.png

Cheers,

Emanuel

 

0 Kudos
3,206

Wonder why the tiger is so big in the web one.

The shadow thing is a mystery because I can get it on my iOS




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

Tomislav
Explorer
3,213

Hi Dan, 

Sending my submission.
I also had an issue of consistency between android app and webapp preview

webapp not showing the shadow but having the right colors and transparency

Screenshot_20230428-161734.png

 

DesktopWeek2.png

 

0 Kudos
3,207

Looks nice 😺




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

VinayKumawat
Product and Topic Expert
Product and Topic Expert
3,194

Thanks for the UI Challenge, the random colors was test for formulas again, I quite liked it.

I could not expand the main container to full screen even adding the formula for width and height

temp.jpg

 

 

 

0 Kudos
3,170

Can you explain what you mean by expanding main container to full screen? And you used a formula for width and height?




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

johna69
Product and Topic Expert
Product and Topic Expert
0 Kudos
3,164

This sounds like the same learning journey I took. I did not realize that you could select  "Page Layout" in the tree and set the properties there.

https://docs.appgyver.com/docs/full-screen-background 

johna69
Product and Topic Expert
Product and Topic Expert
3,193

Playing catch up. Good to learn that I can disable the safe area.

I also tried the color property in the repeat binding without success. I had to move the random color selection to the Color property binding.

I found that disabling navigation and re-enabling it, causes the SAP Build Preview app not to show navigation again unless the app is restarted.

IMG_3475.jpeg

0 Kudos
3,171

Thanks for doing despite the hiccups ... The idea of the colors in the Repeat is just a place to generate the colors, but you still have to bind them in the Color property (unless there is a shortcut I don't know about). You can just generate the colors in the Colors property instead, though doing so in the Repeat is clever and shows you additional capabilities.




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

joeremo
Participant
3,170

My final layout or design reflects more of my learning experience than the Challenge requirements. Please see below for my learning experience.

SAP_Build_Challenge_2.jpg

I learned a lot and I also encountered the Shadow problem with Android. I narrowed it down to two main problems:

1. Shadow Effect with custom corners
2. Shadow Effect with default background color

I used multiple containers:

1. "Shadow Right" container with custom background color
2. "Shadow Bottom" container with custom background color
3. "Content and Custom Borders" container with custom background color from Challenge requirements

- One Shadow container was not enough because I needed to avoid combining it with custom corners.
- And any Shadow container required a custom background color.
- The Challenge made it easy for me to only need two Shadow containers, one for the right and one for the bottom.
- I also needed to avoid joining the two Shadow containers in such a way that the join would be visible in the middle of the Content container. I couldn't figure out how to hide the join.
- The final two Shadow containers were long and narrow and precisely placed under the required Border, with only the Shadow visible.

0 Kudos
3,169

Thanks for joining and glad you learned something ... that was purpose ... I also love the "line" of stars you made 😺




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

JVLebbink
Explorer
0 Kudos
3,165

JVLebbink_0-1683018283296.png

My submission for the  UI Design challenge

PrashantJayaram
Product and Topic Expert
Product and Topic Expert
3,144

Hi Daniel, please see below:

9AC2865D-AD6E-46FC-8B06-A83CE826534D.jpeg

I've done some CSS before, which helped.  The rest was just figuring out where in the Build UI the various functionalities were, and figuring out the names of the formulas to use.  For the randomized star colors, the "Data item in repeat" binding did not work, but using the exact "Formula" equivalent did work; probably a bug that needs fixing.

As far as new feature suggestions, I'll just make the very cliche and in-vogue suggestion of adding an AI co-pilot.  The various functionalities/features of Build can be somewhat unintuitively located; it would be great if you could just tell an AI what you're looking for and have it find it for you.

And the movie is "Monsters, Inc.", as I've indicated in the title.

3,141

@merituulimelkko I'm sure there is ALOT in the pipeline for adjusting the UI but can you take the comments above to development/PM? 




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

TimothySanty
Participant
3,139

Hi Daniel,

I have been a backend software engineer for the better part of the last 20 years, so you can imagine for me this was a quite frustrating and challenging exercise 🙂 I have learned a lot! Once I grasped how the containers functioned, things started to go more smoothly. I particularly enjoyed figuring out the formula for the stars. I got it working quite fast, but all the stars were the same color. It took me some time to figure out how to add the index of the repeated list.

Movie is Monster Inc BTW!

PS: I just noticed that the shadow is not showing on my (Galaxy S21) Phone, but it is showing in the web preview?

Web:

TimothySanty_0-1683107580105.png

 

 

Phone:

SmartSelect_20230503_113806_SAP Build Apps.jpg

 

 

 

3,135

It is great that you got a chance to participate in the challenge ... it's interesting about your background since I have heard that one possible audience for SAP Build are professional backend developers but those with less/no experience with front-end development. Glad you participated and liked it 😺 

Same color for stars: I only learned by trial and error that I need some changing parameter in the formula otherwise it will always result in the same color, even though it is set to be random.

Please try the other challenges




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

jj
Active Contributor
3,113

Hi Dan,

Excited to share the result of my learning.  Screen designing  figuring out  was a little hard. 
But I like it.

jj_1-1683218052730.png

 

That tiger looks like from 

jj_0-1683215540592.png

 

Dan_Wroblewski
Developer Advocate
Developer Advocate
3,063

Yes, I've heard the reference to Life of Pi -- I really enjoyed the book and the movie and the philosophical questions it asks  




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

Pamela
Product and Topic Expert
Product and Topic Expert
3,103

Hello Daniel,

Here is my challenge 2 submission. This is the first time I used SAP Build Apps to design UI. I've learned a lot. Thanks again for running this challenge.

I just noticed that the shadow is not showing on my phone.

Phone screenshot:

Pamela_0-1683342491015.jpeg

Web screenshot:

 

Pamela_3-1683343425884.png

Thanks,

Pamela

0 Kudos
3,064

There seems to be some issue with the mobile representation of the UI, espeically the shadow. I think it is a known bug. Thanks for participating.




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

P000636
Active Contributor
3,087

My UI, Manuel Rodriguez(p000636) Thx

Screenshot_20230506_191054_SAP Build Apps.jpg

0 Kudos
3,065

Seeing that grumpy cat never gets old ... thanks for participating 😺




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

Dasig
Participant
3,083

Hello Dan,

Finally managed to find time for this second challenge, loved it! Using absolute for the parent container Layout make it simpler.

I liked the formula part for colors.

My UI :

Dasig_0-1683395659871.png

 

 

 

However,  a strange issue, in webApp preview, the right margin disappears and i noticed this in some previous submissions..

Dasig_3-1683395404826.png

 

 

Than you for this challenge,  i will go to next challenges :).

Saad Igueninni

 

0 Kudos
3,066

Thanks for participating and glad you liked the challenge😺




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

Akash-B-R
Product and Topic Expert
Product and Topic Expert
3,075

Hello Daniel,

My submission for the second week task.

Output.png

 

 

 

 

 

The same in my android app. Not sure why the border and padding of the container is not properly displayed.

Output [mobile].png

 

 

 

 

 

 

 

 

 

 

Cheers,

Akash.

aonunes
Explorer
3,053

First time messing around with the UI in Build Apps, turned out kind of OK?

aonunes_0-1683500424960.png

0 Kudos
3,039

Yes, it looks really good ... hope you continue to try out SAP Build Apps for some app you need 😺 




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