← Back to tutorials

The classic SAP stack · Lesson 2 of 2

From a CDS view to a Fiori Launchpad tile: Fiori Elements app, catalog and role

Publish the annotated CDS as an OData service, generate a Fiori Elements app, deploy it to the ABAP repository and bring it to the Launchpad with catalog, tile, target mapping and role.

También disponible en español →

In part 1 we created the ZSO_HDR table and the Z_C_SalesOrderHdr CDS view, with @UI annotations and @OData.publish: true. Now we take that CDS all the way to the end user: a tile in the SAP Fiori Launchpad that opens a list-and-detail app, without writing a single line of UI5.

Z table → annotated CDS → OData service → Fiori Elements app
        → ABAP repository (BSP) → catalog + tile + target mapping → role → Launchpad

What you need

Tool Purpose
ADT The CDS from part 1
/IWFND/MAINT_SERVICE, /IWFND/GW_CLIENT Activate and test the service
SAP Business Application Studio (or VS Code with Fiori tools) Generate and deploy the app
/UI2/FLPD_CUST or /UI2/FLPCM_CUST Catalog, tile and target mapping
PFCG, SU01 Role and user

1. Test data

If the table is empty, load a few orders with SE16N or a console class. Use the three statuses to see the three criticality colors:

SALES_ORDER   ORDER_TYPE  SOLD_TO_PARTY  STATUS  CURRENCY  GROSS_AMOUNT
9000000001    OR          100000         N       USD       100.00
9000000002    OR          100001         A       USD       250.00
9000000003    RE          100002         R       USD        80.00

In ADT, use Open With → Data Preview on Z_C_SalesOrderHdr to check that the records and the computed StatusCriticality field show up.

2. Activate the service generated by the CDS

Thanks to @OData.publish: true, activating the CDS generated the Z_C_SALESORDERHDR_CDS service. It only needs registering:

  1. /IWFND/MAINT_SERVICE → Add Service.
  2. Pick the System Alias (usually LOCAL).
  3. Search for Z_C_SALESORDERHDR_CDS and add it.
  4. Check that its ICF node is active.

Test it in /IWFND/GW_CLIENT:

GET /sap/opu/odata/sap/Z_C_SALESORDERHDR_CDS/$metadata
GET /sap/opu/odata/sap/Z_C_SALESORDERHDR_CDS/Z_C_SalesOrderHdr?$top=5
GET /sap/opu/odata/sap/Z_C_SALESORDERHDR_CDS/Z_C_SalesOrderHdr?$filter=OrderType eq 'OR'

The exact entity set name may vary by release: if the second request fails, look it up in $metadata.

3. Generate the Fiori Elements app

In SAP Business Application Studio, create a project with the Fiori generator:

  1. Template SAP Fiori Elements → List Report Page (list + Object Page).
  2. Data source: your system (through a destination) and the Z_C_SALESORDERHDR_CDS service.
  3. Main entity: Z_C_SalesOrderHdr.

Run the preview. Everything you see comes from the CDS annotations:

On screen Comes from
Table columns @UI.lineItem
Filters @UI.selectionField
Detail fields @UI.identification
Detail title @UI.headerInfo
Amount with its currency @Semantics.amount.currencyCode
Status in green, yellow or red criticality: 'StatusCriticality'

If the annotations do not show up: refresh $metadata (in Gateway, with the metadata cache cleared), make sure the active CDS is the published one, and generate again.

4. Semantic navigation in manifest.json

The Launchpad does not open apps by URL but by intent: a semantic object plus an action. Declare it in webapp/manifest.json, inside sap.app:

"crossNavigation": {
  "inbounds": {
    "SalesOrder-display": {
      "semanticObject": "SalesOrder",
      "action": "display",
      "title": "Sales Orders Z",
      "subTitle": "CDS UI Tutorial",
      "signature": {
        "parameters": {},
        "additionalParameters": "allowed"
      }
    }
  }
}

The resulting intent is #SalesOrder-display. Also check that the dataSource points to the service:

"dataSources": {
  "mainService": {
    "uri": "/sap/opu/odata/sap/Z_C_SALESORDERHDR_CDS/",
    "type": "OData",
    "settings": { "odataVersion": "2.0" }
  }
}

5. Deploy to the ABAP repository

Deploy the app as a BSP application. In Business Application Studio, set it up with Add Deployment Configuration and deploy with npm run deploy:

BSP Application: ZUI5_SO_CDS
Description:     Sales Orders CDS UI
Package:         your package (or $TMP for practice)

When it finishes, the app lives at /sap/bc/ui5_ui5/sap/zui5_so_cds.

6. Catalog, tile and target mapping

In /UI2/FLPD_CUST (the classic designer):

Catalog:

Catalog ID:    Z_BC_SO_CDS
Catalog Title: Sales Orders CDS Catalog

Tile (static) inside the catalog:

Title:    Sales Orders Z
Subtitle: CDS View UI
Icon:     sap-icon://sales-order
Intent:   #SalesOrder-display

Target mapping, which translates the intent into the app:

Semantic Object:  SalesOrder
Action:           display
Application Type: SAPUI5 Fiori App
URL:              /sap/bc/ui5_ui5/sap/zui5_so_cds
ID:               the app id in manifest.json (sap.app/id)

Newer systems use /UI2/FLPCM_CUST (Launchpad Content Manager): there you create the catalog, add the app with its semantic object, action and UI5 component, and assign it to a space and page instead of a group.

7. The role

A tile only shows up if the user has a role that includes its catalog. In PFCG:

  1. Create a single role, for example Z_SO_CDS_USER.
  2. In Menu, add the Z_BC_SO_CDS catalog (SAP Fiori Tile Catalog). In the newer model, add the space and page too.
  3. Also add the OData service authorization: Menu → Authorization Default → TADIR Service, type IWSG, service Z_C_SALESORDERHDR_CDS_0001. Without it, the tile is visible but the app loads no data.
  4. Generate the profile on the Authorizations tab.
  5. On User, assign the role and run the user comparison.

8. Test in the Launchpad

Open the Launchpad, find the Sales Orders Z tile (in the group, on the page or with search) and open it. Check that the orders load, filters work, the status is colored and the detail page shows every field.

If something fails

Symptom Where to look
The service returns an error /IWFND/ERROR_LOG, /IWBEP/ERROR_LOG, and that it is active in /IWFND/MAINT_SERVICE
The app opens with no data manifest.json dataSource, entity set name and service authorization (step 7.3)
The tile does not show up Catalog in the role, role assigned, user comparison, group or page, and the Launchpad cache
The tile opens “app not found” The target mapping: semantic object, action, URL and app id must match manifest.json

Checklist

  • Test data in ZSO_HDR and CDS Data Preview working
  • Z_C_SALESORDERHDR_CDS service active and $metadata tested
  • Fiori Elements app generated and tested in preview
  • crossNavigation with the #SalesOrder-display intent
  • App deployed as BSP ZUI5_SO_CDS
  • Catalog, tile and target mapping created
  • Role with catalog and service authorization, assigned to the user
  • Tile visible and app working in the Launchpad

That closes the full loop of the classic stack: from a Z table to an app in the user’s hands. In RAP the path is the same, except the service comes from a service binding instead of @OData.publish.