April (Citizen) Developer Challenge – SAP Build Apps: Task 1 - S/4HANA OData

[Dan_Wroblewski]

Always good to brush up on your OData access … I mean, we’re at SAP.

We started the challenge earlier this week with a preliminary task so you can have your SAP Build Apps set up. Now we'll start one challenge a week, on Wednesdays – today's about working with S/4HANA Cloud OData services.

The challenges so far:

• Task 0: Set Up SAP Build Apps
• Task 1: OData (this post)
• Task 2: Formulas 
• Task 3: Theming, Styling and Layout Design
• Task 4: Mobile device capabilities

Getting data from SAP backends is one of the key capabilities of SAP Build Apps, and one of the things you’ll want to make sure is second nature for you. To get SAP backend data into your app, you’ll need to know a few things.

• SAP Accelerator Hub: A set of demo SAP services – e.g., S/4HANA, SuccessFactors, Ariba – you can use for building your apps. 
• Destinations: To access APIs, SAP BTP lets you define connections to backend data in the form of destinations – basically, a set of parameters including URL / authentication info.
• Data Resources: This is an SAP Build Apps object that defines which data – e.g., which service, entity, filtering – we want for our app.
• Data Variables: This is an SAP Build Apps object that actually makes the backend call and sets aside space for the retrieved data.

Within the data variable there is a way to filter, sort, and paginate the data that you retrieve from the backend. For more on these tasks, you can see this blog. 

In this challenge, you will get demo sales order data, filter/sort/paginate the data, and display the data in your app.

👉Your Task

To do this task, you'll need an SAP Build Apps system and to import our skeleton app. To do all this, make sure you've done Task 0.

Part I

• Create a destination to the Sales Order v4 OData service on the SAP Business Accelerator Hub. You will have to create an account on the SAP Business Accelerator Hub, and have access to an API key (free). To do all this, there is a 2-minute video:

IMPORTANT: When you create your destination, the URL should be:

https://sandbox.api.sap.com/s4hanacloud/sap/opu/odata/sap/API_SALES_ORDER_SRV

YOU'LL LIKE THIS: We have given you a file you can import to create the destination in a few seconds. You just have to add your API key.

• In your app project from the last challenge, make a data resource to this destination, and enable the A_SalesOrderItem entity.
• Open the S/4HANA Sales Orders page in the app we gave you, and create a data variable based on the data resource you created.

  IMPORTANT: In the data variable, you MUST implement sorting/filtering/paging  as follows:

  • Only return records where IncoTermsLocation1 = Palo Alto.
  • Sort by the net amount, showing the largest amounts first.
  • Show only the first 10 records.
• Now make the UI by dragging a List Item control onto the canvas, and show the following 2 fields:
  • SalesOrderItemText
  • Net Amount

To make it look nice, I changed the width and height for the list item component, using the Custom setting and setting the width to 90%. I also changed the shape. You can adjust the UI as you like.

• Run the app in the SAP Build Apps preview app or web preview, and navigate to the S/4HANA Sales Orders (use the custom menu at the bottom of the home page).

Take a screenshot, something like this (your values will differ and MUST reflect the filtering above).

 

Take note of the amount for the 10th entry – this is the value you must hash (remember, your values will be different than the one's above). The value should be with 2 decimal places, no commas and no currency sign, something like this: 123.99. 

• Go to the Submit page by clicking the hash icon next to your community ID.
  • Make sure your Community ID is entered properly.
  • Enter the amount for the string to hash. 
  • Click Hash, and now enter the hash and your screenshot as a reply to this thread.

Your entry should look like this:

Part II

Open your app in the mobile preview and tap somewhere on the S/4HANA Sales Order page reveal a 30-second video about an event the SAP Developer Advocates put on around the world (a second tap will hide the video). Type the name of the event in your reply. 

[eshrinivasan]

3b69385764b78f00234b55931ced6844f0ee9fd9f2b332df0950deea9e7a2c69

 

[YogSSohanee]

7f2219831db1b079dd2dfe17d1d47627004961ccc9c789353b7e8ea82b8df75c

Event name - SAP BUILD code jam

[geek]

b5ecf82978fa4978a3577ea5d7bd8440d90323a90fc52dd548db05c96a41d617

[Dan_Wroblewski]

Did you see the video?

[geek]

---

@Dan_Wroblewski wrote:

tap somewhere on the S/4HANA Sales Order page 

---

Can't find it on the list page, clicking on the banner gives, "React Native WebView does not support this platform."

[Dan_Wroblewski]

I used a control that is only available if you run on mobile. I could have easily used a second control in case someone opened on web ... I learned for next year's challenge 🙂

Can you open on the mobile preview app?

[geek]

Works on mobile preview, "SAP Build Code Jam". Thanks.

[geek]

---

@Dan_Wroblewski wrote:

I used a control that is only available if you run on mobile. I could have easily used a second control in case someone opened on web ... I learned for next year's challenge 🙂

Can you open on the mobile preview app?

---

Tapping the Header Text sets a variable "showVideo" to NOT "showVideo" so presumably there's code somewhere responding to the "showVideo" = TRUE.

[geek]

Have replaced the Webview with "Open URL" which works on both preview and mobile.

[Venkat_Vyza]

@Dan_Wroblewski 

I see the video. Also see the logic. 

But where is the source? Where did you provide the link to the video? 

[YogSSohanee]

Hi @Venkat_Vyza The link to the video is provided in webview1 control, and the visibility of this control is managed by the page variable showVideo. 

[Dan_Wroblewski]

All true. The variable is used on the container that contains the webview (webview visibility is True) ... I love working with containers to really precisely control how things are displayed

[Dan_Wroblewski]

Did you want to enter this week's challenge (task 1)? And I don't see that you entered Task 0 either 😯

There is a webview component, and the first property is URL.

[Dan_Wroblewski]

@Venkat_Vyza Your hash is still not correct. Would love to have you submit the correct hash 😸

[beny_illyes_mhp]

e9d55d09753d46f903dc21ec66c301c62ae89b58d62f6b14c5efe7700c961d4e

The event name from the video - SAP Build Code Jam

[beny_illyes_mhp]

I'd just have one question : I wasn't able to fulfill this task until I set the TrustAll property in the Destination Configuration to True. I previously had the "Use default JDK truststore" checkbox set and I wasn't able to fetch the correct data. 

Any ideas on what could I do to be able to complete the exercise without having TrustAll in my destination config?

[Dan_Wroblewski]

Do you mean you added an addition property or somewhere else? When I turn off "Use default JDK truststore" I don't get anything that lets me select TrustAll. 

[beny_illyes_mhp]

Yes, I added the TrustAll property and set it to "true" in order to make the exercise work. 

Otherwise, if I let the default JDK truststore in place, my app won't fetch any data and won't show it in the table view : 

I have multiple users (S and P-type users) on the same account, could it be due to that?

My curiosity is : how to overcome this? For exercise purposes it's ok to set the TrustAll property but in a productive environment it might not be the best approach and it'd be nice to know the exact cause of the issue and how to overcome it.

[Dan_Wroblewski]

I'm not an expert on destinations -- it's a little opaque what's going on there (people are all confused when doing "check connection" and getting error even though the destination is OK). I don't really understand the issue since you are "authenticating" with an API key so your user should have nothing to do with it. 

[beny_illyes_mhp]

I found that people had similar issues : 

https://community.sap.com/t5/technology-q-a/error-executing-action-could-not-fetch-client-credential...

[Vaibhav_Sapra]

I had a word with @eshrinivasan , and my issue is now resolved. I am putting what i was doing wrong here : Destination - 401 Unauthorized - SAP Community

[RameshShrestha]

Hi,

Taking Screenshot is not allowed in the build app preview.

e26f5b1b935afaf5e399a450f1c1350df646b087245e5eb976c9b09ce5f6e596

[encarrero]

SAP Build CodeJam

f4f2fb8144b2e47c5a940fc80edde36d6fcbefce783bb987ba7ccdf9520f4cdc

 

[SMaaLL]

Hello Dan,

7e778659fd7f8f8c03bf6cfe8d567b9e2ecb80904d7f259ad8b0b152e8813315

Name of the event is "SAP BUILD CodeJam"

[Dan_Wroblewski]

Looks good. But the hash does not work. Did you take the 10th item in the list? It is possible the 10th item is off the screen? Look again and let me know if you need help.

[SMaaLL]

I added paging property like this:

10 raws is displayd:

but the hash is same - 7e778659fd7f8f8c03bf6cfe8d567b9e2ecb80904d7f259ad8b0b152e8813315

[Dan_Wroblewski]

You need to hash the number you get in the 10th row. In the screenshot you showed you have "May the Force Be With You". Everytask you hash a different string.

[SMaaLL]

Thanks a lot! it's my inattention

hash - fbfa72aad41fd27a59f507c806ae71e9776048f2e1c39f83e4954573ea99edb9

[SMaaLL]

Hello @Dan_Wroblewski,

hash - fbfa72aad41fd27a59f507c806ae71e9776048f2e1c39f83e4954573ea99edb9

Is it correct hash?

[Alpesa1990]

My submission for task 1,

927b4a90d03c5e375607cbe3a3d385e554a32ebf20343c85d65ee9b96444049f

I see the video in app mobile, and I find the event (showVideo page variable) but I can´t find the mapping to URL, where could I found it?

Thanks!

[AAncos]

1846d98cae355f1bf4e1bc0375b3ff43677a67a41c216545ccef2410f5a58b5d

SAP Build Codejam

 

[PieterB]

Here my answer on a sunny day in BE 😀

3bc3d7b9eb5b9947c6d5a560c24da4513a7796f86a5285facac8e2f2cd6ef4aa

SAP Build Codejam

[FranzE]

973c2376bcb13457808c207e03cfa687c514f19e1b4898c200e438b334d44902

Would love to host a:

SAP Build CodeJam
in Austria 🙂

[Dan_Wroblewski]

We'd love to do so. Can you enter a reply to this post and provide details about company, time, number of people?

https://community.sap.com/t5/sap-codejam-blog-posts/so-you-want-to-host-a-codejam-everything-you-nee...

[stickman_0x00]

f93ea0f25716e2c92257f5af39618ee31055989af3460a0aa59d32bd

SAP Build CodeJam

[Dan_Wroblewski]

Nicely done, but the hash does not seem correct. Can you check? Make sure you enter the number exactly as described in the assignment, without spaces.

[stickman_0x00]

Lets hope now is good 😛
d84863d2f93ea0f25716e2c92257f5af39618ee31055989af3460a0aa59d32bd

[brodierose]

0009ba1bbe60e3f90698349038ebd353bdf5c130fe97a3ee02385f5a1bbff9e8
SAP Build CodeJam

[SantoshC]

Hi  Dan_Wroblewski

O a, facing with Task1. Could you please review my steps and guide if I am missing any step . I am able to add my Data Variables from API and set Filter, Sort and Paging. But in UI Canvas I drag and dropped List Item and tried to bind the data source but some how I get warning if I choose it from Data Variable but I change properties to Repeated and choose from current I am able to select Item Text and Net Amount but Data is not rendered in output. Attaching screen shots for your reference.