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.
Here is my week 2 submission. Monsters Inc is one of my favorites.
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.
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 🤗
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.
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.
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.
Thanks for participating even if there is work to do 😺
Let me know if you need anything else
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!
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.
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.
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.
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 🙂
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 😅
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".
Hi @AchimBolte ,
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.