Creating a Second App Using the Application Generator

In this exercise, you will create another app Display Customers in the existing CAP project. This app displays the detailed information of customers. The main entity is the Passenger entity. To create the app, you will use the SAP Fiori tools - Application Generator.

This app is used in the exercises of Unit 12 Discovering the Flexible Programming Model of SAP Fiori Elements for OData V4 and Unit 13 Illustrating the Navigation Concept in SAP Fiori elements for OData V4.

This exercise contains a simulation that takes you through all the steps described below. You can follow the simulation and perform the steps using your own trial account.

1. Open your CAP project in SAP Business Application Studio.

2. Select the Menu icon, then File > New Project from Template, and then select SAP Fiori application to create another app based on the same CAP service.

3. On the SAP Fiori application page, select the template List Report Page.

4. On the Data Source and Service Selection page, perform the following steps:

   1. From the Data source dropdown, choose Use a Local CAP Project.

   2. From the Choose your CAP project dropdown, choose fiori-elements-v4-cap-advanced.

   3. From the OData service dropdown, choose TravelService (Node.js).

5. On the Entity Selection page, perform the following steps:

   1. From the Main entity dropdown, choose Passenger.

   2. From the Navigation entity dropdown, choose to_Booking.

6. On the Project Attributes page, perform the following steps:

   1. In the Module name field, enter customer.

   2. In the Application title field, enter Customers.

   3. In the Application namespace field, enter sap.fe.cap.

   4. In the Description field, enter Display Customers.

   5. From the Minimum SAPUI5 Version dropdown, choose the highest available version of 1.120, for example, 1.120.6.

   6. Under Add FLP configuration select Yes.

7. On the Deployment Configuration page, keep the suggested settings.

8. On the Fiori Launchpad Configuration page, perform the following steps:

   1. In the Semantic Object field, enter Customer.

   2. In the Action field, enter display.

   3. In the Title field, enter Display Passenger.

   Result

   You can see that the Application Information page appears. It displays the details of the Display Customers app with useful links.

9. Open the preview of the application in the browser.

   1. On the Application Information page, select Preview Application.

   2. From the projects dropdown, choose watch-customer cds watch.

10. Navigate through the Display Customers app

    1. Select Go. The page displays the customer details.

    2. Select the required customer to view additional information.

In this exercise, you will use the Page Editor provided by SAP Fiori tools. It allows you to easily configure features such as filter fields, table columns, and fields in sections for your app. This tool supports features based on annotations and manifest.json settings.

This exercise contains a simulation that takes you through all the steps described below. You can follow the simulation and perform the steps using your own trial account.

1. Open your CAP project in SAP Business Application Studio.

2. Select the Menu icon.

3. Select View → Command Palette....

4. From the projects dropdown, choose Fiori: Open Application Info.

5. Choose customer Customers. The Application Information of the Display Customers app appears.

6. Under Pages, select ListReport. The Page Editor appears.

7. Add the filter fields in the filter bar.

   1. Under Filter Bar, select the Add icon corresponding to the Filter Fields. The Add Filter Fields dialog appears.

   2. From the Filter Field dropdown, choose City, CountryCode_code, and PostalCode.

   3. Select Add. The three fields are now added to the Filter Fields of PassengerList.

   4. To change the position of the Country Code field, select the move-up arrow next to the field.

8. Delete the existing columns.

   1. Under Tables, expand Columns.

   2. Select the Delete icon corresponding to the required column. The Delete Confirmation dialog appears.

   3. Select Delete.

9. Add new columns.

   1. Select the Add icon corresponding to Columns.

   2. Choose Add Basic Columns. The Add Basic Columns dialog appears.

   3. From the Columns dropdown, select the required columns.

   4. Select Add.

10. To view the annotations of the City column, select Navigate to source code. You can see that a new @UI.LineItem annotation is added by the tool for the selected columns.

11. Launch the preview of the application in a browser window.

    1. In the left pane, under Projects, right-click on fiori-elemens-v4-cap-advanced.

    2. Select Open in integrated Terminal. The Terminal appears.

    3. Enter cds watch.

    4. Select Open in a New Tab. The Welcome to @sap/cds Server page appears.

    5. Under Web Applications, select /customer/webapp/index.html. The Display Customers app appears in the browser window.

    6. Select Go.

       Result

       You can see the newly added filter fields and the columns in the app.

12. To view the $metadata file of the service, on the Welcome to @sap/cds Server page, under Service Endpoints:, select $metadata.

    Result

    The $metadata file of the service opens. Here, you can find the metadata information and all annotations of your CAP project in XML format.

In this exercise, you will continue working with the Page Editor.

You will configure the object page of the Display Customers app. The Application Generator adds some fields to the General Information section of the object page by default. You will delete the technical fields that are not needed and change the sequence of the remaining fields on the UI. Additionally, you will create a header section and add the most important information such as a telephone number and email address of the customer.

This exercise contains a simulation that takes you through all the steps described below. You can follow the simulation and perform the steps using your own trial account.

1. Open SAP Business Application Studio.

2. In the left pane, select Projects\app\customer.

3. Right-click on customer.

4. Select Show Page Map. The Page Map appears.

5. On the Object Page, select the Edit icon. The object page structure appears.

6. Add FullName, EmailAddress, and PhoneNumber to an object page header section.

   1. Under Header, select the Add icon corresponding to the Header Sections.

   2. Choose Add Form Section. The Add Form Section dialog appears.

   3. In the Label field, enter Contact Details as the name of the header.

   4. Select Add.

   5. Expand Contact Details.

   6. Expand Form.

   7. Select the Add icon corresponding to the Fields.

   8. Choose Add Basic Fields. The Add Basic Fields dialog appears.

   9. From the Fields dropdown, select the fields to add to the header section.

   10. Click Add.

   Result

   You have added a header section and the three fields to it.

7. Under Sections, expand General Information.

8. Expand Form.

9. Remove the technical fields (CreatedBy, ChangedOn, and ChangedBy) from Sections.

   1. Select a field to be deleted.

   2. Select the Delete icon. The Delete confirmation dialog appears.

10. To change the sequence of the fields, select the move-up or move-down arrows next to the field.

11. To open the source code, select the Navigate to source code icon next to the Street field. The annotations.cds file opens.

    Result

    You can see that the Page Editor has added the records to the @UI.FieldGroup annotation for the fields you've added to the General Information section.

12. To see the annotation created for the header section, select the Navigate to source code icon next to Contact Details. The annotation.cds file opens.

    Result

    You can see the @UI.HeaderFacets annotation added by the Page Editor to the Passenger entity.

13. Define the header name.

    1. Select Header.

    2. In the right pane, under the Header section, in the Type Name field, enter Customer as the name of the header.

    3. Select Edit in source file.

    4. Select Apply.

    5. In the Type Name Plural field, enter Customers as the title of the list report table.

    6. Select Edit in source file.

    7. Select Apply.

    8. Under the Title field, from the dropdown, choose FullName.

    9. To view the source code, select Edit in source file next to FullName.

14. Open the Display Customers app in the browser window.

    1. In the Display Customers app, select Go. The page displays the list of customers.

    2. Select any customer.

    Result

    You can see the full name of the customer as the title of the object page.