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:
- Task 0: Set Up SAP Build Apps
- Task 1: OData
- Task 2: Formulas
- Task 3: Theming, Styling and Layout Design
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.
- Open the app and change its theme from SAP Quartz light to SAP Morning Horizon. You can test if the theme is changed in the Web App Preview.
-
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.
- In the Home Page UI, select the Card UI component, and give it a background image (Google a cool landscape picture of your location/city landscape). We are curious to see the picture of your location!
- Select the Cafes button, and change its background color to Secondary background (in the Universal palette) and change the text color of the Button to ICON (under SAP Morning horizon). Create a new style based on your changes and call it Button Colors.
- Reuse Button Colors style for the other 3 Buttons Movies, Bars, Restaurants.
- Select the Large Image List Item, and change its background color to Secondary background.
- On the Details Page, set the Page Layout background color to Deep Blue.
- Set all title and text colors to TEXT WHITE. You can create a new style and reuse it for all other components of the same type. Apply the Check Distance button.
- Back on the home page, select the Cafes button. Under the Layout tab, add horizontal spacing both and left and right side to S-8px. Repeat for all the other buttons.
After all your theming and styling, the app should look like this – isn’t it visually appealing and wonderful!?
Now showcase your own work!
- Switch to Variables and set the initial value of the app variable communityID initial value to your own SAP community ID.
- Preview your app, either on Web Preview or on the mobile Preview App, and take 2 screenshots: One of the home page and one of the details page.
- In your project, go to the Home Page and select Page Layout in the tree view.Under the Style tab, you’ll see the Background Color attribute. If you want to create your own custom color for this background, which menu item do you click from the dropdown? Hint: This menu item has the icon
. The name of the menu item is the string you need to hash. To do the hash, click # Generate Hash in the Navigation bar. Enter your answer in the String to Hash field in all caps with a space between two words, so that if as an example your answer were Create Color, you would hash CREATE COLOR.
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!