SAP Web IDE is a web-based development environment with which SAP aims to give developers a centralized cloud-based tool for developing SAP UI5 business applications. Web IDE gives you access to features such as code generation from existing OData sources, code completion, context-aware help from the API reference, testing applications with mock data and integrated version control using git.

UI Look and Feel

The interface of Web IDE is sleek and polished with a very pleasing aesthetic. Attractive user interfaces like these are part of SAP's push towards better user experiences for the end-users of their products. My opinion is that by providing the developer with an attractive IDE they hope to inspire better UI design, and it works.

Code Completion

The IDE gives the developer code completion options that explain the arguments that functions accept. In this example we see that the constructor for the Page control has two arguments, both optional. The first argument is a string ID and the second is a settings object.

Context-Aware Help

As a developer, most of my time is spent searching an API reference for the information I need. With context-aware help, finding the right information is fast and easy.

Version Control

Git is fully integrated into Web IDE. Next to each file in the project explorer a coloured dot indicates whether a file is unchanged, changed, deleted or added. You can also commit changes and push changes to a remote repository straight from within the IDE.

Code Generation

The automatic code generation of SAP Web IDE is arguably the most powerful feature for enterprise software developers. Starting with an OData service, Web IDE can generate a fully functional UI5 application just by inspecting the metadata of the OData service. In this example we will be generating an app from the Northwind test OData service hosted by odata.org.

The first step is to select the type of app we wish to generate. In this case our goal is to create an app that can view the data in the Northwind OData source. For this situation the SAPUI5 Master Detail Application will be ideal.

We give the project a name...

We now select the OData service we want to use in order to generate the code. After clicking the Test button we can see the structure of the OData service in the right list box.

Next up is to fill out a form giving the wizard details as to which of the entity sets we want to use and which properties we want to display. In this case we want to view the collection of Customers.

After the form is filled out the wizard can be finished and the code is generated automatically. Click Run to view the generated app.

The generated app gives the developer a significant head start with full reading and routing functionality already put in place.

The greatest strength of SAP Web IDE is also its greatest weakness: you have to be connected to the internet in order to use it. This is certainly the case if you are developing on the SAP Web IDE instances hosted by SAP. In a coming blog post I will demonstrate how to install Web IDE on a local machine to allow for offline development.

If you would like a live demo of the SAP Web IDE, or understand how it could speed your SAP custom application development e.g. extend Fiori Applications, please contact us.

Next Post Previous Post