I have published a new blog where I explain how to deploy a CAP based Fiori app to a central launchpad (without using Approuter).

Introduction

Recently, I’ve been learning about CAP (Cloud Application Programming Model). With CAP you can add UI annotations to OData service and preview how the Fiori app will look like from local URL.

I had the following questions regarding CAP based Fiori elements apps.

In this blog, I’m going to share how I have achieved these requirements. The source code is available at GitHub.

I’m new to Cloud Foundry Development, so comments and suggestions are appreciated.

Developing Environment

Visual Studio Code Cloud Foundry trial account Cloud Foundry CLI MTA Build Tool cds development kit Fiori Tools extension

Steps

1.1. Generate a new CAP project.

1.2. Create db/schema.cds. Here, I’m using well-known bookshop model.

1.3. Create srv/cat-service.cds.

1.4. Just blow service definition, add UI annotations to srv/cat-service.cds.

1.5. Add db/data/sap.capire.bookshop-Authors.csv as initial data.

1.6. Similarly, add db/data/sap.capire.bookshop-Books.csv.

1.7. Execute cds watch and see the Fiori preview.

As we are going to use Fiori Tools, the OData service needs to be adapted to v2 (Fiori tools currently do not fully support OData v4). For this, we use @sap/cds-odata-v2-adapter-proxy

2.1. install @sap/cds-odata-v2-adapter-proxy to your project.

2.2. Create srv/server.js.

Now, OData v2 service can be accessed with "/v2" prefix.

path to v4 service: :4004/catalog/Books

path to v2 service: :4004/v2/catalog/Books

Next, let’s add UI module using Fiori tools.

1. Press Ctrl + Shift + P and launch Application Generator.

2. Select SAP Fiori elements application.

3. Select List Report Object Page V2.

4. Select Connect to an OData Source as Data source, and specify your local CAP OData URL:  :4004/v2/catalog/

5. Select "Books" as Main Entity.

6. Type below information.

Once you press Finish, Fiori elements app will be generated.

7. Move to bookshopapp folder you’ve just created and run the app.

You can see your Fiori app running locally at :8080/test/flpSandbox.html#masterDetail-display.

We have to make some adjustments so that this Fiori app can be deployed as part of MTA.

1. Create bookshopapp/webapp/xs-app.json.

2. Add ui5-task-zipper as devDependencies to bookshopapp module.

3. Configure bookshopapp/package.json.

Add ui5-task-zipper to ui5>dependencies.

4. Replace bookshopapp/ui5.yaml with the following code. What I’ve done are:

Remove "ui5Theme" Add resources section Add builder section

Resulting bookshopapp/ui5.yaml will look like below.

1. Add crossNavigation settings to bookshopapp/webapp/manifest.json

This configuration is necessary for executing the app from Fiori Launchpad.

We are adding Approuter module to route incoming requests and authenticate users.

4.1. Create approuter folder at the project root and add package.json inside it.

4.2. Add approuter/xs-app.json.

Approuter redirects requests containing path /v2/catalog to srv-api destination, which will be defined later in mta.yaml. At this point, authenticationType is "none", because we don’t restrict access to the CAP service. If you require only users with certain authorization to access the service, you would set authenticationType as "xsuaa".  How to achieve user authentication is very well explained in Jhodel Cailan’s blog.

Deployer module will upload html5 app to HTML5 Application Repository.

5.1. Create deployer folder at the project root and add package.json inside it.

This module is necessary for the app to be able to run in CF Launchpad.

6.1. Create launchpad folder at the project root and add package.json inside it.

6.2. Add launchpad/portal-site/CommonDataModel.json.

Here, you configure Launchpad Tile and Group.

6.3. Add launchpad/portal-site/i18n/i18n.properties.

We have specified in bookshopapp/webapp/xs-app.json that HTML5 Application Repository requires user authentication as below, so we need XSUAA service instance bound to Approuter.

7.1. Add xs-security.json to the project’s root.

This is the final step before deploy. We are connecting everything together in mta.yaml.

8.1. Add below configuration to package.json, which is at the project root.

It indicates that HANA DB will be used in production, while SQLite DB will be used for development.

8.2. Generate mta.yaml.

Next,  we need to make some changes to mta.yaml.

8.3. Modify bookshop-db resource

As I’m using trial account, I need to change the parameter "service" from hana to hanatrial.

8.4. Add Approuter module.

8.5. Add UI and Deployer modules.

8.6. Add Launchpad deployer module.

8.7. Add the following resources.

In the end, mta.yaml will look like this.

8.8. After you’ve generated mta.yaml, add cds configuration for local development.

Finally, we deploy the MTA project to Cloud Foundry.

9.1. Run below command to build the project.

The first time I ran build, I received below error.