Skip to Content
test
0 %
Configure your SAPUI5 HTML Module (Forecast App)
Details
// Explore More Tutorials

Configure your SAPUI5 HTML Module (Forecast App)

10/18/2018

Configure your SAPUI5 application and your connect it to your SAP HANA XS OData service to consume your `Movielens` recommendations

You will learn

  • Create a SAPUI5 HTML Module
  • Add a dependency to the Node.js Module as a destination
  • Run your SAPUI5 application

Note: The intent of the following tutorials is not to focus on SAPUI5 but to use it as mean to execute the SAP Predictive services.
For more content on SAPUI5, you can check the dedicated tutorials section available on the SAPUI5 documentation.

Step 1: Open the Web IDE

Open the Web IDE, and login using the XSA_DEV credentials.

Switch to the Development perspective using the Web IDE Development icon.

Web IDE

As a reminder the default URL for the Web IDE is:

  • https://hxehost:53075

A link to the Web IDE can also be found on the XSA Controller page at:

  • https://hxehost:39030
Log on to answer question
Step 2: Create a SAPUI5 HTML Module

In the left panel, right click on the forecast project, then select New > SAPUI5 HTML Module.

Web IDE

Enter the following information, then click on Next

Field Name Value
Module Name html
Namespace forecast
Web IDE

Enter the following information, then click on Finish

Field Name Value
View Type XML
View Name demo
Web IDE
Log on to answer question
Step 3: Create the folder structure

Expand the forecast/html/resources/webapp/ folder.

Create the following folder structure:

|-- forecast/html/resources/webapp/
  |-- base
  |   |-- algorithms
  |-- controller
  |   |-- algorithms
  |      |-- apl
  |      |-- pal
  |-- fragment
  |   |-- algorithms
  |   |  |-- apl
  |   |  |-- pal
  |   |-- data
  |-- model
  |   |-- algorithms
  |      |-- apl
  |      |-- pal
  |-- view
  |   |-- algorithms
  |      |-- apl
  |      |-- pal
Web IDE
Log on to answer question
Step 4: Add Module Dependencies

In order to consume the XS OData service from the Node.js Module created previously, you will need to add a dependency from the SAPUI5 HTML Module to the Node.js Module.

Open the mta.yaml file located in the forecast project folder.

Web IDE

Select the html module.

Web IDE

Under the Requires section, add your Node.js API provider (most likely named js_api (provider)).

Set the Group value to destinations.

Web IDE

Add the following properties to the js_api entry:

Key Value
name forecast_api
url ~{url}
timeout 3000000
Web IDE

Save the file using the save icon from the menu.

Log on to answer question
Step 5: Validate your changes

Open the mta.yaml file located in the forecast project folder using the Code editor.

Web IDE

Provide an answer to the question below then click on Validate.

Locate the section named html under module and paste its content here.
×
Step 6: Run the application

Select the html module, then click on the execute icon run from the menu bar.

Once the application is started, the application will open in a new tab/window or you can click on the application URL:

Web IDE

This will open a web page with the following content:

Web IDE
Log on to answer question
Step 7: Commit your changes

On the icon bar located on the right side of the Web IDE, click on the Git Pane icon Web IDE.

Click on Stage All, enter a commit comment, then click on Commit and Push > origin master.

Log on to answer question

Next Steps

Back to top