Create a User Interface with CAP (SAP HANA Cloud)

0 %

Create a User Interface with CAP (SAP HANA Cloud)

Details

Create a User Interface with CAP (SAP HANA Cloud)

Thomas Jung

May 20, 2021

Created by

February 26, 2021

Beginner

20 min.

Use services based on SAP Cloud Application Programming Model Node.js and use an SAP Fiori wizard to create a user interface.

You will learn

How to create an SAP Fiori freestyle web interface
How to configure the approuter

Prerequisites

This tutorial is designed for SAP HANA Cloud. It is not designed for SAP HANA on premise or SAP HANA, express edition.
You have created database artifacts and loaded data as explained in the previous tutorial.

Video tutorial version:

Step 1: Run the services

From the previous tutorial we have a .env file in the /db folder. This file contains the connection details to the SAP HANA Cloud instance and it was created when we performed the bind operation from the SAP HANA Projects view.
We can use this same configuration information to start the CAP service layer and connect it to SAP HANA as well. But this will require copying the file contents to a slightly different format and changing the file name to default-env.json. We can do this using the hana-cli developer utility. Open a Terminal window and change to the /db folder.
Issue the command hana-cli copy2DefaultEnv. This will create the file named default-env.json which already contains the connection information to your HANA database.
Move the default-env.json file from the /db folder to the root folder of your project.
You can return to the terminal window and change back to the root cd ... Run the command npm install to install any Node.js dependent modules needed by the Cloud Application Programming Model.
Now issue the command npm start. This will start the CAP service. Once started you will see a dialog with a button that says Open in New Tab. Press this button to test the CAP service in a new browser tab.

If you accidentally close this dialog, you can always open the running services via View > Find Command and then choosing Ports: Preview and choosing the running service from the list
You should see the list of entities you exposed.
You can click on the entities to see the values in a JSON format being served from the SAP HANA Cloud database.

Done

Log on to answer question

Step 2: Test the services

View Full Instructions

Choose the $metadata option from the Welcome page and you can see a technical description of the service
You can use different methods in the OData v4 services you have created. Go back to the welcome page for the service and click Interactions_Items. Add the following to the URL:
```
&$search=DE
```
You can find out more about OData V4 at the OData organization and the documentation for SAPUI5.

Done

Log on to answer question

Step 3: Configure routing

View Full Instructions

You will now create an application router module. This module is very important as it will become the entry point for your application. Every request coming to this module will be routed into the different backend services.

Right-click on the mta.yaml file within your project and choose Create MTA Module from Template.
This will start a wizard to add the module to your project. Choose the Module Template type of Approuter Configuration and then press Start.
Choose the application runtime type of Standalone Approuter. Choose to add authentication and that you plan to add a UI. Press Next.
This will complete the wizard and generate a folder named myhanaapp-approuter in the root of your project.
But to better test this content within CAP at design time we want to rename this folder to app, but we already have an app folder. Therefore delete this existing app folder and then rename myhanaapp-approuter to app
We need to make the same change in the mta.yaml file since it keeps track of all the module and folder names in your project. Open the mta.yaml file for editing and perform a find and replace for the value myhanaapp-approuter and change it app.
Since the web module will be receiving the requests and routing them into the proper processing backend services, such as the OData service you have just tested, it will also be responsible for enforcing authentication.

These routing logics are done by an application called approuter. You can see the Node.js module being called as the starting script for the web module as defined in the file package.json.
The approuter will scan the file xs-app.json to route patterns in the request to the right destinations.

Replace the content of xs-app.json with the following content
```
{
  "authenticationMethod": "none",
  "routes": [{
	      "source": "/catalog/(.*)",
	        "destination": "srv-api",
	          "csrfProtection": true
    }]
}
```
Save the changes.
Among other information, this configuration is declaring that requests containing the pattern /catalog/(.*) are routed to a destination called srv-api. This destination was defined by the wizard in the mta.yaml file.

Done

Log on to answer question

Step 4: Edit the deployment descriptor

When an application is deployed, the mta.yaml file is used to establish the dependencies between the modules and resources. During this binding process, environment variables such as the name of the destinations are set.

Open the mta.yaml file using the dedicated MTA Editor.
You will notice the myHANAAPP-srv module provides a variable called srv-url. This variable is taking the value of the default URL provided at runtime.
Click on the app module. You will establish its dependency with the myHANAAPP-srv module and declare the destination. The name of the destination here needs to match the name you used in xs-app.json in the previous step.
Add a new Requires entry for the app module.
Choose srv-api under Requires in the dropdown.
Enter destinations under Group
Fill in the properties with the following key-value pairs …

Key Value

name srv-api

url ~{srv-url}

forwardAuthToken true

… as follows:
Save the changes in the deployment descriptor file.
OPTIONAL: If you would want to make these changes without the form based mta.yaml editor, here is also the section as it could be inserted via the text editor:

Key	Value
name	`srv-api`
`url`	`~{srv-url}`
`forwardAuthToken`	true

For more information and examples about the approuter, refer to this section in the help.

Done

Log on to answer question

Step 5: Create a Fiori freestyle web interface

We want to create a Fiori freestyle UI for our CAP service. We will use the wizards to generate most of the UI.

From the top menu select View -> Find Command. Then type fiori into the search box. Select Fiori Open Application Generator.
Choose SAPUI5 freestyle as the application type, select SAP Fiori Worklist Application as the floor plan and press Next
At the Data Source and Service Selection screen, choose Use a Local CAP Node.js Project. Select your project root as the CAP project folder path. Select CatalogService as your OData service. Press Next
Choose Interactions_Items as the Object collection, INTHeader_ID for the remaining columns and press Next
In the Project Attributes screen, match to the values shown in the following screenshot and press Finish
The wizard will generate a new folder named interaction_items in the root of the project. We want to drag that folder into the app folder.
The new project structure and content should look like This
From the terminal you can stop your running CAP service with CTRL+C. Then run the service again with npm start to pickup the new content we added to the project.
The CAP test page now has a link to the newly generated application.
Clicking that link will launch the generated Fiori free style UI for the CAP service.