Skip to Content

Recently, I joined a new team and I was explaining different ways to create ui5 prototypes (hopefully, eventually, real applications; using build  , the on-premise web workbench  <host>:<port>/sap/web/ide/editor, and now via the SAP Cloud Platform ) based on experience from prior engagements. On this blog, I wanted to showcase some steps to create a custom application from the SAP Cloud Platform (SCP) WEB IDE. Same blog can be found en español

The SCP offers several services. The one I am going to write about today is about the WEB IDE. Some of these services are available to use but disabled by default. The initial step is to make sure this service, SAP WEB IDE, is enabled.

Once you log in to the SCP, look on the left navigation panel, and select Services. Then, find SAP WEB IDE, amongst others, and select it.


You may need to wait a few minutes if it was not enabled and you just enabled it – You will see its status turn to green. Once enabled, click on Go To Service link.



There are several ways to create a UI5 application, or more formally known as a Fiori app (whether it is custom or an extension). In my example, I will showcase how to start and get you going to create a simple application.


When you first come to the WEB IDE, you will have a Workspace folder as your starting point. You can right click on it, then  New à Project à from Template (other options are: to deploy, to create a Fiori mobile plug in, an extension, Git (clone repository), etc.)



Follow the steps on the wizard. * one thing I noticed here is that one of the options given to me is to use version 1.48 (todays is 8/30/17), however, version 1.48 is not available on sapui5 yet, it is available on openui5, so I wonder how this will end up (if I got your attention, keep reading)



The nice thing about using a template, is that you can see what your app could look like once you are almost completed with it. After all, a template is just that (someone else already created something and you are using the boilerplate code for your implementation/ put your flavor to it). Next I show one of the available templates



Once you select the type of template, please follow the wizard steps:

Give it a name, and optionally a namespace

You can also name your initial view (View1 below)


Once finished with the wizard, you should get the project template code on your WEB IDE Workspace, as shown next


*** however… Notice the ui5 version did not match between what I had originally selected ***



And what showed on my manifest.json file (1.40.12) *** on the plus side, this tells me that it is possible and it allows us to change the ui5 version provided by the template, however, we have to make sure that also the boostrapped version is available. (look at the script tag where the ui5 version is referenced on your index.html file and make adjustments accordingly)



If and when you run your index.html file for the first time (click on the Green Play button to run), make sure you have popups blocked enabled, otherwise you need to allow them by clicking on the icon below and accepting the prompt.


SO now that SCP has done the hardest part (app set up and configuration) … next is to make sure you can put additional content into your application.

Prior to adding content (such as views, controllers, and any other files), it is important to know what and how to develop an application on this framework:

  • MVC – Model-View-Controller (Explained on this blog)
  • JSON vs OData Data models. It is very important to understand the difference between client side model and server side model, when to use each and how to decide which one to use (or use a hybrid approach)

I normally go about this by having a mix approach as I will probably need to use an OData model (server side) to retrieve some data and use on my application, however, when I know that there is client side interaction and maybe some logic that would alter the behavior or my UI, then I use a JSON model.

  • What is (and is not) available on the framework. In some of my other apps, I have used libraries like momentjs (parse, validate, manipulate dates), d3js (js charting library)
  • Where to see some control examples: however, possibilities are endless


Benefits and Advantages of using SCP WEB IDE:

  • App project set up (using templates, folders within project, even all the configuration files needed such as the Component, manifest.json, etc.)
  • Ease of use of WEB IDE (navigation, coding, syntax, easy to follow wizard, messages)
  • Ease of deployment to GIT (huge!)
  • Ease of unit testing (Google dev tools, also you can set up a folder within your project for your unit testing)
  • Immediate able to switch between projects (if you have more than 1)


I have been using my trial account for a while and I have been able to learn a bunch from it. Additionally, I have created several blogs by using this (free) medium. One of my mentors told me once that the only way to learn programming is by programming and SCP has allowed me to accomplish this goal. Of course, there are other ways to supplement my learning such as openSAP, scn, youtube, code jam events, books (my least favorite way of learning programming) but ultimately, coding can be achieved via SCP.


Thank you again for reading this blog. Please share your experiences and any road blocks if you had any while developing your custom application on the SCP WEB IDE


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