SAP Developer Challenge - Full-Stack - Integration...

dinah · ‎2023 Sep 27

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

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

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.

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.

thomas_jung · ‎2023 Sep 27

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)

nex · ‎2023 Sep 27

stickman_0x00 · ‎2023 Sep 28

Hi,

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

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

dinah · ‎2023 Sep 28

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.

stickman_0x00 · ‎2023 Sep 28

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.

stickman_0x00 · ‎2023 Sep 28

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

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

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

SPOILER

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

jens_borau · ‎2023 Sep 28

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?

dinah · ‎2023 Sep 28

Checkout this method

jens_borau · ‎2023 Sep 28

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?

thomas_jung · ‎2023 Sep 28

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.

jens_borau · ‎2023 Sep 28

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 · ‎2023 Sep 28

@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 · ‎2023 Sep 28

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:

Here is the success message:

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 · ‎2023 Sep 28

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?

Best regards,

Mio

dhegde · ‎2023 Sep 29

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 · ‎2023 Sep 29

It worked! Thanks!

dhegde · ‎2023 Sep 29

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