Create and deploy a CAP application with Fiori UI ...

Oliver_S · ‎06-07-2023

This blog-tutorial guides you through the process of creating a CAP application.

You will create a basic data model with an OData service, and add a Fiori app for the data model. Optionally, you can deploy the CAP app to your SAP BTP Cloud Foundry (Trial) Subaccount.

Prerequisites

Make sure the Prerequisites for this blog are fulfilled. You need:

A SAP BTP Subaccount (type Enterprise or Trial) with SAP Business Application Studio (BAS). That's it for the first part.

In case you want to deploy your CAP application to your SAP BTP Subaccount and run it there, you need in addition:

The BTP Subaccount has to be enabled for Cloud Foundry and needs a CF space, for example, called "dev".

You need an instance of SAP HANA Cloud. CAP supports SAP HANA Cloud as database in the backend. For the Dev Environment, you can use the build-in SQLite database of CAP.

You need the service SAP Build Work Zone, because in the blog, you will use the SAP managed approuter, which needs the html5 repository of Build Work Zone in the BTP backend.

If you are not yet familiar with the prerequisites, you can run this blog also as a SAP Discover Center mission, which provides more details and steps: Get Started with SAP Cloud Application Programming (CAP)

If you need also guidance, on how to get a BTP Trial Account and how to work with Business Application Studio, you can run the DC mission Get Started on SAP BTP with SAPUI5/Fiori - Create a Hello World App

You can also explore the SAP Blog Build and deploy a CAP Project which provides the basics of using SAP managed approuter in a CAP project.

Step 1 - Create a Dev Space in SAP Business Application Studio

Open your Business Application Studio (BAS).

Click on Create Dev Space on the SAP Business Application Studio home page.

Select Full-Stack Application and provide a name of your choice (for example, "CAP") in the upper left corner. This is the dev space stack you will use for modelling your new CAP app.

Click again, "Create Dev Space" in the lower right corner.
You will be forwarded to an overview of your dev space(s).
It may take some time until the newly created dev space is started.
Once started, the status changes from "STARTING" to "RUNNING" and the dev space name (in this case "CAP") will turn into a blue hyperlink.

Click on your Full Stack Cloud Application dev space link (e.g. named "CAP") to enter your space.

After a few seconds ... you will see the Home page of your dev space.

Step 2 - Create a new project

Click on Open Folder in your Dev Space.
Select /home/user/projects/.

You can create a new CAP project either "from template" or via "command line".
This blog uses command line.

Create a new project from command line:
- In the menu bar, select "Terminal" --> "New Terminal".
- Make sure you are in your projects root folder: /home/user/projects/.
- In the terminal type
```
cds init bookshop
```
The bookshop project will be created.

Change the root directory of your terminal bash.
```
cd bookshop
```

Create a basic data model with sample data and a service.
```
cds add samples
```
Optional: Explore the generated files in bookshop/db and bookshop/srv

For the production database, use SAP managed HANA database. It is important to add "--for production", otherwise CAP will not use its built-in in-memory database SQLite anymore in your development environment.
```
cds add hana --for production
```

Use Cloud MTA Build Tool for deployment to SAP BTP Cloud Foundry
```
cds add mta
```

Install npm. Use the short version of npm install.
```
npm i
```

Run your app with development profile.
```
cds watch
```

Either start your browser via the link in the terminal log or use the link in the popup.

Explore the links and the data provided by your CAP service (4 links).

Optional: Stop it in terminal with CTRL + C.

Your CAP OData service is up and running.

Step 3 - Add SAP Managed Application Router for Fiori UIs

The application router is used to serve static content, authenticate users, rewrite URLs, and forward or proxy requests to other microservices while propagating user information. This tutorial uses SAP Managed Application Router, which requires a subscription to SAP Build Work Zone service.

The application router is needed for CAP projects if you want to add Fiori apps.

Right-click on the file mta.yaml of your bookshop project.
Select "Create MTA Module from Template".

A new template page opens, select "Approuter Configuration" and click Start.

Keep "Managed Approuter" (important) and provide a unique name for the Approuter. Select "Yes", you plan to add a Fiori UI.

Click next, this will generate the approuter configuration in mta.yaml and you will get a xs-security.json file.

Step 4 - Add XSUAA configuration

Add now missing xsuaa (authentication and authorization service) dependencies. Otherwise, your deployment will fail.

Note: do not add xsuaa before you added the managed application router. Otherwise, the cds xsuaa configurations will be incompatible with Fiori Tools. Do not add xsuaa after you created your first Fiori app.
```
cds add xsuaa --for production
```
and run npm i to add the new packages:
```
npm i
```

Add xsuaa does the following changes:

In file package.json it adds additional dependencies:

"dependencies": {

  "@sap/xssec": "^3",

  "passport": "^0"

},

and in production profile:

"auth": {

  "kind": "xsuaa"

}

In file mta.yaml it adds name: uaa_bookshop:

requires:

  - name: bookshop-db

  - name: uaa_bookshop

and in parameters a new config part.

parameters:

  path: ./xs-security.json

  service: xsuaa

  service-name: bookshop-xsuaa-service

  service-plan: application 

  config:

    xsappname: bookshop-${org}-${space}

    tenant-mode: dedicated

Optional run cds watch.

Step 5 - Generate a Fiori app

Right-click on the file mta.yaml of your bookshop project.
Select "Create MTA Module from Template".

A new template page opens, select SAP Fiori application and click Start.

Optional: you can also start from command palette: Fiori: Open Application Generator.

Select template List Report Page and click "Next".

In step "Data Source and Service Selection", select:
- Data Source: Use a Local CAP Project
- Choose your CAP project: bookshop
- OData service: CatalogService (Node.js)
Click "Next".

Keep your Main Entity "Books". It is anyways the only one in the project.

Keep Yes for "Automatically add table columns".

Click "Next".

In step "Project Attributes", provide:
- Module name: booksui
- Application title: A Fiori UI for Books service (for example)
- Application namespace: my
- Keep the default setting for the rest, especially Yes for "Add deployment configuration to MTA project".
Click "Next".

In the next step, "Deployment Configuration", provide:
- Please choose the target: Cloud Foundry
- Destination name: Local CAP Project API (Instance Based Destination)
Click "Finish". Wait until the files are generated...

Run cds watch in terminal and open your "local" preview.
You have a new entry in "Web Applications", your Fiori app /booksui/webapp/index.html.
Click on it.

In the Fiori app, click on Go to get the data. (this is how initial Fiori apps work)

Optional: stop cds watch.

Step 6 - Deploy to Cloud Foundry

Right-click on file mta.yaml and select "Build MTA Project".

Alternatively use terminal:
```
mbt build
```

Login to Cloud Foundry. Open Command Palette (CTRL + Shift + P) and search for "CF: Login to Cloud Foundry" and select it.

Important: Make sure you use the correct API Endpoint from your CF Subaccount. You find it in the Overview page of your Subaccount.

Enter username (email) and password or SSO Passcode.

Choose your Subaccount, where you have SAP HANA installed, and your preferred CF Space. e.g. "dev".

Tip: Sometimes CF login skips this view. Just run "CF: Login" again.

Choose Apply.

Right-click on file mta_archives/bookshop_1.0.0.mtar and select "Deploy MTA Archive".

Alternatively use terminal:
```
cf deploy mta_archives/bookshop_1.0.0.mtar
```

Go to your Cloud Foundry Subaccount. Check that deployment was successful.
Open the Cloud Foundry Space, where you deployed your application to.

Under Applications, you see 2 new entries. Do not start the bookshop-db-deployer. Its sole purpose is to deploy the bookshop schema with an HDI-Container.

You can open the service bookshop-srv. But it requires now authentication, which you can't provide in a plain browser.

Navigate to "Instances". You see 4 new entries.

Run your Fiori app. Go to "HTML5 Applications" in the left navigation pane (which will only be there if you subscribed to SAP Build Work Zone).

Click on your app "booksui2":

The app should look the same as in your dev environment.

Congratulations! You have just finished your first CAP app with a SAP Fiori UI!

Note: You can run this blog also as part of the SAP Discover Center mission Get Started with SAP Cloud Application Programming (CAP), which provides more details.