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

[Dan_Wroblewski]

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

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. 

[brahammittal]

79e809a5ac6fb135fd0a7cf9b60cbead0a96ece761f446bfa99e1488abe26e39

[anumalasingh]

Part I

3ccbb4b6c2b4c0424cd9c7f3693d3b53b7f7ad43a25c934049d00f09cee52fbb

I know and its already pointed by you that the data displayed does not have two decimal places. Unfortunately, the data that I get from the service has varying decimal places.

For my case 10th record net amount is 747252. But I hashed with '747252.00' instead.

Do I need to use some formula to display with two decimal places in UI?

Part2:

Video is from SAP Build CodeJam

[Vaibhav_Sapra]

Hey, I am facing an issue with Destination, getting 401 unauthorized. Used the API Key from Accelerator Hub still getting 401-Unauthorized. Do you have any idea what i am doing wrong?

[vincenzopar]

hash b81416b00e9adc02a4b1f73178bf2fd2984ee1bdfc6ae69ed1b1568a99bba76f

Want to host your own SAP Build CodeJam?

[Vaibhav_Sapra]

Hello @Dan_Wroblewski ,

I am still struggling with Destination. Used the API Key from Accelerator Hub still getting 401-Unauthorized. Tried using TrustAll as well as suggested by @beny_illyes_mhp 

Can you help here?

[eshrinivasan]

Hi @Vaibhav_Sapra, getting 401 from BTP Cockpit destinations is not an issue(there is green check, so its fine). Please try rest of the instructions as per the post.

[Vaibhav_Sapra]

Thanks for writing in @eshrinivasan . I am not able to fetch data due to this 401. See the screenshot of API response from network tab. Is there something i am missing here?

[eshrinivasan]

Can you recreate the destination from BTP Cockpit -> Destination and try again? 

[Vaibhav_Sapra]

Yeah, even tried that multiple times. Any other way to test my Accelerator Hub Key?

[eshrinivasan]

On this page, there is a "Try Out" tab, you can check the API Key there. If the API Key is correct, you will get a successful response on Clicking the "RUN" button.

https://api.sap.com/api/CE_SALESORDER_0001/resource/Sales_Order_Header

[Vaibhav_Sapra]

Works perfectly fine on API Hub. But throws 401 in the BUILD

[SubaR]

hash- 4831fd9740b9d5064f2fb3e84000b346ac96b544ea379747a675e99df44ae70d

event - SAP Build CodeJam

Is there a way to allow screenshots in the Android version of the app?🤔

[Vaibhav_Sapra]

I am facing an issue with Destination, getting 401 unauthorized. Used the API Key from Accelerator Hub still getting 401-Unauthorized. Do you have any idea what i am doing wrong?

[Ruthiel]

Hello @Dan_Wroblewski !

My hash: 6a8e6509b7fa2a2419f4a9e1d0a117735304c05997c17d2b736a9e75f1eea116

[ayushpattnaik]

Hello everyone

hash : 5cdbfc61844dec121ed36e1b31de4d51fae4cdce1905780c4a6e3fafad794b53

event : SAP Build CodeJam

[eshrinivasan]

Hi, Unfortunately, the hash seems to be incorrect. The community ID shown in the screenshot does not seem right.

[emiliocampo]

2201322b2e56bec97ecba7daa729a4198b6288c964c7f38d86ba09fea7106552

SAP Build CodeJam

[Vaibhav_Sapra]

Hello @Dan_Wroblewski 

Here is the Hash for Task 2: 533d47db39115e5959574eb4791632b45d8b9cac3d19d0a512373a5d548d20b2

And the screenshot as well:

Video is from SAP Build Code Jam

[eshrinivasan]

Unfortunately, the hash seems incorrect, Could it be the space before the answer?

[Vaibhav_Sapra]

Yes, thanks for pointing out the space. 

Here is the Hash: 78f4943b874504a536b1e7e5f7b26aef96f2982b865a8b2307dd4fabe0b038f9

[GopalakrishnanS]

c913f5082d001bd2eb1ede2690ffceebd393fe4e5739efa53594b96bcd3e174d

[rubin_luke3]

Hi,

My hash is 18d8b8dcfdeaa50efc940a897c8d2fa073084eb95f16b106b3f21e21745cb324

Event name - SAP BUILD code jam

[avinash12]

Task 1 - 

Community ID - avinash12

[Dan_Wroblewski]

1) You must hash the amount in the 10th entry.

2) It looks like your filtering and sorting is not the same as requested. I will copy the relevant instructions below.

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.

[sureshmusham]

62a92fbe740a859d313655b92b12e45b6cbe56e5c21d95ca1bc74ac16d7a0a68

 

the videos was about SAP Build CodeJam

[jawahar_bosch]

Hello @Dan_Wroblewski  -

here is my Hash - 3b440883c71fb0423d94669a50d8676e828776508c0dbd715448f72eab4f2f06

[rajukammella]

64051d507f46180b9c89c5049a897a29ca661d74c1eecba36fc011d4bc8fa77c

[Dan_Wroblewski]

The screenshot looks nice and I'm glad you were able to get the data returned. Unfortunately, the hash does not look correct. I can see that the returned data is not correct -- see the next few replies and their screenshots to get a sense of what the returned data should look like. Make sure you are filtering and sorting as in the instructions

[narendran_nv]

Here's my hash: 42534ac9eb7ca5d62c51791fa617770e009092fed87f4bb3c881d04c03221e44

[sabaameer13]

4e68531eaed97de3d9f9ccb0e0aaee9e6c8cca44b633ab519aff6a675e521bc8

[Dan_Wroblewski]

Hash doesn't look OK ... are you sure you have everything set up on the hashing page? Do you want to show screen shot of the hashing page after you hash?