Create a User Interface with CAP (SAP HANA Cloud)
- 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 Version
Video tutorial version:
- Step 1
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 from Cloud Foundry to start the CAP service layer and connect it to SAP HANA as well. Use the command
cds bind -2 MyHANAApp-dev:SharedDevKey
to tell CAP to bind to this same HANA Cloud HDI service instance that we bound to earlier in the SAP HANA Projects view.Run the command
npm install
to install any Node.js dependent modules needed by the Cloud Application Programming Model.Now issue the command
cds watch --profile hybrid
. This will start the CAP service locally and use the binding configuration to connect to our remote HANA database instance. 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 > Command Pallette 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.
- Step 2
-
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
. Different versions of the Cloud Application Programming Model preview page do different things at this point. Some add a $top limit to the generated URL forInteractions_Items
automatically. Other and perhaps newer versions do not. Have a look at the end of the URL when it opens. If it ends in?$top=11
then add the following to the URL:URLCopy&$search=DE
Otherwise add the following to the URL:
URLCopy?$search=DE
-
You can find out more about OData V4 at the OData organization and the documentation for SAPUI5.
-
- Step 3
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.
-
Open another Terminal instance (so that the watch command can continue to run in the other instance). Issue the command
cds add approuter
. -
This will complete the wizard and generate a folder named
app
in the root of your project. -
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 logic is 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 filepackage.json
. -
We need to install the approuter dependency now as well. From the terminal change to the
app
folder and issue the commandnpm install
-
The
approuter
will scan the filexs-app.json
to route patterns in the request to the right destinations. The xs-app.json that was generated by the wizard is ready to use real security settings, but our project isn’t that far along yet. Therefore, let’s change the configuration to temporarily disable the security checks.Replace the content of
xs-app.json
with the following contentjsonCopy{ "authenticationMethod": "none", "routes": [ { "source": "^/app/(.*)$", "target": "$1", "localDir": ".", "cacheControl": "no-cache, no-store, must-revalidate" }, { "source": "^/(.*)$", "target": "$1", "destination": "srv-api", "csrfProtection": true } ] }
-
Among other information, this configuration is declaring that requests containing the pattern
^/(.*)$
are routed to a destination calledsrv-api
. This destination was defined by the wizard in themta.yaml
file and points the service layer of our CAP application.
-
- Step 4
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 -> Command Pallette. 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 NextChoose
Interactions_Items
as the Object collection,INTHeader_ID
for the remaining columns and press NextIn the Project Attributes screen, match to the values shown in the following screenshot and press Finish
The new project structure and content should look like This
From the terminal you should still have your
cds watch --profile hybrid
still running (if not restart it). This command watches for changes so your application is already to test with the new UI. Open the browser tab where you were testing it previously.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.
If you wish you can open another terminal instance and change to the Application Router folder (
cd app
). Then run the commandnpm start
. This will run the Application Router which you can test from it’s own port (5000). Nothing will really look different at this point, but you are passing all requests through the Application Router now. This will become important once we add security to our service and want to test it locally using the Application Router.
Congratulations! You have created your first, full application.
Now it is a good time to commit your application into the local or remote Git.