4 weeks ago - last edited 2 weeks ago 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!
3 weeks ago - last edited 3 weeks ago
Hi Dan_Wroblewski , @Rekha_DR
Please find below Hash code and Screenshots generated
5156a30ad4e400819281dcfea18d7865d0a28fb6887fbdd99be545d9f63e0440
3 weeks ago - last edited 3 weeks ago
3 weeks ago
3 weeks ago
3 weeks ago - last edited 3 weeks ago
3 weeks ago
3 weeks ago
3 weeks ago
3 weeks ago - last edited 3 weeks ago
___________________________________________________________________________________
Hash - 9aca90e747283386e9f86574782d836bd974edd08cef6ebf8d4861b05859ce85
____________________________________________________________________________________
Screenshots-
____________________________________________________________________________________
- BY RAHUL1221
3 weeks ago
3 weeks ago
3 weeks ago
3 weeks ago
2 weeks ago
2 weeks ago - last edited 2 weeks ago
@Dan_Wroblewski @Rekha_DR -Please confirm.
My hash -
afee1a9e7866a7c7d52b1119220f7d13b226f0bd9d207518083c52ca59bf4a6c
2 weeks ago
2 weeks ago
2 weeks ago - last edited 2 weeks ago
Hash: 188feefb589c5788f3e077bbbe7fee2d5548ebf9f3eebded004f4a297e731c33
New Hash: 176c3aa3f0db8272ed302e11bdc8048f3861e47debb07e896d06072338553033
2 weeks ago
Thanks for joining 😺
Unfortunately, the hash does not look right. Make sure you entered the correct phrase and that the community ID is entered correctly. There was an earlier bug in the skeleton app that the string to hash was not bound to the input field – make sure the hash is being done correctly, even do it manually in the data resource on the Data tab.
2 weeks ago - last edited 2 weeks ago
Thanks for suggestion @Dan_Wroblewski , the "String to hash" field is bound to app variable. see screenshot below:
I tried API output from data tab:
Hash:
188feefb589c5788f3e077bbbe7fee2d5548ebf9f3eebded004f4a297e731c33
Screenshot from Data tab:
2 weeks ago
2 weeks ago
2 weeks ago - last edited 2 weeks ago
2 weeks ago
Same as above:
We are looking for the generic string that you get when you want to create your own color, you have to click this menu item, for example, for the background color or for the text color. Make sure it is in all caps, 2 words
It's not shown in this screenshot but this is where you would find it.
2 weeks ago
2 weeks ago
2 weeks ago
Thanks @Dan_Wroblewski for having patience in explaining the issues, really appreciate it.
it was my bad I did not understand the task.
here is my hash: 176c3aa3f0db8272ed302e11bdc8048f3861e47debb07e896d06072338553033
Hoping this is correct.
2 weeks ago
HOME PAGE
DETAIL PAGE
HASH
411f2d5485f6a371906cc2bf3c63cd3843d79d95b0a9f6404c14705a8214d791
Thanks for this fun challenge
2 weeks ago - last edited 2 weeks ago
2 weeks ago
Oeps @eshrinivasan thanks for letting me know. Here a new screenshot of the home page (with extra info, because already started with the next challenge):
And also a new hash:
e53d86abbfadc7d899ea5d4c06fd2a5ddf2519ef0e25297f53c4d75510a7e67c
2 weeks ago
2 weeks ago
2 weeks ago
2 weeks ago
2 weeks ago
2 weeks ago
2 weeks ago
2 weeks ago - last edited 2 weeks ago
71d25487cdf9dd2c4fc28743fd01714e48e655f7af6c35ad52d75c94e4cdd58b
here is my submission
2 weeks ago
Hi, your community id is empty, hence the hash seems incorrect. Could you enter community id in the app variable and try again?
2 weeks ago