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: 

SAP Build Challenge – Week 4 – OData Services

Dan_Wroblewski
Developer Advocate
Developer Advocate

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

dan_wroblewski_0-1680162815071.png

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.

2023-03-26_07-44-23.jpg

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.

2023-03-22_14-20-29.jpg

To learn more, see:

 

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.

 2023-03-30_22-38-59.jpg

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

2023-03-26_07-36-52.jpg

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.

2023-03-22_14-37-23.jpg

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




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

SandipAgarwalla
Active Contributor

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

3rd Page

p057784_1-1682350567314.png

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

Regards

 

   

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




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

aaruljothi
Participant

H Dan,

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

Below is my output:

aaruljothi_0-1682362677467.png

 

Appreciate your efforts

Thanks and Regards,

Aruljothi Arumugam

 

 

 

 

Sorry it was slightly delayed ... was traveling 😺 

Glad you participated.




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

abdullahgunes
Participant

Hello,

Here is my fourth contribution.

Thanks for this week's challenge!!

Movie : Wanted 🤠

 

week4.png

You mean like in this scene? 😺




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

ADR
Participant

Hi Dan,

Here is my submission for week 4 challenge. 

anupamduttaroy_0-1682367285964.png

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
Developer Advocate
Developer Advocate

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




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

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

Farid
Active Participant

Hello,

Here is my attempt :

pinacolada.jpg

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.

 

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




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

induthiru
Participant

Hello Dan,

Please find the screenshot below.

Screenshot_20230424-225549 (1).png

 

 

 

 

 

 

 

 

 

I think the song is from the movie Shrek.

Regards,
Indu

Bharathi_S
Explorer

Hi @Dan_Wroblewski ,

Thanks for this week's challenge!

Here is my output,

build-sb1.preview.eu10.apps.build.cloud.sap_11177_challenge-odata_page.Page1(iPhone 12 Pro).png

Thanks for participating 😺




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

vinay050
Participant

Hi @Dan_Wroblewski 

Following is my Week4 Challenge output

vinay050_0-1682415855608.png

 

 

Regards

Vinay

sainithesh21
Active Participant

Hi Dan,

Here is my submission for Week 4

sainithesh_0-1682425543464.png

 

Regards,

Sai Nithesh Gajula

Nice work 😺




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

javiermartin02
Product and Topic Expert
Product and Topic Expert

Thank you @Dan_Wroblewski 

My output and optional tasks:

Captura de pantalla 2023-04-25 a las 14.46.04.png

javiermartin02_0-1682426754391.gif

Regards,

Javier

rajkumar
Explorer

Here's my screenshot.

rajkumar_0-1682445713952.png

 

 

Thanks for joining the challenge 😺




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

MioYasuatke
Active Contributor

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

miyasuta_0-1682455038627.png

 

JJAIMES
Participant

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: OwnerPage 3 - Contact Title: Owner

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

Thanks!

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 😺




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

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:

04_03_firstPage.png

SECOND PAGE:

04_04_secondPage.png

 

 

 

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)

04_01_Data_Variables.png

 

 

 

 

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.

04_05_secondPage.png

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.

04_08_CountryFormula.jpg

04_07_secondPage.png

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

 

04_08_VenezuelaPNG.png

04_08_VenezuelaPNG_02.pngMaybe 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

 

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? 




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

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
Explorer

Hello Dan,

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

Challenge 3.PNG

rudavi
Explorer

Hi dan, thank you for this interesting challenge.

Below my screenshot 

0FF9A005-8E03-46C1-AA98-135C1C15794C.png
Regards
Dav

enzoleon
Explorer

Hello again Dan!

Easy challenge for me this time. Thank you.

FotoChallenge.jpg

Bonus:

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

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

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




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

WannL_Tan
Explorer

Great challenge!

WannL_Tan_0-1682655549000.png

 

ec1
Active Participant

week4Submission.jpg

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

 

Dan_Wroblewski
Developer Advocate
Developer Advocate

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

Nice work 😺




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

GRABLERE
Product and Topic Expert
Product and Topic Expert

Hi Dan,

challenge keeps getting better:)

GRABLERE_0-1682719760499.png

Cheers,

Emanuel

Thanks for being part of it 😺




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

PatrikMajer
Explorer

Hi Dan, 

thanks for another great challenge. 

PatrikMajer_0-1682772320530.png

Patrik M.

Thanks for participating 😸




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

Ranjith_Kumar
Explorer

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.

Ranjith_Kumar_1-1682845321171.png

 

page 3 screenshot.

   

Ranjith_Kumar_2-1682845381450.png

Thanks and Regards,

Ranjith kumar M

 

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




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