Building an Enterprise Application Using Fiori Elements and CAP – Part 2

[Farooq]

With the CAP backend ready from Part 1: Preparing the CAP Backend, the next step is to create a List Report and Object Page application using SAP Fiori Elements. This part explains how to generate the UI using the latest SAP Fiori tools generator and connect it to the ProductService created earlier. 

The flow in the current generator has changed compared to older tutorials, so this section follows the updated steps exactly as developers see them today in Visual Studio Code. 

1. Prerequisites 

Before generating the application, ensure the following: 

• The CAP project from Part 1 is opened in Visual Studio Code 
• The CAP server is running using: cds watch 
• Visual Studio Code extensions installed: 
  • SAP Fiori tools – Extension Pack 
  • SAP CDS Language Support 

These are required for the generator and metadata integration. 

2. Opening the Application Generator 

Open the SAP Fiori tools Application Generator as follows: 

• Open Visual Studio Code 
• Open the Command Palette 
• Run: Fiori: Open Application Generator 

This opens the updated generator UI. 

3. Selecting the Template 

Select the ‘List Report Page’ template, this template includes both the List Report and the Object Page, which is suitable for most business scenarios. 

Click Next to proceed

4. Data Source and Service Selection 

Choose the data source as ‘Use  a Local CAP Project’, which will allow us to choose any location CAP project to be used as data source for the project 

This option loads metadata directly from the CAP service running on cds watch. 

Once selected: 

• Choose the product-management project (root project folder) 

• The generator will detect available services
• Select ProductService

• Select the entity Products

Click Next. 

This step connects the UI to the CAP backend created in Part 1. 

5. Project Attributes 

The final screen asks for basic project details: 

• Module name: productfe 
• Title: Product Management 
• Description: List Report and Object Page for Products 
• Folder location: Accept default, which places it under the app folder 

Click Finish to generate the application. 

The generator creates the UI module inside: app/productfe

6. Understanding the Generated Structure 

The generated application includes: 

webapp/ 

Contains all UI resources, including routing, views, and layout configuration. 

webapp/manifest.json 

Defines: 

• Data sources 
• Routing 
• List Report and Object Page configuration 
• Annotation references 

annotations/ 

Optional location for local annotation XML files. 

ui5.yaml 

UI5 tooling configuration used for running and building the app. 

Root-level package.json 

Contains dependencies and scripts for serving the app locally. 

This structure is standard for Fiori Elements applications. 

7. Running the Application 

To preview the application: 

1. Ensure the CAP backend is still running with cds watch

2. Click on the Fiori Preview to see the list report 

The List Report should load and display the product data from the CSV file. 
Selecting a product navigates to the Object Page. 

No custom UI code is required at this stage. 
Everything is generated based on metadata coming from the CAP service. 

8. Adding Basic CDS Annotations 

Annotations help shape the UI. 
To define them centrally, create a file 'srv/annotations.cds'  Add the following:

using my.products as prod from '../db/schema.cds'; 

annotate prod.Products with @( 
    UI: { 
        HeaderInfo: { 
            TypeName:          'Product', 
            TypeNamePlural:    'Products',
            Title:             { Value: name }
        }, 

        SelectionFields: [
            name,
            category
        ],
        Identification: [
            { Value: name },
            { Value: description }
        ]
    }
); 

These annotations define: 

• Title and header information 
• Search and filter fields 
• Basic fields shown on the Object Page 

Save the file and refresh the preview to see the changes.

10. Summary 

With the List Report up and running and the first set of annotations applied, the application now has a working front end connected to the CAP service. The filters, titles, and basic layout are driven entirely by the annotations added in the CAP project, which helps set the foundation for more advanced UI behavior. 

At this stage, the Object Page is available as part of the template, but it has not been configured or enhanced yet. The template creates the routing and navigation automatically, but the actual Object Page layout and details are still very minimal. These parts will be handled in the next section of the series. 

The goal so far has been to make sure that the List Report is stable, the metadata is flowing correctly, and the annotations are being picked up as expected. Once these pieces are in place, adding and shaping the Object Page becomes much easier.  Building an Enterprise Application Using Fiori Elements and CAP – Part 3.