Create Custom Apps using SAP Web IDE on SAP HANA Cloud Platform
SAP Web IDE is the most powerful and integrated web-based development environment that simplifies application development and drastically reduces time to value. The SAP Web IDE offers an unparalleled flexibility to build and run innovative solutions with a wide arrange of capabilities and features while covering the entire spectrum of performance improvements and enhancement process. Using SAP Web IDE, we can quickly outline, assemble, and convey SAP Fiori applications in view of SAPUI5
- Zero installation and maintenance costs
- Improves developer’s productivity through prebuilt templates, wizards, and code editors
- Multi-deployment through single step – develop once, deploy to all major SAP platforms: HANA Cloud Platform (HCP), ABAP, SAP Mobile Platform (SMP) and SAP Portal
A complete set of benefits of SAP Web IDE is accessible on SAP HANA Cloud Platform, where customers and users gain access to all the latest upgrades and most recent elements. You can test drive SAP Web IDE trial version without the need of a local establishment, this becomes an essential point of the SAP Web IDE conveyance
This blog is intended to help developers on how to create Custom Apps onSAP Web IDE Platform
Pre-requisites
- Before reading through the blog, you will need understand or should have a low-level of understanding on how to access to SAP HANA Cloud Platform, you may also try this using the trial version
- To get a free trial account, visit hcp.sap.com and click on Sign up for a Free account & then on Try Now. Register with the user details. Once it is done, you will get access to the HCP Cockpit
- Additionally, you also need to check for the SAP HANA Cloud Connectivity, the access has to be enabled (to know more about this (Refer: Step 2)
So here’s how you can create custom apps or customize Fiori Apps using Web IDE on SAP HANA Cloud Platform
Option 1. Using SAP Web IDE on-premise based on on-premise Gateway System
As a prerequisite, you will need to install SAP Web IDE on-Premise and connect it to your SAP Gateway system on-Premise so as to generate custom application. While we are going to discuss only the steps on how to create applications on SAP HANA Cloud Platform
While creation of custom application on SAP HANA Cloud Platform can be developed in two different ways
- Using the SAP Web IDE template, create SAP Fiori applications and extend it as needed (Simple and easy to develop, debug and deploy)
- Developing Custom application in Eclipse IDE and deploying it to the HANA platform and Fiori Launchpad (this is slightly time consuming and involves development of coding the entire application)
Considering the effort and time that you may have, I have explained the first one, i.e., how to create custom apps using SAP Web IDE templates
Steps involved in creating custom apps on Web IDE:
Step -1: Logon to SAP HANA Cloud Platform:
Before you proceed creating custom apps on SAP Web IDE, you will need avail a HANA account, if you are going to test, then you may avail a free HANA trial account or login using credentials if you already have one.
To get a free trial account, visit hcp.sap.com and click on Sign up for a Free account & then on Try Now. Register with the user details. Once it is done, you will get access to the HCP Cockpit
Step-2: Setting up the Destinations and SAP HANA Cloud Connector for On-Premise Connectivity
In the HCP Cockpit you select ‘Destinations’ in the Connectivity option and you can configure & manage the servers from where we can get access to the OData services.
Also, double check for the SAP HANA Cloud connectivity by clicking ‘Cloud Connectors’. Here’s how you can enable the following
The SAP HANA Cloud Connector is basic on-premises mix operator that permits exceedingly secure and dependable network between your HANA Platform cloud applications and on-premises frameworks.
You can use the link HANA cloud Connector for setting up and configuring the SAP HANA Cloud connector
Step-3: Launch SAP Web IDE and test with the sample app
Click on ‘Services’ on to the left of HCP cockpit and search for service ‘SAP Web IDE’, tap on the tile. This will in turn will navigate you to the next page where you will find the links to ‘open SAP Web IDE’. Simply tap on it, to launch SAP Web IDE.
Once you have landed on the Web IDE home screen where you will find some useful links, such as what’s new in SAP Web IDE and then options to create a new project or import an existing application as required.
Test by creating a sample application
You can launch an available sample application template by following the simple steps below
Click on ‘New project from sample application’ tile. Select any one of sample application of your choice (for ex. Shop) and click on Next. Proceed to select the checkbox ‘I agree’ and click finish.
You will now see a new project created in your workspace. You can run it to test and this will ensure you have the application opened with random sample data (refer to the screenshot below)
Step-4: Creating Custom Fiori app using SAP Web IDE
To create a new application, Select Click on the tile ‘New Project from Template’. Then do the following steps:
- Select SAP Fiori application in the drop –down and choose SAP Fiori Master–detail Application and proceed by clicking next from the Template selection tab.
- In the Basic Information tab, give any project name and click on Next.
- Now in the Data Connection tab, select service catalog from the sources option and choose the required server as well as the customized OData service set which you want to use and click Next.
- The next step is to bind the customized OData service to the UI5 Application. To do so fill in the required data in the Template Customization tab and choose the appropriate fields that will map to the application. Click on Finish.
- You will now find the application being created in the workspace based on the customization you made. See the fig.
Run the application and you will see the master-detail page with the data from the server as shown below
It is responsive and we can see it in mobile, desktop or tablet view
Step-5: Use the code Editor to edit the screen or add the additional fields
Additionally, if you want to add additional fields in any of the master or detail page, you will need to use the Code Editor. For example, I am adding the Customer ID field in the Detail page.
To do so, go the DetailView.xml file and add the necessary UI5 element. Here, I am adding object attribute which will be used to display the Customer ID. While doing this you will automatically get the code completion for it.
And now when you run the app with the mock data you will see that customer ID has been added in the detail page
Step-6: Working with Layout Editor
You can use the Layout Editor to make changes to the existing project very easily without any need to code.
A Layout Editor helps to see the content of the XML view in a way that nearly compares to how it will show up in your completed application. It has Toolbar, Controls Tab, outline tab, canvas, Events pane and Properties pane each having its own objects and functionalities to edit the application.
For example, if you want to edit the Detailview.xml of the previous project by adding any new attributes or removing the icon tab bar.
Right Click Detailview.xml -> Choose Open with -> Layout Editor.
This will lead you to a new screen as shown below
The outline tab is seen left of canvas in the palette pane showing the hierarchy of the page. It also highlights which item is selected in a that page. For eg., if you select the second icon tab filter, you will see that it is highlighted in the outline tab.
You can also change its color, name or icons, etc. you will see a few more, you may chose to apply or delete them
Similarly, you can also drag and drop the controls from the palette pane into the canvas pane if needed.
We also have an option to create a new project, this leads to creation of project with the Layout editor by default. For this, Click on tile ‘Quick start with Layout Editor’ from the Home screen and perform the changes you need.
Step-7: Deploying the application to various platforms
Once the customizations are applied, the application you just created using SAP Web IDE can be deployed to any of the following
- Deploy to SAPUI5 ABAP Repository
- Deploy to SAP HANA Cloud Platform
- Register to SAP Fiori Launchpad
In order to deploy the project to SAP HANA Cloud Platform, right click on the project and simply select Deploy and choose SAP HANA Cloud Platform, a link will be generated, using this link you may launch the application and use it anywhere, anytime
In order to register the project to Fiori Launchpad, right click on the project and select Deploy→ Register to SAP Fiori Launchpad (refer to screenshots below)
Run the application by clicking on tile of the app on the Launchpad. Additionally, if you would like to customize your Fiori Launchpad. You can read it here
Conclusion:
After reading through the above steps, you will get an overview on create custom apps using SAP Web IDE. I hope the above article benefits you. You can also read and share our latest blog posts on http://www.mobolutions.com/blog/. Please feel free to follow up or raise any doubts regarding the functional or technical aspects.
You can also read more about Mobolutions, SAP Partner, on www.mobolutions.com, where we specialize in HANA Cloud Platform Support and deployment of standard and customized HCP apps. You can also connect with us on Facebook and LinkedIn