April (Citizen) Developer Challenge – SAP Build Apps: Task 3

[Rekha_DR]

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   (this post)   
• Task 4: Mobile device capabilities ( full and final one! )                                                                                           

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.

1. 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.
   
   

2.  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.

3. 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!
   
4. 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.
5. Reuse Button Colors style for the other 3 Buttons Movies, Bars, Restaurants.
6. Select the Large Image List Item, and change its background color to Secondary background.
7. On the Details Page, set the Page Layout background color to Deep Blue.
8. 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 Button Colors Style class created earlier to Check Distance button as well.
9. 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! 

1. Switch to Variables and set the initial value of the app variable communityID initial value to your own SAP community ID. 
2. 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.
3. 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! 

[YogSSohanee]

My Hash: f06f1686f5cc2a5d88e264a82e8f5304c3792049312c5ff27d9b2f83d3b1ab75

Really nice experience to learn about theming in detail.

[eshrinivasan]

Could you try regenerating the hash only @YogSSohanee by taking the latest skeleton app from the link above?

[YogSSohanee]

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? 

[eshrinivasan]

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.

[YogSSohanee]

Thanks eshrinivasan, for your reply! 

[geek]

8ba714baecff9a4241df012bc156c5aacbb94110a540e7d7aa50bfdae5cecd74

Think that there's something wrong with the model app, in the Hash page the community ID isn't bound to the app variable, neither is the StringToHash

[eshrinivasan]

Looks good. It was a good catch btw, the skeleton app is now updated. How did you manage to generate the hash ?

[geek]

 @eshrinivasan Noticed that the default user ID wasn't appearing in the hash screen, so went looking for at the bindings and fixed them.

[eshrinivasan]

Hash:

f54c49228ab0a9580b3f360a266ffa39c43f047950d74592cf7b9ead357fe067

[RameshShrestha]

Hi @Rekha_DR ,

Updated Hash with new skeleton:

dafe1749980fa60a04e5f72056cccf719470b97898d23b6e450fad61260a1eef

Home Page: 

Detail Page:

[eshrinivasan]

Could you try regenerating the hash only @RameshShrestha  by taking the latest skeleton app from the link above?

[RameshShrestha]

Thanks @eshrinivasan for checking.

Updated the new hash.

dafe1749980fa60a04e5f72056cccf719470b97898d23b6e450fad61260a1eef

[Ruthiel]

Hello @Rekha_DR ,

My Hash: 4739c593322c8f368be5de98b407ef20a01a3eb00b00bfb4f4cff8d5c96f3caf

[Ruthiel]

[eshrinivasan]

Could you try regenerating the hash only @Ruthiel by taking the latest skeleton app from the link above?

[Ruthiel]

For sure:
4739c593322c8f368be5de98b407ef20a01a3eb00b00bfb4f4cff8d5c96f3caf

[eshrinivasan]

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.

[Ruthiel]

Hello!
Thanks for your help!

I followed your instructions and now I have a different Hash indeed:
25908cb8600f978310ed4da8d02c285eac68750f30facc3249595e44283c7605

Hope it is correct now.

[eshrinivasan]

Works now! Cheers!

[eshrinivasan]

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 ?

[mwn]

My hash c217e3fef2a1855a8a6b837a80a89be8c908cd0f000dbaaf066d7964e9ecbe24

[eshrinivasan]

Hash works @mvn. Well done!

[SMaaLL]

Hello @Rekha_DR ,

My hash is a8736b22a41c9b17b21a962aaf49a720fbbe8ab97d9b9349430380cea6c2cf33

[eshrinivasan]

The screenshots look good.  Unfortunately, the hash does look right. 

[SMaaLL]

hash is 969968c5b211889d56eb438f5c72c6e28d54b2e74de2c18d6695c69622895d8a

[eshrinivasan]

Looks great now 😀

[beny_illyes_mhp]

7926d81cf1c4f900c6d2b79c524552a1c75ca2186ea67d78bbe1cfd387eeb22d

[brodierose]

b243e3a03beae55c60d6730b83b1b0ea9cd673390a4e299377902c8932809014

[ajmaradiaga]

Hash: 5a631a765d1e6e35de8f71a7550c5e6e984c6d295b1a0a3c8fb4526f31f6cb3c

Screenshots:

Home screen 
Details screen

[Alpesa1990]

My Submission,

Hash: 98f01768a3d87a9bf9251f84f55f72b6db4e103b81697c9e0dacc76540c53a4b

[Dan_Wroblewski]

Nice UI 😸

Unfortunately, the hash is not working. Can you check that you entered your community ID and the string to hash was the name of the option for creating a new local palette color? 

[Alpesa1990]

Sorry,

I forgot the caps. The new hash

baa5592692f769f88fb8bea10d31ad060586760272e0e5abe379359a9e5840f5

Thanks!

[Nagarajan-K]

8db63730ccb7922b16b89f5892a5c65ccab3b379333fd1f328fbc7d0f9caa72e

[emiliocampo]

49e73a63d90f706e42680d72e53402873fb07c5389e15b1a8db49edf2bd354e0

[M-K]

My Hash: 4e570a8f90aed8d2573212fd667f14dca93b01faf09a4634986ac016674a8a88

[vincenzopar]

Hash 5a57913b168a713095e2ad06ad8885c2e7af79bd2b8fe2e4b09babf111ad910f

[gphadnis2000]

251097be0e0025fd3c114cf36fe326698426e57d48c6d0db3c4a891784283194

[eshrinivasan]

Hi, Unfortunately, the hash seems to be incorrect. Please try the instructions again to find the correct answer.

[gphadnis2000]

new hash i found it as per instruction

71fa3eef6d97cfb882d5b6051c15306f86a07a6d5d656fd898ca4ab7b9ca6286