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 - Front-end Development with SAP Fiori Elements (Week 3)

dinah
Product and Topic Expert
Product and Topic Expert

Good job so far! Welcome to the third week of this month’s SAP Developer Challenge. If you have not yet read the initial blog post, please do so and complete the first week’s task and the second week’s task as we will need them. 

Task description 

This week we will move from the back-end side and get started with the front-end. We will focus on displaying the tests data from our models to the browser. To achieve that, we need to implement a user interface. Below is the flow that we desire to implement on the user interface: 

Front-end UI actions flow(2).png

Task Outline 

Our goal is to implement the Tests List page which displays all tests available in our model and Test Object page which displays the test details of a specific test when the row item is clicked from the Tests List page. We will leverage the SAP Fiori Elements template to generate the UI then we will add our custom elements to the generated UI as need arises.  

 

Steps 

  1. Follow the steps outlined in the tutorial: Generating a user interface from the Steps headline (cover only number 1). Remember to replace the tutorial project name, entity and descriptions with our current project details as shown below as you work through the steps. 

screen1.png

screen2.png

screen3.png

The following files should be visible on the project once finished: 

 ui dir struct.png

Running cds watch should update the browser details to display as follows: 

new prev.png

   2. Clicking the web application URL at this point will not display any test records as we have not yet worked on the logic to display the data. This can be achieved by adding OData annotations in the project. In the annotations.cds file of the app directory, add annotations to enable display of the test records. Copy the starter code below and paste it into the app/fullstack-dev-challenge/annotations.cds file. Complete the remaining three fields to be displayed on the table (that is, Description, Created By, and Created At). 

 

using DevChallengeService as service from '../../srv/cat-service'; 

annotate service.Tests with @(UI.LineItem: [ 
    { 
        $Type: 'UI.DataField', 
        Label: 'Title', 
        Value: title, 
    }, 
]); 

annotate service.Tests with @( 
    UI.FieldGroup #TestDetails: { 
        $Type: 'UI.FieldGroupType', 
        Data : [ 
            { 
                $Type: 'UI.DataField', 
                Label: 'Title', 
                Value: title, 
            }, 
        ], 
    }, 

    UI.Facets: [{ 
        $Type : 'UI.ReferenceFacet', 
        ID    : 'TestDetailsFacet', 
        Label : 'Test Details', 
        Target: '@UI.FieldGroup#TestDetails', 
    }, ] 
); 

 

Resources: 

Adding SAP Fiori Annotations 

Defining Line Items 

Grouping of fields 

SAP Fiori Elements Feature Map 

Adapting the object page header title and description 

Launching guided development 

 

Task Checklist – post screenshots in the reply section 

  1. Successful addition of annotations should display your initial test records when the go button is clicked. 

All tests.png

  2. Clicking on a specific row should display the test details as below: 

w3res2.png 

Task 2 

Use guided development to customize the above page (test details UI) to appear as in the screenshot below. To begin, open the Command Palette using CMD/CTRL + Shift + P and type: Guided Development. Select Fiori: Open Guided Development. 

Hint: we want to add a new section named Questions and a custom action named Add Questions to our Object Page. 

wk3res3.png

Task Checklist 

Post a screenshot of your enhanced UI in the reply section. 

39 REPLIES 39

SandipAgarwalla
Active Contributor

I used 'CSV generator' to generate some test data for these Data models. Hence the names are ambiguous. 

choujiacheng
Explorer

choujiacheng_0-1695376495079.png

choujiacheng_1-1695376515318.png

I was able to solve this through the application development GUI screen. Helped immensely for this section.

stickman_0x00
Explorer

stickman_0x00_0-1695288736645.png

stickman_0x00_1-1695288753927.png

I suppose I did it correctly since I would have the same result if I deleted the questions entries from csv

nex
Explorer

dhegde
Participant

List Report page

dhegde_0-1695348943622.png

Test Object Page

dhegde_1-1695348983316.png

@dinah 

Thanks for challenge.  Compared to week 2, this was relatively very easy 🙂 But interesting.  I faced some issues with respect to Yeoman generators.  I had to downgrae the "Application Wizard" extension to 1.11.0 version to make it work. 

I have one question: Any specific reason why we are adding the annotations on the app using local annotations instead of adding them on the backend part/CAP application?  

As far as I know, in case of RAP applications, they recommend to add UI annotations also in the CDS Meta Data Extensions and keep usage of local annotainos to minimum.

Thank you

Dhananjay

agnissh
Product and Topic Expert
Product and Topic Expert

Michaelis
Explorer

Michaelis_0-1695649200253.png

Michaelis_1-1695649245149.pngMichaelis_2-1695649299271.png

The questions were attached to the test only after having pressed on "Add Question" and then refreshed the page. The service "assignQuestionsToTest" from challenge 2 was used.

andrew_mak
Explorer

Hi Dinah, my submission for week 3.
Thanks!
Week-3-SAP_CAP_Challenge-LR-page.png

 

Week-3-SAP_CAP_Challenge-OP.png

 

 

geek
Explorer

geek_0-1695979948409.png

geek_1-1695980018665.png

With apologies for my lack of imagination in populating data.

alessandraarm
Explorer
0 Kudos

Hello!

My submission for week 3: 

alessandraarm_0-1696017078457.png

alessandraarm_1-1696017307145.png

 

Ruthiel
Product and Topic Expert
Product and Topic Expert

MarcelloUrbani
Active Contributor

Ashok459
Participant

priyankaG
Participant

ziyangwong238
Discoverer

Aliaksandr_Ch
Product and Topic Expert
Product and Topic Expert

JJAIMES
Participant
0 Kudos

Hi,

Thanks for the challenge!

Screen 1 - MainScreen 1 - MainScree 2 - DetailsScree 2 - Details

🤓

ajos
Explorer