topic SAP Developer Challenge - Full-Stack - Front-end Development with SAP Fiori Elements (Week 3) in Application Development and Automation Discussions

SAP Developer Challenge - Full-Stack - Front-end Development with SAP Fiori Elements (Week 3)

dinah — Wed, 20 Sep 2023 05:44:13 GMT

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:

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

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.

Re: SAP Developer Challenge - Full-Stack - Front-end Development with SAP Fiori Elements (Week 3)

kiryl-haupt — Wed, 20 Sep 2023 11:29:14 GMT

Re: SAP Developer Challenge - Full-Stack - Front-end Development with SAP Fiori Elements (Week 3)

Yauheni_Kalodka — Wed, 20 Sep 2023 13:31:41 GMT

Re: SAP Developer Challenge - Full-Stack - Front-end Development with SAP Fiori Elements (Week 3)

SandipAgarwalla — Wed, 20 Sep 2023 14:20:48 GMT

Re: SAP Developer Challenge - Full-Stack - Front-end Development with SAP Fiori Elements (Week 3)

SandipAgarwalla — Wed, 20 Sep 2023 14:21:23 GMT

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

Re: SAP Developer Challenge - Full-Stack - Front-end Development with SAP Fiori Elements (Week 3)

thomas_jung — Wed, 20 Sep 2023 19:14:38 GMT

Re: SAP Developer Challenge - Full-Stack - Front-end Development with SAP Fiori Elements (Week 3)

MioYasutake — Wed, 20 Sep 2023 20:37:28 GMT

Re: SAP Developer Challenge - Full-Stack - Front-end Development with SAP Fiori Elements (Week 3)

choujiacheng — Fri, 22 Sep 2023 09:55:25 GMT

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

Re: SAP Developer Challenge - Full-Stack - Front-end Development with SAP Fiori Elements (Week 3)

stickman_0x00 — Thu, 21 Sep 2023 09:33:04 GMT

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

Re: SAP Developer Challenge - Full-Stack - Front-end Development with SAP Fiori Elements (Week 3)

jens_borau — Thu, 21 Sep 2023 11:33:53 GMT

Re: SAP Developer Challenge - Full-Stack - Front-end Development with SAP Fiori Elements (Week 3)

JrmyChabert — Thu, 21 Sep 2023 12:40:43 GMT

Re: SAP Developer Challenge - Full-Stack - Front-end Development with SAP Fiori Elements (Week 3)

nex — Thu, 21 Sep 2023 13:28:23 GMT

Re: SAP Developer Challenge - Full-Stack - Front-end Development with SAP Fiori Elements (Week 3)

dhegde — Fri, 22 Sep 2023 02:25:07 GMT

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

Re: SAP Developer Challenge - Full-Stack - Front-end Development with SAP Fiori Elements (Week 3)

Trulov — Fri, 22 Sep 2023 06:50:48 GMT

Re: SAP Developer Challenge - Full-Stack - Front-end Development with SAP Fiori Elements (Week 3)

Nicolas — Fri, 22 Sep 2023 08:27:59 GMT

Re: SAP Developer Challenge - Full-Stack - Front-end Development with SAP Fiori Elements (Week 3)

agnissh — Sat, 23 Sep 2023 10:55:38 GMT

Re: SAP Developer Challenge - Full-Stack - Front-end Development with SAP Fiori Elements (Week 3)

PriyankaChak — Sun, 24 Sep 2023 04:25:43 GMT

Re: SAP Developer Challenge - Full-Stack - Front-end Development with SAP Fiori Elements (Week 3)

MeriemSouissi — Sun, 24 Sep 2023 18:20:20 GMT

Re: SAP Developer Challenge - Full-Stack - Front-end Development with SAP Fiori Elements (Week 3)

Alpesa1990 — Sun, 24 Sep 2023 21:56:12 GMT

Re: SAP Developer Challenge - Full-Stack - Front-end Development with SAP Fiori Elements (Week 3)

bztoy — Mon, 25 Sep 2023 05:23:52 GMT