2024 Apr 17
6:13 AM
- last edited on
2024 May 02
8:19 AM
by
Dan_Wroblewski
The challenge is now over. See our wrap-up blog.
Hello Everybody!
We hope you’re enjoying the SAP Build Apps Developers Challenge so far.
Today, we’d like to change directions and focus on theming and layout design of your app, a very interesting topic that is critical both to “offer” the value of your app and a great User experience (UX) for the users. The app we are going to work with looks like this on the SAP Build Preview App on Mobile device.
We will give you a skeleton app and will want you to fix up the UI. This skeleton app will also be used next week, where you’ll learn about native capabilities and connect it to APIs to create an app called NearbyApp using which you can find relaxation/entertainment spots around your locality.
The challenges so far:
To handle the look and feel of your app, there are several concepts you need to understand, as well as several SAP Build Apps tools that we’d like to make sure you are aware of.
Theme: A theme is pre-designed template that determines the overall look and feel of an application/app. The purpose of a theme is to create unity across web pages through the consistent use of a color palette, fonts, and layout patterns.
When you’re creating your application, you can define once how you want it to look based on your company’s brand or the design guidelines of your project. If you change the main theme, all the components that you’ve used will automatically adapt and follow the guidelines, down to the color system, typography, backgrounds, and more.
Theme Tab: This is where you can change themes to the latest SAP Fiori themes. Here it is also possible to adjust colors, theme variables and font settings for the entire theme.
Style Tab: Is used for setting background colors, text colors, typography of text of the UI components like cards, buttons and headings.
Style Classes: A style class defines values for all the style properties of a UI component on how it looks: font, colors, borders and so on. You can reuse the same style class to style all the other UI components of same type.
For example, once you set the background color and text color for a button, you can save this as a New Style and reuse this style class for the rest of the buttons. This is cool and time efficient – and you will do this for this challenge!
Smart Colors: There is a system in the SAP Build apps to take care of the color contrast automatically. Based on the background color, the text color is matched intelligently.
For example, for the Brand background which is blue in color, if you set Secondary text which is also blue color, the app intelligently resolves to the text color white to provide a contrast to the text for readability.
If you set Neural High Contrast (black) text for the dark mode (black) background, it resolves to white color.
Layout Tab: Here you can design the layout of the app, like spaces between components, width and height of the components, position of the components and so forth. In this challenge, you will use it to set the gaps between the buttons.
For more information on theming tools, see this blog.
For more information on building SAP Fiori apps with SAP Build Apps, see this blog.
👉 Your Task
We will give you an app that looks dull, boring and unformatted. Your job is to change its look and feel and make it beautiful!
Here are the changes to the Home Page to be made:
Here are the changes to the Details page to be made:
Download and import your skeleton NearbyApp into your SAP Build Lobby.
It’s time to get started with your task!
Your Task List
To help you get started, here’s a quick example of what you’ll need to do.
In the UI Canvas, select Page Layout in the tree view (this represents the page), and create a custom background color. To create a custom color, select the current color and choose New Palette. Make the color Hex value #03093E and call it Deep Blue.
After all your theming and styling, the app should look like this – isn’t it visually appealing and wonderful!?
Now showcase your own work!
4. Post the screenshots and your hash as a reply to this discussion.
Great and Congrats! You have now completed Week 3 Developer’s challenge successfully.
Next week you will be adding the Logic to this App to find the Activities around your Location by connecting it to a real API and using the location services (GPS) on your mobile.
Thank you for taking part in this SAP Build Apps Developer's Challenge!
2024 Apr 17 8:50 AM
2024 Apr 18 7:36 AM
Could you try regenerating the hash only @YogSSohanee by taking the latest skeleton app from the link above?
2024 Apr 18 8:32 AM
Hello eshrinivasan,
Updated Hash: 474a39588075a0c55e3151bf899fbe4d04824a36ce13cc513247873e3f2993ad. Should we continue our app changes for next challenge in this new version or we can use the earlier version also?
2024 Apr 18 8:42 AM - edited 2024 Apr 18 9:25 AM
Your hash works well @YogSSohanee
That is a good question. In the app where you did the theme changes, just make sure that on the "Challenge Hash" page, the stringToHash Value is bound to the Data variables -> App variable -> stringToHash variable as you would need the app and the styles for the next week as well. This way you can avoid redoing the style changes you made as part of Task 3 and also make the hash generate correct responses.
2024 Apr 18 8:44 AM
2024 Apr 17 11:54 AM
2024 Apr 18 7:35 AM - edited 2024 Apr 18 7:57 AM
Looks good. It was a good catch btw, the skeleton app is now updated. How did you manage to generate the hash ?
2024 Apr 18 8:34 AM - edited 2024 Apr 18 9:00 AM
@eshrinivasan Noticed that the default user ID wasn't appearing in the hash screen, so went looking for at the bindings and fixed them.
2024 Apr 17 2:06 PM - edited 2024 Apr 18 5:17 AM
2024 Apr 17 2:59 PM - edited 2024 Apr 18 8:21 AM
2024 Apr 18 7:34 AM
Could you try regenerating the hash only @RameshShrestha by taking the latest skeleton app from the link above?
2024 Apr 18 8:22 AM
Thanks @eshrinivasan for checking.
Updated the new hash.
dafe1749980fa60a04e5f72056cccf719470b97898d23b6e450fad61260a1eef
2024 Apr 17 4:17 PM
2024 Apr 17 4:18 PM
2024 Apr 18 7:34 AM
2024 Apr 18 9:32 AM
2024 Apr 18 9:39 AM
Ruthiel, The hash looks exactly the same as before. You could fix the bindings in the app like so.
On the "Challenge Hash" page, bind the stringToHash Value to the Data variables -> App variable -> stringToHash variable and then regenerate the hash.
Other approach is to download the skeleton app again as the bindings are fixed, but in that case, your theme/styles will have to be redone which can be avoided by fixing the binding for stringToHash Value.
2024 Apr 21 7:31 PM
2024 Apr 22 4:41 AM
2024 Apr 18 5:27 AM
Hi All, There was a problem with generating hash in the skeleton app. Now the skeleton app has been updated. Could you please download the skeleton app to do the hash part and edit the post with correct hash ?
2024 Apr 18 7:21 AM
2024 Apr 18 7:32 AM
2024 Apr 18 11:38 AM
2024 Apr 18 12:05 PM
The screenshots look good. Unfortunately, the hash does look right.
2024 Apr 18 12:31 PM
2024 Apr 18 12:33 PM
2024 Apr 19 8:10 AM
2024 Apr 19 9:52 AM
2024 Apr 19 10:50 AM
2024 Apr 19 2:30 PM
2024 Apr 21 2:39 PM
2024 Apr 21 11:56 PM
2024 Apr 20 9:11 PM
2024 Apr 21 1:43 PM
2024 Apr 21 6:20 PM
2024 Apr 21 10:36 PM
2024 Apr 22 7:12 AM - edited 2024 Apr 22 7:13 AM
2024 Apr 23 5:08 AM
Hi, Unfortunately, the hash seems to be incorrect. Please try the instructions again to find the correct answer.
2024 Apr 23 7:54 AM