SAP Builders Discussions
Join the discussion -- ask questions and discuss how you and fellow SAP Builders are using SAP Build, SAP Build Apps, SAP Build Process Automation, and SAP Build Work Zone.
cancel
Showing results for 
Search instead for 
Did you mean: 

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

Rekha_DR
Developer Advocate
Developer Advocate
7,091

The challenge is now over. See our wrap-up blog.

2023-12-24_18-40-33.png

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.

Rekha_DR_0-1713336718749.png

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.

Rekha_DR_0-1713338712010.png

Style Tab:  Is used for setting background colors, text colors, typography of text of the UI components like cards, buttons and headings.

Rekha_DR_2-1713336912730.png

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!

Rekha_DR_3-1713336941163.png

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.

Rekha_DR_4-1713336973452.png

Rekha_DR_5-1713336983650.png

If you set Neural High Contrast (black) text for the dark mode (black) background, it resolves to white color.

Rekha_DR_6-1713337011515.png

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.

Rekha_DR_7-1713337040867.png

For more information on theming tools, see this blog.
For more information on building SAP Fiori apps with SAP Build Apps, see this blog

Rekha_DR_10-1713337327437.png

👉 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:

Rekha_DR_8-1713337109175.png

Here are the changes to the Details page to be made:

Rekha_DR_9-1713337150349.png

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.

    Rekha_DR_11-1713337445536.png
  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 Rekha_DR_1-1713338900236.pngNew 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!
     
    Rekha_DR_14-1713337727136.png
  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!?

Rekha_DR_15-1713337836309.png

Rekha_DR_16-1713337843715.png

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 Rekha_DR_2-1713338943749.png. 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.

Rekha_DR_18-1713337888815.png

 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.

Rekha_DR_19-1713337976753.png

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! 

82 REPLIES 82

SantoshC
Explorer
2,801

Hi Dan_Wroblewski , @Rekha_DR 

Please find below Hash code and Screenshots generated

5156a30ad4e400819281dcfea18d7865d0a28fb6887fbdd99be545d9f63e0440

SantoshC_0-1713769960871.pngSantoshC_1-1713769977402.png

 

Rekha_DR
Developer Advocate
Developer Advocate
0 Kudos
2,606

32cb1dbe56ab4b6edfdf6e6e625793465be39df3ce86b9046a6c60a7a8a356c6

Rekha_DR_0-1713784835583.png

 

Rekha_DR_1-1713782985713.png

 

stickman_0x00
Explorer
2,391

 

stickman_0x00_1-1713799365822.png

stickman_0x00_2-1713799375063.png

4190ba2b1b3214491401122bf9fcae1406fdd812c0e9c345b07cb6aac13f8446

 

René
Product and Topic Expert
Product and Topic Expert
2,376

2e1274fb244980130ad63ac93cdb8e4ada411c975d9adafd4d5448b5cdcc2e1d

 

Ren_0-1713814019768.png

 

Ren_1-1713814058581.png

 

 

Vaibhav_Sapra
Participant
2,366

Hello Team,

Here is the Hash: 4774ee5d9653370d5889ac9076a880f92af978a68da84294c3a0a56359dee6fe

And the screenshots

Vaibhav_Sapra_0-1713855161334.png

Vaibhav_Sapra_1-1713855172005.png

 

 

 

Leon42
Explorer
2,345

43b3e89afdcc92d071f5b49e575bc56dfe8af289b1a584f8e6afcc421d662cd3

 

Leon42_0-1713865520276.png

Leon42_1-1713865547805.png

 

 

 

encarrero
Participant
2,337

dab4d149f614e4ac11b034625470f6f59da1621357285a82693d2c1c080fcd46

IMG_4010.jpeg

IMG_4011.jpeg

tobiasz_h
Active Participant
2,286

Hello All,
Hash: 4d9816a315fe8e95b551e43fc77326eb3a18632b70636c4cd5b3b20774f50df6

tobiasz_h_0-1713881313333.png

tobiasz_h_1-1713881352916.png

 

RAHUL1221
Explorer
2,224

___________________________________________________________________________________
Hash - 9aca90e747283386e9f86574782d836bd974edd08cef6ebf8d4861b05859ce85
____________________________________________________________________________________
Screenshots- 

RahulPillai02.jpg

RahulPillai.jpg

____________________________________________________________________________________


- BY RAHUL1221



nex
Explorer
2,143

d1639fedc56e45e8205ed3f9a5c0058d0c5c193001e83ec6bd6fc9cce2e4f798

nex_0-1713963102884.png

nex_1-1713963122317.png

 

Jonathan_Fr
Explorer
2,097

fb79bcf488aff9feb63b4936eebc9dadf1dcf850cef8713643888636e98255b2

Capture_1.PNGCapture_2.PNG

avinash12
Explorer
2,073

Task 3 - 

74e63022d873def33db5e7d914ae3d5f0933289b02bf9823a1af61b2db18d689

image1.pngimage2.png

Iren
Explorer
2,041

My hash:

94eb613655be41464b2d27b622c37e8fb64f10ee9eb7b5a1299f19d5e1e047b3

challenge_3.png

  

challenge_3(1).png

narendran_nv
Explorer
2,000

Here's my hash: 6fa617ead22214e5f21185b2cf4e6da8d7781f11e55e6135713d1084b0cdb1bb

Citizen Developer Challenge – SAP Build Apps (Task 3-1).png

 

Citizen Developer Challenge – SAP Build Apps (Task 3-2).png

 

jawahar_bosch
Explorer
1,962

@Dan_Wroblewski @Rekha_DR  -Please confirm.

My hash - 

afee1a9e7866a7c7d52b1119220f7d13b226f0bd9d207518083c52ca59bf4a6c

IMG_6461.jpeg

IMG_6462.jpeg

0 Kudos
1,814

Please confirm

0 Kudos
1,801

Looks good!

VinayKumawat
Product and Topic Expert
Product and Topic Expert
0 Kudos
1,929

Hash: 188feefb589c5788f3e077bbbe7fee2d5548ebf9f3eebded004f4a297e731c33

New Hash: 176c3aa3f0db8272ed302e11bdc8048f3861e47debb07e896d06072338553033

VinayKumawat_0-1714186058304.pngVinayKumawat_1-1714186150646.png

 

1,864

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.




--------------
See all my blogs and connect with me on Twitter / LinkedIn

VinayKumawat
Product and Topic Expert
Product and Topic Expert
0 Kudos
1,773

Thanks for suggestion @Dan_Wroblewski , the "String to hash" field is bound to app variable. see screenshot below:

VinayKumawat_0-1714380230287.png
I tried API output from data tab:
Hash: 

188feefb589c5788f3e077bbbe7fee2d5548ebf9f3eebded004f4a297e731c33

Screenshot from Data tab:
VinayKumawat_1-1714380421630.png

 

1,626

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




--------------
See all my blogs and connect with me on Twitter / LinkedIn

VinayKumawat
Product and Topic Expert
Product and Topic Expert
0 Kudos
1,607

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

VinayKumawat_0-1714458291202.png

 

0 Kudos
1,602

Please see what I am doing wrong. 

sabaameer13_0-1714458687431.pngsabaameer13_1-1714458712242.png

 

0 Kudos
1,579

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_0-1714461849611.png

 




--------------
See all my blogs and connect with me on Twitter / LinkedIn

1,583

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




--------------
See all my blogs and connect with me on Twitter / LinkedIn

1,571

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

0479ab4b0f029883da1d479f6315b971351d0fe95582d91b110fafe9941e4519

VinayKumawat
Product and Topic Expert
Product and Topic Expert
1,555

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
Explorer
0 Kudos
1,844

HOME PAGE

PieterB_0-1714309260019.png

DETAIL PAGE

PieterB_1-1714309260022.png

HASH

411f2d5485f6a371906cc2bf3c63cd3843d79d95b0a9f6404c14705a8214d791

Thanks for this fun challenge

0 Kudos
1,726

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.

0 Kudos
1,680

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):

PieterB_0-1714399656604.png

And also a new hash:

e53d86abbfadc7d899ea5d4c06fd2a5ddf2519ef0e25297f53c4d75510a7e67c

0 Kudos
1,639

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




--------------
See all my blogs and connect with me on Twitter / LinkedIn

1,221

@Dan_Wroblewski I have hashed the string NEW PALETTE

0 Kudos
1,156

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

1,152

e53d86abbfadc7d899ea5d4c06fd2a5ddf2519ef0e25297f53c4d75510a7e67c

0 Kudos
1,146

Works now. Thanks.

anumalasingh
Explorer
1,774

fadc1b6df3beb0f87374ae0532045654b524641dd211b57edbb8b9f67168a40a

anumalasingh_1-1714379476424.png

 

anumalasingh_0-1714379445263.png

 

sureshmusham
Product and Topic Expert
Product and Topic Expert
1,765

e17e94095fa4165b4730fd6319bd27d188aeeddf3e38096c3936a66c086c7623


IMG_8024.png

IMG_8025.png

 

sabaameer13
Explorer
0 Kudos
1,734

71d25487cdf9dd2c4fc28743fd01714e48e655f7af6c35ad52d75c94e4cdd58b

sabaameer13_0-1714389916839.png

sabaameer13_1-1714390258626.png

 

here is my submission

0 Kudos
1,727

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

1,640

Please find my new entries

My Hash # #82c1c06c35237b97c6cd963ac0921f14f70e94e5429e4849c08a19ea8dc9685

sabaameer13_0-1714450297179.pngsabaameer13_1-1714450319858.png