Skip to Content
Author's profile photo Former Member

Creation of Basic Responsive WEBIDE App

The SAP HANA Cloud Platform is a development platform based on open standards. The platform provides developers with the flexibility to use frameworks/tools of their choice for application development. Let’s take the case of developing the user interface. While SAP UI5 is SAP’s recommended client side framework for developing business applications, Cloud Cockpit is used for Accesing Different Apps on WorkBench.


  • You should have an Hana Cloud Cockpit Trial Account to execute the steps mentioned below.
  • You should be familiar with basics of developing HTML5 , Javascript .


Step 1: Create a simple HTML5 application using the SAP Web IDE

  • Using the SAP Web IDE, create a new HTML5 application. Right click on the Workspace node, select the New > Folder menu. Provide the Folder Name as ““.

Step 2: Now Make the Following modifications in the view .



As you can see that Columns are added to list to display Items List .

Provide the Binding Path’s for columns you want to add binding to:



Step 3: Provide the Panel for the Object View to Display in Detail.And add the class as shown below .



Step4:   Add Destination to the App in Destinations->New Destinations also provide Additional Properties.

              Fetch Data from a Back-end system in my case  ES4 demo system .( ANY back-end system can be used to fetch Data ).



Step5: Add Component to display the App using Component .




Step6: Go to Run->Run Configurations->APP  . Select With Frame to See the Effect of Responsiveness.



Step 7: Activate the application to make it accessible via a public URL

  • Deploy the HTML5 application to HCP by right-clicking on the Demo1 and selecting Deploy > Deploy to HANA Cloud Platform. In the Deploy Application dialog, leave the defaults and click on the Deploy button.
  • In the Successfully Deployed dialog, click on the ‘Open the active version of the application‘ link. You should see the same page as above, with a public URL(available on the internet) that can be shared.
  • The deployed application would be accessible on the following URL:

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.