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.
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.
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..
For the color in the stars, I've reused the @ajitkumarpanda 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.
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.
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?
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)
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 🤓
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.
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.