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

JJAIMES
Participant
0 Kudos

Hi Dinah,

My final result took me some hours to understand many new concepts in comparason with clasical development. 

Main screens

Questions quantity input using dialogQuestions quantity input using dialogScreen 02Screen 02

 

Adititional Screens

1-Zero-question validation1-Zero-question validation2-Zero-question validation2-Zero-question validation

Technical question

It took me some hours understand why the null 'value' doesn't work appropriately. For example,

1when the environment starts (in present because I don't know the answer yet) from zero the entity Questions has null values:

null value initiallynull value initially

2in the first attempt, when I tried to assing a question to a test, I got this message from the aplication

aplications answeraplications answer

3The JS code is this ---->JS logic using null 'value'JS logic using null 'value'
4I had to do an extra step to work correctly and it was because I created a logic to replace the null value with ""The 'value' null was replace with ""The 'value' null was replace with ""
5After this, everything was ok and I got the expected resultsexpected resultsexpected results
?What right alternative could I use in the JS code ilustred (step 3) to avoid doing the extra step? Why doesn't the condition where({test_ID: ""} || {test_ID: null}) work? 

 

Additional no-technical question

I am wondering about fees (qualitatively speaking). Let me explain, if a final customer has bought S/4H package, is this solution within it or {he|she} has to buy something addtional thing.

 

FINAL COMMENTS

The weekly exercises were really beneficial to better understand SAP CAP. Thanks for this space to talk with you and your team.

Thanks!

onFlow
Explorer
0 Kudos

wee4_odata_binding1.pngwee4_odata_binding2.png

Bonus feature: additional Table listing unassigned Questions. I added a view to catservice.cds:

@odata.draft.enabled: false

@readonly: true
view VUnassigned as
select from Questions
where
test.ID is null;

Page Map did the rest 🙂

wee4_odata_binding3_unassigned.png