Skip to Content

SAP HANA XS Advanced, Creating an HTML5 Module


SAP HANA XS Advanced, Creating an HTML5 Module

By Craig Cmehil

Part 2 of 3, Create your first HTML5 module for HTML5 content within your XSA application

You will learn

You will now create the HTML5 module to add basic web based content to your XSA application.


  1. Launch the SAP Web IDE for SAP HANA at the following URL in your web browser. The hostname of course is the hostname of the SAP HANA Developer Edition that you created in the previous tutorial. Remember for XSA you will need to use the hostname and not the IP address of the server, instructions are found on the server landing page itself.


    User: WORKSHOP_01
    Password: HanaRocks2016 or what you changed it to

    or you can use

    Password: CodeJam2016 or what you changed it to

  2. We will begin by opening your existing repository

  3. Now create the HTML5 module to host and serve out the front end content. Begin by selecting your project and then choosing New -> HTML5 Module

    New Module
  4. Name the module web. Press Next. Then press Finish.

    Module web
  5. This not only adds the necessary metadata to the web folder but also maintains the module entry in the project’s mta.yaml file within the project root.

    Module web
  6. You need to add dev602_01-uaa as a dependent service/resource to the mta.yaml file. This is because you have user authentication required to access your application. Save your file. Remember the YAML format is very position sensitive so no tabs and be careful of how many spaces you use.

      _schema-version: '2.0'
      ID: Test_WebIDE_Repo_SPS12
      version: 0.0.1
    - name: web
      type: html5
      path: web
          - name: dev602_01-uaa  
      - name: dev602_01-uaa
          config_path: ./xs-security.json  

    What is this mta.yaml file for? We have so far created a Multi target Application, that is, an application that will contain different modules, such as an HTML5 module and some database artifacts within a HANA Database Module. This file is a design-time descriptor, that will be used by the platform to create a deployment descriptor. This file contains information related to the application (ID, version, description) as well as resources, modules and parameters that will be deployed and required at runtime.

  7. In future, adding the resource declaration to the MTA descriptor will allow the tools to automatically provision these resources at runtime. But this functionality is not yet provided for UAA services. Therefore you have to use the XS command line client tool to perform this step. From a command line type the following to connect to remote XSA server.

    REMEMBER: You must also install the LATEST version of XSA command line tools!! These can be downloaded from the SAP HANA Developer Edition directly or via the SAP Service Marketplace

    xs login -a http://<hostname>:30030 -o orgname -s DEV -u WORKSHOP_01 -p HanaRocks2016

    If you have used the CODEJAMMER user then the command would look different.

    xs login -a http://<hostname>:30030 -o orgname -s DEV -u CODEJAMMER -p CodeJam2016

    Remember to change -o hanapm or -o HANAExpress if you are using SAP HANA Express.

    The space has to match the space that was setup in the Project Settings. You can check it by right-clicking on the repository folder and opening “Project Settings”

    Command line XS Login

    Note: You can also check the organization name and available spaces in the “Organization and Space management” tile in XS Advanced Administration and Monitoring tools menu

  8. To create the UAA service issue the following command:

    xs create-service xsuaa default dev602_01-uaa
    Command line UAA
  9. The web folder in your project contains the resources that will be served out by this HTML5 module. This HTML5 module manages all HTML/client side UI resources (in the resources folder) and performs the task of reverse proxy for all other internal services. This way you have a single HTTP endpoint and avoid any CORS issues. The Add Module wizard already placed a simple index.html with Hello World in the resources folder.

    Default Hello World
  10. The HTML5 module is configured via the file xs-app.json. In this file we can map the routes to destinations we defined in the mta.yaml. We can also set authentication and other options. Go ahead and change the authenticationMethod to route.

    	"welcomeFile": "index.html",
    	"authenticationMethod": "route",
    	"routes": [ ]
  11. Your initial development is done and you are ready to deploy your application onto the XS Advanced server. Highlight the web folder and press Run. This will perform a build, then deploy the service onto the server. If successful it will open a new browser tab to the default page of this web service.

    Run your application
  12. It can take a minute or two for the first build/deploy/run operation to complete. Upon completion you should see that the service status has changed to Running and there is a hyper link to the run logs.

    Application executing
  13. Switch your browser tab and you should see the authentication prompt for your application. Login with the same user credentials you used to log into the SAP Web IDE for SAP HANA. Provided you are not extremely quick in which case your browser may still hold your session and you may not need to log in again. Authentication at the XS level is now done by referencing a user stored. This can be configured to be the HANA database or it can be an external user directory.

  14. After successful authentication, you should see your index.html with the Hello World button.

    Index page loaded

Next Steps

Back to top