Before we begin!

In this 7 blog series, we are going to provide a small end-to-end scenario to work with SAP® CAPM. Here the usecase we are going to use is of Learning Management System(LMS) and build a Student List App and Deploy it to SCF.

Link to Master(or Main) Blog from which all the other blogs can be reached is Here.

In this section we are going to deploy our App to SAP® Cloud Foundry(SCF) in SAP® Cloud Platform(SCP)

Step 1: Building DB Artifacts

Till now, we were using sqlite3 Database in the local environment to test. Now we will use HANA® DB in Cloud or HDI Container(which comes with Free Trial of SCF).

To deploy our database artifacts i.e the cds which describe the structure and csv data. We need to first convert it to SQL, in which the HDI container/HANA® DB can process the creation of the table and loading of data.

For this we need to build our db artifacts, this we do by opening .cdsrc.json and adding the content as shown below

{

"build": {

"target": "gen",

"tasks": [

{ "src": "db", "for": "hana", "options": { "model": ["db", "srv"] } },

{ "src": "srv", "for": "node-cf", "options": { "model": ["db", "srv"] } },

{ "src": "app", "for": "node-cf" }

]

}

}

Note: In this case, we are telling the CAPM to create a build inside folder gen(which will get created once we run cds build/all command). And inside the gen folder, we will get db, srv and app build code.

For our purpose, we only need db artifacts so the above .cdsrc.json code can be just for db build as shown below

{

"build": {

"target": "gen",

"tasks": [

{ "src": "db", "for": "hana", "options": { "model": ["db", "srv"] } }

]

}

}

Step 2: cds build/all to Build Artifacts

Now let’s start the build process which will read the .cdsrc.json file and create a gen folder and add all the build artifacts inside it

cds build/all

Step 3: Create the HDI Container in SCF

Now lets, create the HDI container in the cloud. We can do it manually with Cockpit UI or with CLI. Below us CLI Code which you can execute after you are logged in to your SCF account from CLI

cf create-service hanatrial hdi-shared somedbname

In this case, the SAP® Cloud Foundry service is hanatrail, the plan is hdi-shared and somedbname is your HDI container name.

Step 4: Change package.json DB

Open the package.json file from the project directory and update the place we have sqlite to hana i.e. from "kind": "sqlite", to "kind": "hana",.

Here, we are telling CAPM App to use HANA® DB(or HDI) connection setting

{

"name": "democds",

"version": "1.0.0",

"description": "Generated by cds init",

"repository": "<Add your repository here>",

"license": "ISC",

"dependencies": {

"@sap/cds": "^3.18.4",

"express": "^4.17.1",

"hdb": "^0.17.1",

"sqlite3": "^4.1.0"

},

"engines": {

"node": "^8.9"

},

"scripts": {

"start": "cds run"

},

"cds": {

"requires": {

"db": {

"kind": "hana",

"model": [

"db/",

"srv/"

]

}

}

}

}

Note: You can also run command to uninstall sqlite3 from the project if you face exit status 14 error while deploying the app to SCF with below command

npm uninstall sqlite3

or Just remove the sqlite3 dependencies from package.json.

Step 5: Create YML

To deploy our App in cloud we can either use mta.yml or manifest.yml.

Note: .yml and .yaml are both extensions of YML descriptor file and are same. But mta.yml and manifest.yml are both different kinds.

You can think mta.yml as an advanced version of manifest.yml where you have more features like adding resource bundles, also when an app is deployed with mta.yml file then in client-side a compressed zip file is created with all Apps artifacts and then this zip file is deployed to Cloud. In the case of using manifest.yml file while deploying, all files are uploaded sequentially and no zip file is created locally as in the previous case.

In our case, we use manifest.yml file in the root of the project for simplicity as shown below

Create a new file named manifest.yml

touch manifest.yml

Add Deployment information to manifest.yml file as below:

---

applications:

- name: hdbApp

path: ./gen/db

memory: 256M

health-check-type: process

services:

- somedbname



- name: newApp

path: ./

services:

- somedbname

Here, we are first deploying the db artifacts which will create the tables in HDI container(or HANA® DB) and Add data. After that, we deploy the newApp, which will deploy our CAPM App.

Step 6: cf push and Test

For deploying App in Cloud you can use the command

cf push

Which needs to be done in the root of the Project, where you see your manifest.yml file you created.

Output of the application will be

Fiori Launchpad:

Data of Students:

🙂 Congratulations! You have completed this series.

Before we end!

In this 7 blog series, we are going to provide a small end-to-end scenario to work with SAP® CAPM. Here the usecase we are going to use is of Learning Management System(LMS).

Link to Master(or Main) Blog from which all the other blogs can be reached is Here.

Before we begin!

In this 7 blog series, we are going to provide a small end-to-end scenario to work with SAP® CAPM. Here the usecase we are going to use is of Learning Management System(LMS) and build a Student List App and Deploy it to SCF.

Link to Master(or Main) Blog from which all the other blogs can be reached is Here.

In this part, we are going to make a UI5 App. This will allow us to separate View Code From Data Definition, i.e. the Annotations we have written in CDS view, we can separate it in UI5 App.

We can also provide our user with a Fiori® Launchpad experience and customize further the UI components.

Step 1: File structures

Create an app folder inside the project root. This will hold all our UI codes

    mkdir app

Create the UI Project Structure as below, here we have app as root for UI project, inside this we have index.cds, index.html and studentsDetails folder. studentsDetails Folder contains webapp folder which has Component.js, manifest.json and fiori-service.cds

|-- app
    |-- index.cds
    |-- index.html
    |-- studentsDetails
        |-- webapp
            |-- Component.js
            |-- manifest.json
            |-- fiori-service.cds

Step 2: index.html Code

• In file index.html we are going to add a tile that represents our Fiori® App. The template Code for the inde.html is as below

<!DOCTYPE html>
<html>
  <head>
    <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" />
    <title>LMS Students</title>
    <script>
      window["sap-ushell-config"] = {
        defaultRenderer: "fiori2",
        applications: {
          "manage-Students": {
            title: "Manage Students",
            icon: "sap-icon://documents",
            description: "Students Management",
            additionalInformation: "SAPUI5.Component=studentsDetails",
            applicationType: "URL",
            url: "/studentsDetails/webapp",
            navigationMode: "embedded"
          }
        }
      };
    </script>
    <script src="https://sapui5.hana.ondemand.com/test-resources/sap/ushell/bootstrap/sandbox.js"></script>
    <script
      src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
      data-sap-ui-libs="sap.m, sap.ushell, sap.collaboration, sap.ui.layout"
      data-sap-ui-compatVersion="edge"
      data-sap-ui-theme="sap_belize"
      data-sap-ui-frameOptions="allow"
    ></script>
    <script>
      sap.ui
        .getCore()
        .attachInit(() =>
          sap.ushell.Container.createRenderer().placeAt("content")
        );
    </script>
  </head>
  <body class="sapUiBody" id="content"></body>
</html>

Step 3: index.cds Code

In index.cds we are going to add reference to file where our CDS UI Annotations are defined. In this file, we can give one or more cds file path. This also brings modular structure to our app as well.

Code of index.cds is

using from './studentsDetails/fiori-service';

Step 4: component.js Code

Inside webapp we will add a file named component.js which will basically describe about UI5/Fiori App. This also, includes the manifest.json information, which we are going to define in next step

sap.ui.define(["sap/fe/AppComponent"], ac =>
  ac.extend("studentsDetails.Component", {
    metadata: { manifest: "json" }
  })
);

Step 5: manifest.json Code

In manifest.json file we are going to define data source of service, routes, App title etc.

Below is the blank template of the manifest.json

{
    "_version": "1.8.0",
    "sap.app": {
      "id": "student",
      "type": "application",
      "title": "Students Details",
      "description": "studentsDetails",
      "dataSources": {
        "<Data Source Name>": { 
          // example: mysrvdemo or first 
          // which is your service name

          "uri": "<URL>", // example: /mysrvdemo/ or /first/
          "type": "OData",
          "settings": {
            "odataVersion": "4.0"
          }
        }
      }
    },
    "sap.ui5": {
      "dependencies": {
        "libs": {
          "sap.fe": {}
        }
      },
      "models": {
        "": {
          "dataSource": "<dataSources Name>",
          "settings": {
            "synchronizationMode": "None",
            "operationMode": "Server",
            "autoExpandSelect": false,
            "earlyRequests": false,
            "groupProperties": {
              "default": {
                "submit": "Auto"
              }
            }
          }
        }
      },
      "routing": {
        "routes": [ {
          "pattern": ":?query:",
          "name": "Student",
          "target": "Student"
        }
        ],
        "targets": {
          "Student": {
              "type": "Component",
              "id": "Student",
              "name": "sap.fe.templates.ListReport",
              "options": {
                "settings": {
                  "entitySet": "<Name of Structure>"
                  //example: Students 
                }
              }
            }
        }
      }
    }
  }

Step 6: fiori-service.cds Code

Inside fiori-service.cds we define the annotations for the UI according to which data will be rendered in screen

using first from '../../srv/schema';
annotate first.Students with @(
     UI: {
    SelectionFields: [ email,first_name],
    LineItem: [
      {Value: email,
            Label:'email'},
      {Value: first_name,
            Label:'first_name'},
      {Value: last_name,
            Label:'last_name'},
      {Value: date_sign_up,
            Label:'date_sign_up'}
    ],
  HeaderInfo: {
      TypeName: 'email', TypeNamePlural: 'Emails',
      Title: { Value: email },
      Description: { Value: first_name }
    }
}
);

Step 7: Run the App

Now save all files and run the App:

cds run --in-memory

Step 8: Output

You will see now a Fiori® Launchpad with you App placed as a Tile. If you go inside you will see List based elements showing Students details.

Fiori Launchpad:

Data of Students:

Before we end!

In this 7 blog series, we are going to provide a small end-to-end scenario to work with SAP® CAPM. Here the usecase we are going to use is of Learning Management System(LMS).

Link to Master(or Main) Blog from which all the other blogs can be reached is Here.