Application Development Discussions
Join the discussions or start your own on all things application development, including tools and APIs, programming models, and keeping your skills sharp.
cancel
Showing results for 
Search instead for 
Did you mean: 

SAP Developer Challenge - Full-Stack - Integration of backend and frontend (Week 4)

dinah
Product and Topic Expert
Product and Topic Expert

Welcome to the final week of this month’s SAP Developer Challenge. Be sure to check out the previous weeks' tasks if you haven’t worked on them yet. 

 

Task description 

This week we focus on shifting the API call to be initiated by the user from the browser. To achieve this, we need to attach a press event to the submit button of the dialog that will pop up when we click the Add Questions button from our previous week’s UI. Below is the process flow of the actions: 

Front-end UI actions flow(3).png

Task outline 

Our goal is to launch a dialog through the Add Questions button click, call the API endpoint through the submit button of the dialog and then display the added questions in the questions section we created last week. Additionally, we would like to display the message response from our API endpoint to the user through a message box. 

 

Steps 

  1. Launch a dialog with an input field for the user to provide the questions count when the Add Questions button is clicked. The dialog should have a submit and a cancel button.  
  2. When the submit button is clicked, make an API call to the assignQuestionsToTest API endpoint we created in week 2. The dialog should close when the cancel button is clicked. 
  3. Display a message box of the response returned from the API upon call completion. In addition, display the questions added to the test in the Questions section we created last week.

 

Resources 

Dialogs and Fragments 

OData Operations 

OData Context Binding 

 

Task Checklist 

Post a screenshot of your questions count dialog in the reply section. Capture the questions count provided in the input field and the initial state of the Questions section as shown below: 

wk4res1.png

Post a screenshot of the page state after clicking the submit button. If the test had no questions initially, we should see the exact number of questions added according to the input value we provided above. If the test had 1 question initially and we provided 2 as the questions count, we should see 3 questions in total displayed. Feel free to provide additional screenshots based on the different responses that can be returned from our API endpoint.

wk4res2.png

 

Bonus Task 

Through meticulous database modeling, strategic API exposure, and the intuitive power of SAP Fiori Elements, we have created a small full-stack project that can be explored further to implement additional functionality. 

Think of a function you would like to add to this project and add a brief description in your response on how you would go about achieving this. If possible, implement it and attach a screenshot of the feature. 

 

41 REPLIES 41

thomas_jung
Developer Advocate
Developer Advocate

thomas_jung_0-1695820705885.pngthomas_jung_1-1695820717919.png

For my bonus challenge I made the text strings multi-language and added the ability to maintain translations of them in the app. Sharing my solution here: jung-thomas/sap-cap-ui5-challenge-sept-2023-solution (github.com)

 

stickman_0x00
Explorer
0 Kudos

Hi,

I am going for the right direction?
Or should I simply make the bindContext and setParameter in the controller?

stickman_0x00_0-1695884151246.pngstickman_0x00_1-1695884165270.png

I think I am missing something since I only need the test entity and ID  for the request to be correct

stickman_0x00_2-1695884209677.png

 

dinah
Product and Topic Expert
Product and Topic Expert
0 Kudos

Hi,

That is interesting. I haven't tried that approach before. You could try it out and keep us posted if it works. Alternatively, binding the context and setting the parameter in the controller should work.

0 Kudos

I am very new to this, so I am more trying with try and error than with logic. I am still not sure how the binding works.

I had to take the text {title} out of the form or it wouldn't appear because of the binding. That is also another thing it was upsetting me.

Since the title worked out I would expect the part of Test entity would be automatic but not :/. If I find something I will say :).

@thomas_jungsolution was helpful to get the controller going for the Dialog, I am not used to need to declare the controller that way, but this controller is not the normal extension controller I am used too.

Found the solution! Was so easy 🙂 (now that I know xD)

The '/' took me hours of my life :').

stickman_0x00_1-1695930287315.pngstickman_0x00_2-1695930327299.png

I decided to put the {title} on the title, couldn't figure it out how to use inside the form.

SPOILER

stickman_0x00_4-1695930375903.png

stickman_0x00_6-1695930452706.png

Honestly I stole the how to handle the execute from thomas, to many hours invested, needed a shortcut.

jens_borau
Explorer
0 Kudos

My action adds the questions to the test but they are only shown after manually refreshing the page. Is there a trick to get an automatic refresh of the object page after executing the action?

Ok, thanks. But I am a bit confused. I didn't expect having to change the FIORI Elements app, because the action itself works without changing anything in the app. Just the refresh is missing.

@thomas_jung 

I had a look in the github repo of Thomas Jung. There I can find a folder ext with subfolders actions and fragment with an action.js and a UI5 view fragment. 

Has this to be created manually? Is there any wizard for this? Ist this just needed for the refresh after executing the action?

I did use the Guided Development in Fiori Tools to generate the stub there.  I used the "Add a custom action to a page using extensions" option. 

thomas_jung_0-1695923943809.png

 

 

0 Kudos

Ah, ok. I used the page map and used "Add Actions".  I could then select my "assignQuestionsToTest" Action from the CAP service. And everything worked fine except the object page refresh.

But in the page map there is also an option to "Add Custom Action". This seems to make the difference. 

 

Erdaleser
Explorer

Erdaleser_0-1695900533516.png

Erdaleser_1-1695900579065.png

 

@dinah and @thomas_jung , thank you so much for your support and contributions to the 'SAP CAP challenge. The initiative started by @dinah , with even the slightest support from @thomas_jung meant a lot to me. I'll always remember the role you both played in my success. Thanks

I hope this helps!

 

 

dhegde
Participant

Hi, 

here is my solution.  I did not usethe bindContext to trigger the action.  I used the extensionAPI's `invokeAction` to achive that. So, my dialog for parameter looks different:

dhegde_0-1695912899536.png

Here is the success message: 

dhegde_1-1695912941759.png

I also used CDS annotation to add a side effect to refres the Questions facet after the action is executed. Hope this is ok?

Thank you

Dhananjay

MioYasutake
Active Contributor
0 Kudos

Hi Dhananjay

Your approach looks like a good fit to flexible programming model, so I tried using the same approach as you. However, I cannot find a way to change the label for the parameter. Could you share how you changed it?

miyasuta_1-1695934740285.png

Best regards,

Mio

 

Hi Mio

Sure, I added this `@Common.Label` annotaiton in cat-service.cds file where create the action

service DevChallengeService @(path: '/dev-challenge') {  
    @odata.draft.enabled: true 
    entity Tests as projection on fullstack_dev_challenge.Tests
        actions {
            
            @cds.odata.bindingparameter.name : '_it'
            @Common.SideEffects : {
                TargetProperties : ['_it/questions']
            } 
            action assignQuestionsToTest (questionsCount : Integer @Common.Label : 'Questions Count') returns String
        }
    ;
    entity Questions as projection on fullstack_dev_challenge.Questions; 
} 

 Cheers 👍

Dhananjay

MioYasutake
Active Contributor
0 Kudos

It worked! Thanks!

0 Kudos

In fact, for this spcecific use case, we could also expose the action purely using CDS annotations, without having to write any custom code on the Fiori app.  We would have the same pop-up for Parameter etc. 

But, I guess, for the sake or exploring extension coding on the UI, this task expects us to have custom action.

Here is the repo - https://github.com/dhananjayhegde/CAPDevChallengeSep2023Node

arief_nkn
Explorer

andrew_mak
Explorer

Hi Dinah, my submission for week 4.
Week-4-SAP_CAP_Challenge-1.png

 

Week-4-SAP_CAP_Challenge-2.png

 

 

karahan_btp
Discoverer

harsh_itaverma
Participant
0 Kudos

Possible Scenarios


Submit button getting enabled only when Input has a value:

harsh_itaverma_0-1696095192025.png

Adding n questions, When n questions are available:

harsh_itaverma_1-1696095255353.pngharsh_itaverma_2-1696095270358.png

Adding n questions, when less than n questions are available:

harsh_itaverma_3-1696095347988.pngharsh_itaverma_4-1696095362735.png

Adding n questions, when 0 questions are available:

harsh_itaverma_6-1696095442330.png

 

Adding 0 questions:

harsh_itaverma_5-1696095401956.png

 

 



Alpesa1990
Explorer

geek
Participant
0 Kudos

geek_0-1696165656672.png

Subsequently:

geek_1-1696165693708.png

Have to plead guilty to borrowing heavily from @thomas_jung but in mitigation I'm an ABAPer by trade.

0 Kudos

Oops, missed the initial screenshot

geek_3-1696165940549.png

 

Ruthiel
Product and Topic Expert
Product and Topic Expert
0 Kudos

Here my last results:

Ruthiel_0-1696239756321.png

Ruthiel_1-1696239768461.png

 

Yauheni_Kalodka
Discoverer

kiryl-haupt
Explorer

tobiasz_h
Active Participant

Ashok459
Participant

Nicolas
Active Contributor

StanislawKubiak
Discoverer

priyankaG
Participant

PriyankaChak
Active Contributor

Bennobear
Discoverer

Aliaksandr_Ch
Product and Topic Expert
Product and Topic Expert
0 Kudos

Hi @dinah  ,

Below are the screens of the different cases:

  1. Screenshot 2023-10-06 at 01.19.02.png
  2. Screenshot 2023-10-06 at 01.19.18.png
  3. Screenshot 2023-10-06 at 01.19.38.png
  4. Screenshot 2023-10-06 at 01.20.34.png

 

MeriemSouissi
Participant
0 Kudos

Hi,

MeriemSouissi_2-1696777837117.png

 

MeriemSouissi_0-1696777818742.pngMeriemSouissi_1-1696777823237.png

I add localization, securedExecution, status of test and questions, messag popover

repo : https://github.com/meriemsouissi/Sap_challenge_09_23.git