Taking a Closer Look at the Apps Used in the Training

Objective

After completing this lesson, you will be able to discover essential apps and features in your training journey

Discover the Manage Travels App

In this lesson, you will explore the Manage Travels app that is mainly used throughout the training, in addition to the Display Customers app. Furthermore, you will also gain insights into the structure of the CAP project, which you've previously cloned. This exploration involves taking a closer look at the files where you will extend your data model or implement the back-end methods in the following exercises. You will also see the files of your SAP Fiori elements apps.

Watch the Simulation and Perform the Steps

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.

Note

To launch the app preview in the browser window, select either cds run or cds watch. In the following exercises, you will use cds watch to immediately update the preview after making some changes in the project.

Get to Know the Structure of the CAP Project Used in the Training

Usage Scenario

In this lesson, you will examine the structure of the CAP project that you've previously cloned.

Watch the Simulation and Perform the Steps

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.

Steps

  1. Open SAP Business Application Studio.

  2. In the Explorer view, under Projects, expand fiori-elements-v4-cap-advanced.

  3. Expand app. You can see the two folders, customer and travel_processor, corresponding to the two apps, Display Customer and Manage Travels, respectively.

  4. Explore the customer folder.

    1. Expand customer.

    2. To see the application files of SAP Fiori elements, expand webapp.

    3. Select i18ni18n.properties. The i18n.properties file opens. It contains the UI texts for translation.

    4. Select localServicemetadata.xml. The metadata.xml file opens. It contains the metadata information of the service in XML format.

    5. Select test. The test folder contains the initial files for the tests. You need to implement the tests if you have added some custom JavaScript code or custom controls to your SAP Fiori elements application.

    6. Select manifest.json. The manifest.json file is the main configuration file for your app settings.

    7. Select annotations.cds. The annotations.cds file opens. It contains the annotations in CDS format.

  5. Explore the travel_processor folder.

    1. Expand travel_processor.

    2. Expand webapp. The webapp folder also has the same structure as that of the customer folder.

    3. Select manifest.json. The manifest.json file is the main configuration file for the Manage Travels app.

    4. Select capabilities.cds. In the capabilities.cds file, you can see that the service is draft-enabled and that semantic keys are specified in the file.

    5. Select field-control.cds. The field-control.cds file contains the annotations that influence the availability and editability of the fields and actions on the UI.

    6. Select labels.cds. The labels.cds file contains the label annotations for the fields.

    7. Select layouts.cds. The layouts.cds file contains the main UI annotations such as the @UI.Identification and @UI.LineItem.

    8. Select value-helps.cds. The value-helps.cds file contains the value help definition for the Manage Travels app. It also has the value help definitions of the filter bar and the table fields in Edit mode.

    9. Select service.cds. The service.cds file contains the references to all files containing CDS annotations.

  6. Explore the data modeling of the CAP service.

    1. Select dbschema.cds. The schema.cds file contains the definition of the entities and the relations between them. Some of them are associated to other entities such as TravelStatus, to_Agency, to_Customer, and to_Booking. Some of the entities are defined in the master-data.cds file.

    2. Select master-data.cds. The master-data.cds file contains the definition of master data entities such as Airline, Airport, and Supplement.

    3. Select common.cds. In the common.cds file, sap.common.Currencies is extended and the technical fields are mapped. These technical fields are added to the entities which are denoted as managed.

    4. Select datasap.fe.cap.travel-Travel.csv. The data folder contains CSV files with initial data for each entity of the service. For example, the sap.fe.cap.travel-Travel.csv file contains all fields of the Travel entity.

    5. Expand srv. The srv folder contains the entities and actions for the services.

    6. Select travel-service.js. The travel-service.js file contains the Node.js methods for the service. These methods are invoked during runtime by CAP.

  7. Start the CDS server.

    1. In the Explorer view, under Projects, right-click on fiori-elements-v4-cap-advanced.

    2. Select Open in Integrated Terminal. The Terminal view opens.

    3. Enter cds watch.

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

    5. Select Service Endpoints/processor$metadata. The $metadata file opens in XML format. It contains the metadata of your service as well as the annotations. You can also see the definition of the Travel entity in XML format.

Result

In this exercise, you have examined the structure of the CAP project you are going to use in this training. You have seen the data modeling, which includes entities and associations, as well as the service layer where entities and actions are exposed, and the necessary Node.js methods are implemented.

​Each app requires at least one annotation file. In the CAP projects, the annotations are typically written in CAP CDS format. These CDS annotations are then transformed into OData annotations in XML format and are available, along with the metadata information, in the generated $metadata file. The SAP Fiori elements framework utilizes the data from the $metadata file to generate the user interfaces (UIs).

Next Steps

You can also create a data model using the low-code functionality. For more information, see Create a Data Model and Expose It as a Service.

Get an Overview of the Features Which Will Be Implemented in the Training

Explore the Features Which will Be Implemented

You will explore the features that you will implement in the Manage Travels and Display Customers apps.

Watch the Simulation

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.

Log in to track your progress & complete quizzes