Managed HTML5 Application Sample

SAP Business Technology Platform enables you to access and run HTML5 Applications in a cloud environment without the need to maintain your own runtime infrastructure.

HTML5 Applications consist of static content that runs on a browser. You can develop your applications - either in SAP Business Application Studio, or in your own IDE (integrated development environment) - and deploy them to the HTML5 Application Repository.

Depending on your backend application setup, you either configure the destinations during development, or define them after deploying the application. Finally, to consume the applications, you can create a site in SAP Cloud Portal Service, build the URL, and define custom domains.

For more information, please refer to the documentation on SAP Help Portal.

Build Custom SAP Fiori User Experience

The objective of this reference application is to showcase the ease of building custom frontends for SAP applications – Bring the ease of use of HTML5 Application on SAP Business Technology Platform Neo Environment to the Multi-Cloud environment.

Prerequisites

Entitlements

Make sure that you have an account with below entitlements for your sub account

Service	Plan	Number of Instances
Destination	lite	2
HTML5 Application	app-host	2

Subscriptions

Make sure that the below subscriptions are active for your sub account
a. Business Application Studio
b. Portal

Steps

From the Subaccount Overview page, click on the tab "Subscriptions"
Search for "Portal"
Click on "Portal"
Click on "Subscribe"
Click on your subaccount
Similarly, subscribe to Business Application Studio.

Role Collections

To access Business Application Studio, users will the role "Business_Application_Studio_Developer".

In the Subaccount Overview page, Expand Security and Click on Trust Configuration
Click on "SAP ID Service"
Enter Email Address and Click on "Show Assignments"
Click on "Add User" to add the user to the SAP ID Service (if user is not already present in the IDP)
Click on "Assign Role Collection"
Select "Business_Application_Studio_Developer"
Click on "Assign Role collection"

Destination Setup

A destination to ES5 is to be configured in the subaccount from which you will access the SAP Business Application Studio. To do this, please follow the steps below:

Create an Account on the Gateway Demo System using the steps here
Create a Destination within the Cloud Foundry Environment using the steps here, and set the ES5 destination properties as follows: Common properties
- Name: ES5
- Type: HTTP
- Description: ES5
- URL: https://sapes5.sapdevcenter.com:443
- Proxy Type: Internet
- Authentication: BasicAuthentication
- User Name: Your ES5 Gateway user
- Authentication: Your ES5 Gateway password
- Additional Properties:
- HTML5.DynamicDestination: true (Type this additional property manually as it is not available in the drop-down list)
- sap-client: 002
- WebIDEEnabled: true
- WebIDESystem: ES5
- WebIDEUsage: odata_abap

Build and Deploy of the Application

Open the Business Application Studio from Subaccount> Subscriptions
Login to the Application using your CF account login credentials
Click on "Create Dev Space"
Enter the name of the space and Choose "SAP Fiori" and select "Launchpad Module" from Additional Extensions
Once the devspace is created, open it.
Go to View-> Select "Find Command"
Search for "CF Login"
Select for "CF: Login on to Cloud Foundry"
Enter CF API endpoint
Enter "Email" and "Password" when prompted
Select your org and space to login to Cloud Foundry
Go to View > Find Command
Search for "Clone" and select the command "Git:Clone"
In the pop up, enter the git repository link
Once the cloning is complete, you can view the project in 'Explorer'
Go to Terminal > New Terminal
In the terminal window, navigate to the project root folder
Run the command - mbt build
Once the build is complete, expand the mta_archives folder in the project root folder.
Right click on the cloud-extension-html5-sample-1.0.0.mtar and select " Deploy MTA Archive"
Add the role collection "BPViewerRC" to your user using the steps mentioned above.
Now, run the command cf html5-list -u -d. Open the URL corresponding to the application.