Skip to Content

XS Advanced, Create a User Interface with the Cloud Application Programming Model

test
0 %
XS Advanced, Create a User Interface with the Cloud Application Programming Model
Details
// Explore More Tutorials

XS Advanced, Create a User Interface with the Cloud Application Programming Model

07/29/2019

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

You will learn

  • How to create an HTML5 web interface
  • How to configure the approuter


Step 1: Build the services

Return to the code editor and right-click on the srv folder. In the file interaction_srv.cds you created the definition for two read-only services that expose the header and items entities in your database module.

Choose Run > Run as Node.js Application.

Run as Node.js application

You will see the run console shows the progress. Once the application is running, click the URL to open the service.

Run as Node.js application

You should see the list of entities you exposed.

Run as Node.js application

You can click on the entities to see the values in a JSON format.

Log on to answer question
Step 2: Test the services

Add $metadata to the service and you can see a technical description of the service (for example, https://hxehost:51026/catalog/$metadata ).

Run as Node.js application

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

For example, https://hxehost:51026/catalog/Interactions_Items?$search=DE:

Play with OData service

You can find out more about OData V4 at the OData organization and the documentation for SAPUI5.

Log on to answer question
Step 3: Configure routing

You will now create a basic web 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 project folder and choose New > Basic HTML5 Module.

Play with OData service

Call it web and click Finish.

Play with OData service

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 defined, 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.

Play with OData service

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:


{ "welcomeFile": "index.html", "authenticationMethod": "none", "routes": [{ "source": "/catalog/(.*)", "destination": "srv_api", "csrfProtection": true }] }

Save the changes.

Web module

Among other information, this configuration is declaring that requests containing the pattern /catalog/(.*) are routed to a destination called srv_api.

This destination can be defined in the mta.yaml file.

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 and you will notice the srv module provides a variable called url. This variable is taking the value of the default URL provided at runtime.

Web module

Click on the web module. You will establish its dependency with the 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.

  1. Choose srv_api under Requires.

  2. Enter destinations under Group.

  3. Fill in the properties with the following key-value pairs …

    Key Value
    name srv_api
    url ~{url}
    forwardAuthToken true

    … as follows:

    Web module
  4. Save the changes in the deployment descriptor file.

Here is what the file looks like in the code editor:

Web module

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

Log on to answer question
Step 5: Create a quick and dirty web interface

Remove the code between the <title> and <head> elements.

Web module

Replace it with the following code:


<!-- 1.) Load SAPUI5 (from a remote server), select theme and control library --> <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m, sap.ui.table" data-sap-ui-theme="sap_bluecrystal"> </script> <script> var oModel = new sap.ui.model.odata.v4.ODataModel({ synchronizationMode : "None", serviceUrl : "/catalog/" }); var oTable = new sap.ui.table.Table({ title: "My first table" }); oTable.addColumn(new sap.ui.table.Column({ label: "Text", template: "LOGTEXT" })); oTable.setModel(oModel); oTable.bindRows("/Interactions_Items"); oTable.placeAt("uiArea"); </script>

Save the changes.

Web module

This very simple code is creating a model from the OData V4 service and using it in a table. This is only test code to show the consumption of the model, but there is a lot to improve here.

Run the srv module again.

Web module

Once the srv module is running, run the web module.

Web module

Congratulations! You have created your first application.

Web module

Now it is a good time to commit your application into the local or remote Git.

Log on to answer question
Step 6: Check environment variables

Click Tools > XS Advanced Cockpit.

Log in with user XSA_DEV (or the user you have been using for development, assuming it has access to view the cockpit).

Web module

Navigate into the organization and space in which you are developing.

Web module

Click on the web application.

Web module

You will see the environment variables for the web micro-service. Click User-Provided Variables.

Web module

Can you recognize the destinations? These are the values you set in the mta.yaml file to configure the route to the srv module.

Which variable is not a user-provided variable?
×

Next Steps

Prerequisites

  • You have created a Multi-Target Application using the Cloud Application Programming model.
  • You have created database artifacts and loaded data as explained in this tutorial.
Back to top