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. 

[Dan_Wroblewski]

• From UI point of view, I would suggest putting the list view in Container 1 (first container) after all the other stuff we put there.
• Where is the warning you talk about? Can you show screenshot?
• DEBUGGING: When something like this happens to me, I try to isolate the problem:
  • Am I getting data at all? Put an alert in the logic for your data variable to see if you get back anything.
  • If you do, then I would set the repeat using the data variable and see if I get multiple instances of the list view.
  • If so, I would bind some repeated data. Remember, a common error is to bind the data variable to the specific UI properties instead of the data item in repeat

[SantoshC]

Thanks @Dan_Wroblewski  on your response it helped in correcting binding data variable to UI properties data Item repeated I changed the formula to current. Fieldname from my entity.

I was getting error for video play " React Native WebView does not support this platform" but based on web view control and source . Video is about "SAP Build Code JAM"

2e152c6bc055dd88f5aa00d13850066fc0e0f5941be0bd5ae2b7335f4b93953a

[Dan_Wroblewski]

Yes, I used a control for the video that only works on web. You can use the open URL flow function but that opens in a separate window, which I didn't want.

The hash is still not right and I can see that did not use your community ID, the one at the top left of your reply.

[SantoshC]

HI @Dan_Wroblewski 

63c4e69c8ca45151d5bdf527aa012302e179502ae58c2313ea2662ee7dc905f0

[Dan_Wroblewski]

Your community ID is SantoshC

[SantoshC]

Hi @Dan_Wroblewski 

4c836f9ab225b80f35ccb7fdaf4f572643bfeeec41f2f6e900fdb25959e547c6

[mwn]

f42f7bf0da1b8075f12d33080066f949c3905d8e8b6dcbdedd18a922111d9888

[TMSingh_SAP]

@Dan_Wroblewski 

 SAP BUILD code jam

44bfe1c72b7b42521d5b8e095438ce621966c3fafd42787b442ea939e1aa8e46

[Leon42]

2b7797c4dd515ee1b0b60d9bd16dd2ad95d79e5b994edc7227820ad9a88d4f5c

Event name - SAP BUILD code jam

[M-K]

My Hash: d0406d732ebbae415f65f81ff54ec2919120c421964b418752a935efb17f62e8

The Event: SAP Build CodeJam -> Thanks again for the one in Herne 👍

[Dan_Wroblewski]

Our pleasure 😸

[René]

9775ef5f8c6b48a965d94da51f5ab951516bae81618441c88aca2cc05260bc44

SAP Build Codejam

[KarpagavalliK]

Event Name - SAP BUILD Code Jam

Hash - 27f27ba7d5350591829a27c6840ad1c0d29267bfa885f28c19991445c94e81a9

[Dan_Wroblewski]

Nice screenshot ... unfortunately the hash is not correct. I can see that you entered your full name but you need to enter your community ID, which appears at the top left of any post you make. Can you try again?

[ajmaradiaga]

Here is my submission for task 1. Looking forward to task 2!

22037f922a871776fe82d91864290e361c9598bb64a6295b65d50a3319a1d78b

Part II

The name of the event is SAP Build CodeJam!

[tobiasz_h]

Hello,

22e5c05ac3d808c72c7d7bfee03c82dc46abc025538e36f14af0ccaaa2b7ecb4

Event name - SAP Build CodeJam

[Iren]

bac98d16d7369a144418557af373fc9292312145cb509cae4272a6e1a3ce24b9

[Dan_Wroblewski]

Unfortunately, the hash is not correct. The likely issue is the values should be displayed with 2 decimal places. Please just update your post or add another reply.

[Iren]

Thank you very much for your reply. As I am a very beginner with SAP Build Apps, I am having trouble getting the numbers displayed correctly. How do I make it so that the values are displayed with 2 numbers after the decimal point? Could you direct where I could find the answer? Thank you in advance!

[Dan_Wroblewski]

Well, if you wanted to format a number, you would use the FORMAT_LOCALIZED_DECIMAL function: https://help.sap.com/docs/build-apps/references/format-localized-decimal?locale=en-US&q=reference

But ...

The data from the service should come back already formatted, for example, here is part of the JSON you get back when you make the API call:

"NetAmount":"1924500.00"

I'm not sure why you and some others show the values without decimals, since as you can see above the value is returned from the service as a string. 

[Iren]

Hello @Dan_Wroblewski , I think that correct hash will be
6714aba6c73023dbb0729d971d806b487d2c81e87a7f0dd793239a8c4b4a8ca0

I have no idea why a number without two zeros after the decimal point is displayed, as I am not editing the data I received from the API in any way.

[mwn]

Hi Daniel

A couple of questions if I may.

Is there an easy way to go back to the main app page when you have navigated to another page in the SAP Build Apps viewer app? 

Also, is it possible to set US10 as the default logon tenant, instead of remembering to set this each time?

Thanks

[RAHUL1221]

1. For navigating back probably we can just add a button to the current page and add previous page in the logic flow.

2. I don't think its possible to set US10 as default logon as of now but let's wait for Daniel.

[mwn]

Thanks, Rahul.

I found that the Navigation setting in the builder allowed me to enable a navigation menu, so I could add an option for the Home page.

[Dan_Wroblewski]

@RAHUL1221 is correct. It would be nice to be able to store a setting for your landscape, but alas, not. I'm not part of development but I can provide them with your feedback.

[Jonathan_Fr]

f431594f24d736826fe3386477effe2ba33695fba50ca5ca234be02e4659d1ec

[RAHUL1221]

_________________________________________________________________________________
Part 1.

983737004fd5b2fdb263f68c3870f3e37c828f9c569ed3155b7e0a65c128225f


____________________________________________________________________________________
PART  2 - Event name - SAP BUILD CODE JAM
____________________________________________________________________________________

[Dan_Wroblewski]

Unfortunately, the hash is not correct. I can see that the list does not contain the proper list ... you can see on other submissions the correct list. Double check that you are filtering and sorting properly. Let me know if you need any help.

[RAHUL1221]

Hey Dan,
By mistake i went till page 10. Correcting the hash again.
Only thing i am not getting the decimal places still and its showing data without decimal places is there any additional formula to be used.

______________________________________________________________________
PART 1 - 
314e7e41ac8d38d0029b22f0c21026acfc714741475478d3498f75fb8a148fe4



____________________________________________________________________________
PART 2 - EVENT NAME - SAP BUILD CODE JAM.

____________________________________________________________________________

[Dan_Wroblewski]

Not sure why you do not see decimal places. Can you use a formula with format function to format to 2 decimal places? Either way, you can enter the value for the hash with an extra ".00" so you get he correct hash.

[RAHUL1221]

Hey Dan,
I already Attached the correct hash along with considering .00 . Since it wasn't directly showing. also noticed few people also having same issue.
Please do let me know if its correct.

Thanks,
RAHUL1221

[Dan_Wroblewski]

What number are you hashing?

[RAHUL1221]

Hey Dan,
I am hashing 747252.00 
And adding the hash after correcting again pls do let me know if its correct.

Hash - c14a5abca0dc5253c3a3d570e0fbe2a7f375fd7592d1d668b588b89edc8d6653

[eshrinivasan]

Seems to work now.

[RAHUL1221]

ok great thank you.👍

[Anumala]

3ccbb4b6c2b4c0424cd9c7f3693d3b53b7f7ad43a25c934049d00f09cee52fbb

Video is from SAP Build CodeJam

[Dan_Wroblewski]

Good screenshot. 

Unfortunately, the hash is not correct. I can see that you did not enter you community ID to do the hash. Your community ID is what is shown at the top left of your post: Anumala

Also you will have to hash the amount using 2 decimal places.

[VinayKumawat]

 1. hash: bbfffe06c588db7eade7ae1cc6330489ef2b930b92155b16d6457ee929caf5e1                   

2. The event in video is : SAP Build CodeJam

[nex]

cd0eea4b87081f5e99511abe4e5957ea3da6d65eb189a10b4e5da8dccdc6c30e

 Event is SAP Build CodeJam

[Nagarajan-K]

d357086ec1af433204195280a416621606642dbee5c71520f463240079e22e9a