SAP Developer Challenge - Full-Stack - Front-end D...

dinah · ‎2023 Sep 20

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:

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

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.

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

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

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

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.

Task Checklist

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

kiryl-haupt · ‎2023 Sep 20

Yauheni_Kalodka · ‎2023 Sep 20

SandipAgarwalla · ‎2023 Sep 20

SandipAgarwalla · ‎2023 Sep 20

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

thomas_jung · ‎2023 Sep 20

MioYasutake · ‎2023 Sep 20

choujiacheng · ‎2023 Sep 21

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

stickman_0x00 · ‎2023 Sep 21

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

jens_borau · ‎2023 Sep 21

JérémyChabert · ‎2023 Sep 21

nex · ‎2023 Sep 21

dhegde · ‎2023 Sep 22

List Report page

Test Object Page

@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

Trulov · ‎2023 Sep 22

Nicolas · ‎2023 Sep 22

agnissh · ‎2023 Sep 23

PriyankaChak · ‎2023 Sep 24

MeriemSouissi · ‎2023 Sep 24

Alpesa1990 · ‎2023 Sep 24

bztoy · ‎2023 Sep 25

Erdaleser · ‎2023 Sep 25

tobiasz_h · ‎2023 Sep 25

Michaelis · ‎2023 Sep 25

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.