Creation of Basic Responsive WEBIDE App

[Former Member]

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.

Pre-requisites:

• 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 "Demo1.app".

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

Worklist.view.xml

 

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:

Worklist.view.xml

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

Object.view.xml

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 ).

    neo-app.json

Step5: Add Component to display the App using Component .

Component.Js

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: