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
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
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
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
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
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
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.
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)
To create a new application, Select Click on the tile ‘New Project from Template’. Then do the following steps:
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
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
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.
Once the customizations are applied, the application you just created using SAP Web IDE can be deployed to any of the following
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
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 https://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