Skip to Content
Technical Articles
Author's profile photo Dhanasupriya Sidagam

SAP Cloud Application Programming Model – Demo3

Hey All

This site is extension of my earlier posts on SAP Cloud Application Programming Model (SAP CAPM):

Let’s get started with Demo 3 on SAP Cloud Application Programming Model.

SAP Cloud Application Programming Model provides support to SAP Fiori using SAP Fiori Elements. As well known, Fiori Elements are created using the semantic annotations from OData.

What are OData Annotations?

Semantic information can be added to OData using annotations which enables SAP Fiori Elements in exposing the required elements on screen as part of UI. Also, OData annotations can provide information on the capabilities of OData service. 

In this blog, I have explained the List Report of SAP Fiori Elements using OData Annotations.

Open SAP Business Application Studio from SAP Cloud Platform account as explained in before blogs.

create a project in the workspace. Run the command: cds init employeeinfo in the terminal.

user: projects $ cds init employeeinfo

Follow the directory of the project created.

user: projects $ cd employeeinfo    

Place a data model in db folder: schema.cds


entity Employees{
    key ID: Integer;
    firstname: String(50);
    lastname: String(50);
    company: String(50);
    experience: Integer;

Add the service file in SRV folder: cat-service.cds

using from '../db/schema';

service CatalogService {
    entity Employees as projection on employeeinfo.Employees;

annotate CatalogService.Employees with @(
  UI: {
       HeaderInfo: {
        TypeName: '{i18n>Cat.TypeName}',
        TypeNamePlural: '{i18n>Cat.TypeNamePlural}',
        Title: { $Type: 'UI.DataField', Value: ID }
        SelectionFields: [ ID, firstname, lastname, company, experience],      
      LineItem: [
        {$Type: 'UI.DataField', Value: ID},
        {$Type: 'UI.DataField', Value: firstname},
        {$Type: 'UI.DataField', Value: lastname},
        {$Type: 'UI.DataField', Value: company},
        {$Type: 'UI.DataField', Value: experience}

annotate CatalogService.Employees with {
  ID @( Common: { Label: '{i18n>Cat.ID}'} );
  firstname @( Common.Label: '{i18n>Cat.firstname}' );
  lastname @( Common.Label: '{i18n>Cat.lastname}' );
  company @( Common.Label: '{i18n>}' );
  experience @( Common.Label: '{i18n>Cat.experience}');

Create a subfolder csv in db folder. Add a file to csv naming and keep the below data.


Now lets place our UI code in the app folder.

Create the below project structure in app and add the following code into respective files.

Run the command cds watch and check for the metadata in browser.


<?xml version="1.0" encoding="utf-8"?>
<edmx:Edmx xmlns:edmx="" Version="4.0">
<edmx:Reference Uri="">
<edmx:Include Alias="Common" Namespace=""/>
<edmx:Reference Uri="">
<edmx:Include Alias="UI" Namespace=""/>
<Schema xmlns="" Namespace="CatalogService">
<EntityContainer Name="EntityContainer">
<EntitySet Name="Employees" EntityType="CatalogService.Employees"/>
<EntityType Name="Employees">
<PropertyRef Name="ID"/>
<Property Name="ID" Type="Edm.Int32" Nullable="false"/>
<Property Name="firstname" Type="Edm.String" MaxLength="50"/>
<Property Name="lastname" Type="Edm.String" MaxLength="50"/>
<Property Name="company" Type="Edm.String" MaxLength="50"/>
<Property Name="experience" Type="Edm.Int32"/>
<Annotations Target="CatalogService.Employees">
<Annotation Term="UI.HeaderInfo">
<Record Type="UI.HeaderInfoType">
<PropertyValue Property="Title">
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="ID"/>
<PropertyValue Property="TypeName" String="Employee"/>
<PropertyValue Property="TypeNamePlural" String="Employees"/>
<Annotation Term="UI.LineItem">
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="ID"/>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="firstname"/>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="lastname"/>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="company"/>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="experience"/>
<Annotation Term="UI.SelectionFields">
<Annotations Target="CatalogService.Employees/ID">
<Annotation Term="Common.Label" String="Employee ID"/>
<Annotations Target="CatalogService.Employees/firstname">
<Annotation Term="Common.Label" String="First Name"/>
<Annotations Target="CatalogService.Employees/lastname">
<Annotation Term="Common.Label" String="Last Name"/>
<Annotations Target="CatalogService.Employees/company">
<Annotation Term="Common.Label" String="Company"/>
<Annotations Target="CatalogService.Employees/experience">
<Annotation Term="Common.Label" String="Experience"/>


sap.ui.define(['sap/fe/AppComponent'], function(AppComponent) {
    'use strict';

    return AppComponent.extend('sap.demo.employees.Component', {
        metadata: {
            manifest: 'json'


<!DOCTYPE html>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

            window['sap-ushell-config'] = {
                defaultRenderer: 'fiori2',
                applications: {
                    "fe-lrop-v4": {
                        title: 'Employees',
                        description: 'Fiori elements app',
                        additionalInformation: 'SAPUI5.Component=sap.demo.employees',
                        applicationType: 'URL',
                        url: './',
                        navigationMode: 'embedded'

        <script src=""></script>
            data-sap-ui-libs="sap.m, sap.ushell, sap.collaboration, sap.ui.layout"
            sap.ui.getCore().attachInit(() => sap.ushell.Container.createRenderer().placeAt('content'));
    <body class="sapUiBody" id="content"></body>


    "_version": "1.15.0",
    "": {
        "id": "sap.uxfe.demo.products",
        "type": "application",
        "i18n": "i18n/",
        "applicationVersion": {
            "version": "1.0"
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "ach": "CA-UI5-FE",
        "dataSources": {
            "mainService": {
                "uri": "/catalog/",
                "type": "OData",
                "settings": {
                    "odataVersion": "4.0"
        "offline": false,
        "resources": "resources.json",
        "sourceTemplate": {
            "id": "ui5template.fiorielements.v4.lrop",
            "version": "1.0.0"
    "sap.ui": {
        "technology": "UI5",
        "icons": {
            "icon": "",
            "favIcon": "",
            "phone": "",
            "phone@2": "",
            "tablet": "",
            "tablet@2": ""
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
    "sap.ui5": {
        "resources": {
            "js": [],
            "css": []
        "dependencies": {
            "minUI5Version": "1.71.0",
            "libs": {
                "sap.fe": {}
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "uri": "i18n/"
            "": {
                "dataSource": "mainService",
                "settings": {
                    "synchronizationMode": "None",
                    "operationMode": "Server",
                    "autoExpandSelect": true,
                    "earlyRequests": true
        "routing": {
            "routes": [
                    "pattern": "",
                    "name": "ProductsList",
                    "target": "EmployeeList"
            "targets": {
                "EmployeeList": {
                    "type": "Component",
                    "id": "EmployeeList",
                    "name": "sap.fe.templates.ListReport",
                    "options": {
                        "settings": {
                            "entitySet": "Employees",
                            "variantManagement": "Page"
        "contentDensities": {
            "compact": true,
            "cozy": true
    "sap.platform.abap": {
        "_version": "1.1.0",
        "uri": ""
    "sap.platform.hcp": {
        "_version": "1.1.0",
        "uri": ""
    "sap.fiori": {
        "_version": "1.1.0",
        "registrationIds": [],
        "archeType": "transactional"

Once our UI code is also ready, run the command cds watch again. Click on Open in New Tab button which will open at the right bottom of page.

Output: Open the highlighted path.

Click on Employees tile.

Finally our List Report SAP Fiori Element shows up.

Please comment down below for any suggestions & queries.

Thank you Community!! 🙂


BR//Dhanasupriya Sidagam

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo PRASAD VSRK

      Good One  . CAP is the Next big thing in SAP ..

      Author's profile photo balaji kiran
      balaji kiran

      Really Good one 🙂

      Author's profile photo balaji kiran
      balaji kiran

      Can we use Smart filterbar with Smart Table  Instead of Fiori elements?

      Author's profile photo Dhanasupriya Sidagam
      Dhanasupriya Sidagam
      Blog Post Author

      yes.. we can

      Author's profile photo mahesh zeple
      mahesh zeple

      Hi Sidagam,

      Can you please share example on using Smart FilterBar and SmartTable through CAP ?



      Mahesh Z.

      Author's profile photo Vishnupriya Varadharajan
      Vishnupriya Varadharajan


      Great Blog! Can you please let me know what library needs to be included for Analytical List Page and Overview pages in manifest.json file?

      Tried adding 'sap.suite.ui.generic:{}' along with sap.fe:{}; that didnt help.
      "sap.ui5": {
              "resources": {
                  "js": [],
                  "css": []
              "dependencies": {
                  "minUI5Version": "1.71.0",
                  "libs": {
                      "sap.fe": {},
                      "sap.suite.ui.generic": {}
      Author's profile photo Dhanasupriya Sidagam
      Dhanasupriya Sidagam
      Blog Post Author

      Hello Vishnupriya

      Can you try checking with “sap.suite.ui.generic.template”: {} and "sap.ovp": {}

      Author's profile photo Sourav Panda
      Sourav Panda

      Hello Dhanasupriya,

      I am trying to consume cds odata by normal UII5 controls like table. I am trying to achieve in similar way as V2. But I am not able to show all records of serviice. Only 1 record is showing multiple times. It means I am not able to add aggregation binding with v4 odata. Could you please look into below code and please help me here.


      "dataSources": {
      "CatalogService": {
      "uri": "/browse/",
      "type": "OData",
      "settings": {
      "odataVersion": "4.0"


      <Table items="{path: '/PRIVILEGES'}" noDataText="No Data" id="table0">
      <ColumnListItem type="Active" >
      <Text text="{USER_NAME}" />
      <Text text="{GRANTEE_SCHEMA_NAME}" />

      In network, I could see all records for the entity.







      Author's profile photo ragavie dakishna
      ragavie dakishna

      Good. Thanks for your sharing

      Author's profile photo Om Prakash Jha
      Om Prakash Jha

      Nice Blog.How did you get create button on Fiori page?

      Author's profile photo Matthias Lakämper
      Matthias Lakämper

      Thanks for the helpful blog.

      Author's profile photo Mallikarjuna B
      Mallikarjuna B

      Hi Dhanasupriya  ,

      Thanks for sharing All CAPM series , when try to do the same, getting bellow error after click of tile -

      #Failed to load UI5 component for navigation intent "#fe-lrop-v4"

      Could you please help me on this and find Screenshot also attached here.


      • In this flow , i created manually project structure as you mentioned here , getting above error.
      • Project structure -
      • Even i have tried with 'Open Wizard option' to create the project structure under App but still getting same error .
      • Project structure -

      It would be great helpfull , if any hint on this.