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

[Rekha_DR]

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:

• 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! 

[SantoshC]

Hi Dan_Wroblewski , @Rekha_DR 

Please find below Hash code and Screenshots generated

5156a30ad4e400819281dcfea18d7865d0a28fb6887fbdd99be545d9f63e0440

[Rekha_DR]

32cb1dbe56ab4b6edfdf6e6e625793465be39df3ce86b9046a6c60a7a8a356c6

[stickman_0x00]

4190ba2b1b3214491401122bf9fcae1406fdd812c0e9c345b07cb6aac13f8446

[René]

2e1274fb244980130ad63ac93cdb8e4ada411c975d9adafd4d5448b5cdcc2e1d

[Vaibhav_Sapra]

Hello Team,

Here is the Hash: 4774ee5d9653370d5889ac9076a880f92af978a68da84294c3a0a56359dee6fe

And the screenshots

[Leon42]

43b3e89afdcc92d071f5b49e575bc56dfe8af289b1a584f8e6afcc421d662cd3

[encarrero]

dab4d149f614e4ac11b034625470f6f59da1621357285a82693d2c1c080fcd46

 

 

[tobiasz_h]

Hello All,
Hash: 4d9816a315fe8e95b551e43fc77326eb3a18632b70636c4cd5b3b20774f50df6

[RAHUL1221]

___________________________________________________________________________________
Hash - 9aca90e747283386e9f86574782d836bd974edd08cef6ebf8d4861b05859ce85
____________________________________________________________________________________
Screenshots- 

____________________________________________________________________________________


- BY RAHUL1221

[nex]

d1639fedc56e45e8205ed3f9a5c0058d0c5c193001e83ec6bd6fc9cce2e4f798

[Jonathan_Fr]

fb79bcf488aff9feb63b4936eebc9dadf1dcf850cef8713643888636e98255b2

[avinash12]

Task 3 - 

74e63022d873def33db5e7d914ae3d5f0933289b02bf9823a1af61b2db18d689

[Iren]

My hash:

94eb613655be41464b2d27b622c37e8fb64f10ee9eb7b5a1299f19d5e1e047b3

  

 

[narendran_nv]

Here's my hash: 6fa617ead22214e5f21185b2cf4e6da8d7781f11e55e6135713d1084b0cdb1bb

[jawahar_bosch]

@Dan_Wroblewski @Rekha_DR  -Please confirm.

My hash - 

afee1a9e7866a7c7d52b1119220f7d13b226f0bd9d207518083c52ca59bf4a6c

 

 

[jawahar_bosch]

Please confirm

[eshrinivasan]

Looks good!

[VinayKumawat]

Hash: 188feefb589c5788f3e077bbbe7fee2d5548ebf9f3eebded004f4a297e731c33

New Hash: 176c3aa3f0db8272ed302e11bdc8048f3861e47debb07e896d06072338553033

[Dan_Wroblewski]

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.

[VinayKumawat]

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:

[Dan_Wroblewski]

What is the string you are trying to hash? Show screenshot of your hashing page.

[VinayKumawat]

@Dan_Wroblewski  , thanks for quick reply. please see the screenshot of hashing page below:

[sabaameer13]

Please see what I am doing wrong. 

[Dan_Wroblewski]

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.

[Dan_Wroblewski]

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

[sabaameer13]

I guess I got it now :-P. Hopefully it will work

0479ab4b0f029883da1d479f6315b971351d0fe95582d91b110fafe9941e4519

[VinayKumawat]

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.

[PieterB]

HOME PAGE

DETAIL PAGE

HASH

411f2d5485f6a371906cc2bf3c63cd3843d79d95b0a9f6404c14705a8214d791

Thanks for this fun challenge

[eshrinivasan]

Hi @PieterB your community id seems different in the screenshot. The name that appears here on top of the reply post is your community id.

[PieterB]

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

[Dan_Wroblewski]

Still doesn't look right ... what string are you hashing here?

[PieterB]

@Dan_Wroblewski I have hashed the string NEW PALETTE

[eshrinivasan]

Hi @PieterB, Could you post only the hash as the reply here(without any screenshot attached). Thanks.

[PieterB]

e53d86abbfadc7d899ea5d4c06fd2a5ddf2519ef0e25297f53c4d75510a7e67c

[eshrinivasan]

Works now. Thanks.

[anumalasingh]

fadc1b6df3beb0f87374ae0532045654b524641dd211b57edbb8b9f67168a40a

[sureshmusham]

e17e94095fa4165b4730fd6319bd27d188aeeddf3e38096c3936a66c086c7623

 

 

[sabaameer13]

71d25487cdf9dd2c4fc28743fd01714e48e655f7af6c35ad52d75c94e4cdd58b

here is my submission

[eshrinivasan]

Hi, your community id is empty, hence the hash seems incorrect. Could you enter community id in the app variable and try again?

[sabaameer13]

Please find my new entries

My Hash # #82c1c06c35237b97c6cd963ac0921f14f70e94e5429e4849c08a19ea8dc9685