Skip to Content

Introduction

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 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 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
sap-webide
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 yourSAP 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


/wp-content/uploads/2016/09/2_services_1039158.png/wp-content/uploads/2016/09/3_sap_webide1_1039159.png


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 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)sap-web-ide-hana


Step-4: Creating Custom Fiori app using Web IDE


To create a new application, Select Click on the tile ‘New Project from Template’. Then do the following steps:

           

web-development-ide

  1. Select SAP Fiori application in the drop –down and choose SAP Fiori Masterdetail Application and proceed by clicking next from the Template selection tab.
  2. In the Basic Information tab, give any project name and click on Next.
  3. 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.sap-web-ide-supports-fiori
  4. 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.
  5. You will now find the application being created in the workspace based on the customization you made. See the fig.

           custom-fiori-app-using-web-ide


Run the application and you will see the master-detail page with the data from the server as shown below


sap-web-ide-authentication


It is responsive and we can see it in mobile, desktop or tablet view


sap-web-ide-download


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.


sap-web-ide-on-premise


And now when you run the app with the mock data you will see that customer ID has been added in the detail page


sap-web-ide-tutorial


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.web-ide-sap


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
sap-web-ide-screen


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.


sap-web-ide-cockpit

You can also change its color, name or icons, etc. you will see a few more, you may chose to apply or delete them


sap-web-ide


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.


web-ide-development


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


  1. Deploy to SAPUI5 ABAP Repository
  2. Deploy to SAP HANA Cloud Platform
  3. Register to SAP Fiori Launchpad

sap-web-ide-login

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

web-ide

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)

sap-custom-web-ide

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

custom-web-ide-sap


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.

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply