Developing with SAP Extension Suite

Adding the UI and Approuter Module to the MTA

After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Add the UI and approuter module to the MTA

Add the UI and Approuter Module to the MTA: Exercise Overview


You will add the UI application and the approuter to the mta.yaml file.

Task Flow

In this exercise, you will add the UI and the approuter to the mta.yaml file.


You have set up a standalone approuter.

The automatic creation of the mta.yaml file added everything that is needed from the CAP side to the mta.yaml file:

  • The service.
  • The database deployer.
  • The dependency to the XSUAA and SAP HANA Cloud service.

Your SAP Fiori elements-based UI application, however, is still missing. You will have to add this module manually since, currently, there is no automation support to do this.

The approuter is also an application, just like your CAP service and the UI. To deploy the approuter, you will need to add a configuration to the MTA file that you created earlier.

Watching the Simulation and/or Performing the Steps

In this exercise you find a simulation and a list of all steps, displayed in the simulation. Performing the steps below allows you to follow the simulation in your own trial account.

Add Approuter to MTA


Add Approuter to MTA

Start Exercise

Task 1: Add the UI and the Approuter to the mta.yaml File


  1. Add modules to the mta.yaml file.

    1. Add the risk-management-approuter and the risk-management-app module for the Approuter to the mta.yaml file:

      Code snippet
      # -------------------- SIDECAR MODULE ------------------------
       - name: risk-management-db-deployer
         # ------------------------------------------------------------
         type: hdb
         path: gen/db
           buildpack: nodejs_buildpack
           # 'hana' and 'xsuaa' resources extracted from CAP configuration
           - name: risk-management-db
           - name: risk-management-xsuaa
       #//### BEGIN OF INSERT
       # -------------------- APPROUTER -----------------------------
       - name: risk-management-approuter
         # ------------------------------------------------------------
         type: nodejs
         path: approuter
           - name: risk-management-xsuaa
           - name: srv-api
           group: destinations
             forwardAuthToken: true
             strictSSL: true
             name: srv-binding
             url: "~{srv-url}"
             - name: risk-management-app
               - ./*
               target-path: resources
       # -------------------- UI -----------------------------------
       - name: risk-management-app
         # ------------------------------------------------------------
         type: html5
         path: app
           supported-platforms: []
       #//### END OF INSERT
      Copy code
    2. Save the file.

      The approuter takes the UI resources of the risk-management-app and puts it in the resources directory. This is where the xs-app.json looks for the files requested for /app/....

      The risk-management-xsuaa binding adds your already existing XSUAA service instance to the approuter. This enables login and log out. The approuter forwards requests with the authentication token (Authorization: Bearer <jwt-token>) to the CAP service. The CAP service then uses the token for authentication and authorization checks.

      The srv-binding creates an environment variable destinations that contains a JSON array with one object containing the destination of the CAP service. This is required to forward requests to the CAP service.

      The generated environment variable looks like this:

      destinations='[{ "name": "srv-binding", "forwardAuthToken": true, "strictSSL": true, url: "https://..." }]

      The URL is taken from the risk-management-srv module that needs to be enhanced to export this information.

Task 2: Re-Build and re-Deploy the .mtar File


  1. Re-build and re-deploy the .mtar file.

    1. Build your project with the MTA Build Tool (MBT):

      mbt build -t ./

      Make sure you're in the root folder of your project.

    2. Deploy your project to SAP BTP:

      cf deploy risk-management_1.0.0.mtar

      Additional Documentation: How to build an MTA archive from the project sources1.

    3. When the deployment is finished, check the deployment log for a line saying:

      Application "risk-management-approuter" started and available at "<some_URL>"

      Like in the following screenshot:

      This is the URL of the Approuter, that, from now on, will take care of all the requests to your application.

    4. Copy the URL and open it in a new browser tab. In the background, the approuter authenticates your user and provides it with the authorizations that have been assigned to the user. Open the Risksapplication tile and try to retrieve data by selecting the Go button.

      As your user does not have the required application roles yet, the result should look like the following:


You added the UI and the approuter to the MTA file. Next, you will assign the required role collections to your user and check if your user regains access to the application data.

Reference Links: Adding the UI and Approuter Module to the MTA

For your convenience this section contains the external references in this lesson.

If links are used multiple times within the text, only the first location is mentioned in the reference table.

Reference Links: Addition of the Approuter and UI Module to the MTA

1Re-Build and Re-Deploy the .mtar FileAdditional Documentation: How to build an MTA archive from the project sourcesBuild an MTA archive

Save progress to your learning plan by logging in or creating an account