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 11 4:51 PM
Hi Dan,
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.
Regards,
Anupam
2023 Apr 13 7:19 AM
2023 Apr 13 8:38 AM
2023 Apr 11 8:25 PM
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.
Thanks,
Anjaly
2023 Apr 11 9:59 PM
2023 Apr 13 7:32 AM
2023 Apr 11 11:44 PM
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 🤗
2023 Apr 13 7:37 AM
2023 Apr 12 11:26 AM
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.
Best regards,
Manuel Bordallo
2023 Apr 12 1:01 PM
Hi @Dan_Wroblewski ,
Here is my Output for Week 2,
Well it was interesting !!
Here is my Formula for repeating the stars
MAP(REPEAT({"color": ""}, 5),{"color":RGB(FLOOR(RANDOM() * 255),FLOOR(RANDOM() * 255),FLOOR(RANDOM() * 255))})
Thanks for the Challenge!!
2023 Apr 13 8:31 AM
2023 Apr 13 8:39 AM
2023 Apr 13 9:11 AM
2023 Apr 14 7:31 AM
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 😅
2023 Apr 12 2:07 PM
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.
2023 Apr 13 8:52 AM
2023 Apr 12 2:11 PM - edited 2023 Apr 12 2:12 PM
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.
2023 Apr 13 8:55 AM
Thanks for participating even if there is work to do 😺
Let me know if you need anything else
2023 Apr 13 11:18 AM
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!
2023 Apr 13 12:14 PM
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!
2023 Apr 15 6:49 PM
2023 Apr 13 4:16 PM
2023 Apr 13 6:18 PM
Very cool challenge!
I ended up using the formula below and then "repeated.current.Color" in the Style (color) of the icon.
2023 Apr 14 5:15 AM
2023 Apr 15 4:14 PM
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.
2023 Apr 15 6:09 PM
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.
2023 Apr 13 6:51 PM
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.
2023 Apr 14 5:13 AM
2023 Apr 14 5:54 AM
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.
2023 Apr 13 8:54 PM
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
2023 Apr 14 1:03 PM
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 🙂
Cheers,
Indu
2023 Apr 15 6:41 PM
2023 Apr 14 2:10 PM - edited 2023 Apr 14 2:23 PM
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 😅
Regards, Brodie
2023 Apr 15 6:44 PM
2023 Apr 16 11:28 AM
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 🙂
2023 Apr 17 5:34 AM
2023 Apr 16 7:40 PM
2023 Apr 17 5:27 AM
2023 Apr 16 9:56 PM
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.
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".
2023 Apr 17 3:20 AM
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