2023 Apr 08 6:45 PM - edited 2023 Apr 18 2:41 PM
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:
Here are some learning materials:
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):
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.
Here's a 1-minute video of what you need to do.
2023 Apr 27 4:57 PM
2023 Apr 30 10:15 AM
2023 May 01 3:26 PM
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.
2023 Apr 27 10:23 PM
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
Cheers,
Emanuel
2023 Apr 30 10:13 AM
2023 Apr 28 3:26 PM
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
2023 Apr 30 9:54 AM
2023 May 01 11:18 AM - edited 2023 May 01 11:20 AM
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
2023 May 02 5:41 AM
2023 May 02 2:45 PM
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.
2023 May 01 2:11 PM
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.
2023 May 02 5:40 AM
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.
2023 May 02 6:02 AM
My final layout or design reflects more of my learning experience than the Challenge requirements. Please see below for my learning experience.
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.
2023 May 02 6:04 AM
2023 May 02 10:05 AM
2023 May 03 6:22 AM
Hi Daniel, please see below:
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.
2023 May 03 8:08 AM
@merituulimelkko I'm sure there is ALOT in the pipeline for adjusting the UI but can you take the comments above to development/PM?
2023 May 03 10:44 AM - edited 2023 May 03 10:54 AM
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:
Phone:
2023 May 03 11:11 AM
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
2023 May 04 5:35 PM - edited 2023 May 04 5:36 PM
Hi Dan,
Excited to share the result of my learning. Screen designing figuring out was a little hard.
But I like it.
That tiger looks like from
2023 May 07 6:55 AM
2023 May 06 4:24 AM
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:
Web screenshot:
Thanks,
Pamela
2023 May 07 6:13 AM
2023 May 06 6:15 PM
2023 May 07 6:06 AM
2023 May 06 6:43 PM - edited 2023 May 06 6:54 PM
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 :
However, a strange issue, in webApp preview, the right margin disappears and i noticed this in some previous submissions..
Than you for this challenge, i will go to next challenges :).
Saad Igueninni
2023 May 07 6:02 AM
2023 May 06 9:44 PM - edited 2023 May 06 9:46 PM
Hello Daniel,
My submission for the second week task.
The same in my android app. Not sure why the border and padding of the container is not properly displayed.
Cheers,
Akash.
2023 May 08 12:00 AM
2023 May 15 7:23 AM