SAP Build Challenge – Week 4 – OData Services

[Dan_Wroblewski]

This post is part of the SAP Build Community Challenge (April 2023)

We're going back to SAP Build Apps for this week's challenge.

Probably the most important thing you will do with one of your SAP Build app is to access SAP data, like in S/4HANA or SuccessFactors backends. And you will generally do this using an OData service. So we want to challenge you to use some of the OData features in the tool – for paging, filtering and sorting the data from OData calls.

In the challenge, you will start with an app we will give you, which fetches data from Northwind, and you will have to use the OData settings to bring back a specific subset of the data.

 

Eventing

As a bonus, you will also learn about SAP Build Apps eventing, since the project we give you has eventing for retrieving the data.

Since we wanted the fetching of data to occur for a variety of events, we created our own event called GetData on the page’s logic canvas, and tied the fetching to that event. Then, the event could be called from any other logic canvas.

To learn more, see:

• Trigger Event Logic
• My first steps with BTP destinations (S/4HANA) in AppGyver

 

Setup

1. Download the skeleton project called Challenge - OData.zip.gpg.
2. Create a new SAP Build Apps project.
3. Import the downloaded project by selecting History > Replace in the top-right corner, and then selecting the downloaded project.

 

Out of the box if you run the app it will look like this:

The Previous and Next buttons will not work. You will have to implement them.

We have already given you a page variable page (Number) to keep track of the current page, and a data variable Customer1 to hold the data fetched from Northwind.

 

Challenge

1. Implement the following (note that the Get record collection flow function on which you should implement these is located on the logic canvas for the page, found by selecting Page Layout from the Component Tree (lower right corner). 

   Paging	Show only 5 products per page. Set your page based on the page variable. (Optional) Set up formulas to prevent the current page from going below 1 and above the number of pages there are. (Optional) Enable/Disable the buttons based on whether there is a previous/next page.
   Filtering	Only show customers where ContactTitle is Owner.
   Sorting	Sort the records by the country and show the countries in ascending order.
   Header	Change the header to your name (Page name property of the page)

2. Add logic to the Previous and Next buttons to:
   • Increment/decrement the page variable.
   • Call the GetData event to retrieve the data.
3. When you are done, run the app, and go to Page 3, and take a screenshot. Post your screenshot.

It should look something like this (with your name, of course), but the records will be different. To accomplish the challenge, the correct records must be shown.

Good luck!

And feel free to Kudo this post and all the challenges.

Bonus Question

Add in your post the name of the animated movie in which the song "Escape" (often known as the Pina Colada song) is played, and describe in 1 sentence the scene in which it appears.

Add the movie and scene description to your entry, and then go enjoy a Pina Colada (or your favorite drink). 

[SandipAgarwalla]

Thanks for another interesting challenge. This is done including disabling of the buttons

3rd Page

The logic for disabling the buttons is dynamic, based on total count. 

Regards

[Dan_Wroblewski]

The challenge only asks for Page 3 … please post that one

[aaruljothi]

H Dan,

Another good learning !! I was waiting from yesterday night for the 4th challenge.

Below is my output:

Appreciate your efforts

Thanks and Regards,

Aruljothi Arumugam

[Dan_Wroblewski]

Sorry it was slightly delayed ... was traveling 😺 

Glad you participated.

[abdullahgunes]

Hello,

Here is my fourth contribution.

Thanks for this week's challenge!!

Movie : Wanted 🤠

[Dan_Wroblewski]

You mean like in this scene? 😺

[ADR]

Hi Dan,

Here is my submission for week 4 challenge. 

I am able to disable the Previous button. But to disable the Next button, I need to find another way as 'Get record collection' is not returning the count of the records from the OData call.

The Pina Colada song is from Guardians of the Galaxy where Star-lord plays it from his cassette player multiple times as I remember. 

Regards,

Anupam

[Dan_Wroblewski]

You mean in such scenes as these ... nice!!

[ADR]

I think the same song was played again when he had some fight with Gamora. 

[Farid]

Hello,

Here is my attempt :

As for the movie, i believe it to be ''Shrek'', the song plays whenLord Farquaad picks Princess Fiona from the Magic Mirror's dating game as part of his plan to marry her and become king.

[Dan_Wroblewski]

I won't say either way, but Lord Farquaad is voiced by John Lithgow, a great actor and Harvard Class of 1967.

[induthiru]

Hello Dan,

Please find the screenshot below.

I think the song is from the movie Shrek.

Regards,
Indu

[Bharathi_S]

Hi @Dan_Wroblewski ,

Thanks for this week's challenge!

Here is my output,

[Dan_Wroblewski]

Thanks for participating 😺

[vinay050]

Hi @Dan_Wroblewski 

Following is my Week4 Challenge output

Regards

Vinay

[SaiNithesh_Gajula]

Hi Dan,

Here is my submission for Week 4

Regards,

Sai Nithesh Gajula

[Dan_Wroblewski]

Nice work 😺

[javiermartin02]

Thank you @Dan_Wroblewski 

My output and optional tasks:

 

Regards,

Javier

[rajkumar]

Here's my screenshot.

[Dan_Wroblewski]

Thanks for joining the challenge 😺

[MioYasutake]

My submission for week 4. I enjoyed this challenge as always.

[JJAIMES]

Hi @Dan_Wroblewski ,

I've added some aditional features to this App and I've obtained a weird behaviour you can see in the last seconds of the video. It is related to display one record in another screen. The first attemp didn´t display any value but in the second attemp everything was ok. i got this system behaviour many times. 

Could be related to be querying to the OData service frequently? 

Is there any way to extrtact a data subset from the current registers which are being displaying (i.e. Country) and fill a Dropdown list with the aim to filter for the value I could select?

I will appreciate your comments.

PAGE 3

Page 3 - Contact Title: Owner

VIDEO URL: https://youtu.be/KYF9soIhV-g

Thanks!

[Dan_Wroblewski]

I'd have to see the entire logic flow. I see that you briefly get the data and it then disappears ... there must be some setting of the page parameter and a another retrieval of data that resets the data variable. Anyway, if you want to share the project I could check.

Thanks for participating 😺

[JJAIMES]

Hi @Dan_Wroblewski, 

I've done some changes and the display data is shown correctl. 

I think the issue was because I had a same logic implemented twice. The first one is a logic within Data Variable I've created in the 2nd page. And last one, was a logic associted to the TAP Event (on each list row) in the first page. I've deleted the Tap Event logic within 1rst page.

FIRST PAGE:

SECOND PAGE:

The only reason why the system is displaying this message content is because of the Page mounted event is triggered first and after that is triggered the logic within Data variable you can see next

LOGIC WITHIN DATA VARIBLES (2nd page)

CURRENT ISSUE

On the 2nd page is shown the Country field. I've saved the flag countries are displayed on the first page when ContactTitle = 'Owner'in local storage.

The aim is to display the flag on the 2nd page when is tapped one register. For this, I've created a formula "ag-asset://" + data.CustomerDetail.Country + ".png" to take the Country name register in the field CustomerDetail.Country adding the .png extension but nothing is displayed.

i've done a test using only one country flag, Venezuela flag, and of course it works but I don't understand why the name of file Venezuela.png is changed to this value: ag-asset://1d49d5bc-3ddf-4858-8d87-386250f868cc

Maybe I have to use a conversion function to changethe name of the file Venezuela.png to the code ID ag-asset://1d49d5bc-3ddf-4858-8d87-386250f868cc  ? URL: https://youtu.be/oRi710LRu8A

[Dan_Wroblewski]

You could of course save the GUID for each country and get the correct GUID for the current country.

@merituulimelkko Can you explain what is going on and suggest the proper solution? 

[merituulimelkko]

So first of all it's natural at page mounted for the data to be empty as the data variable is gotten only after page mount. So any logic run should only be after the data variable is checked, either via looping and checking if the data variable is not empty anymore, or on the data canvas.

As for the image display, the ag-asset:// type of url is only for images uploaded to Build Apps. Ideally you should have the url of the image displayed in the data itself instead of needing to generate it, and I don't know how you would be able to come up with the url on the fly if you don't have it saved.

[rsraj]

Hello Dan,

Here's my fourth week challenge submission. It's great to learn from this challenge series. Thank you!

[rudavi]

Hi dan, thank you for this interesting challenge.

Below my screenshot 

Regards
Dav

[enzoleon]

Hello again Dan!

Easy challenge for me this time. Thank you.

Bonus:

Lord Farquad, you have chosen... Princess Fiona.

https://www.youtube.com/watch?v=H28TWyDJJ6I

[Dan_Wroblewski]

Princess ... Fiona ... she's perfect!

[WannL_Tan]

Great challenge!

[ec1]

The movie is Shrek. The Lord Farquaad has chosen Princess Fiona to be his queen.

[Dan_Wroblewski]

Of course, Lord Farquaad is not a king, yet!

Nice work 😺

[GRABLERE]

Hi Dan,

challenge keeps getting better:)

Cheers,

Emanuel

[Dan_Wroblewski]

Thanks for being part of it 😺

[PatrikMajer]

Hi Dan, 

thanks for another great challenge. 

Patrik M.

[Dan_Wroblewski]

Thanks for participating 😸

[Ranjith_Kumar]

hi Dan,

The challenge was quite interesting.

i tried and implemented the visibility logic for the previous button when it is in page 1 i made it to visible false.

page 3 screenshot.

Thanks and Regards,

Ranjith kumar M

[Dan_Wroblewski]

Perfect! Thanks for your comments about the challenge and for entering 😺