Beginning SAPUI5 Development Using WEBIDE — Personal Edition

Discussion Forum Design Tools Beginning SAPUI5 Development Using WEBIDE — Personal Edition
Viewing 4 posts - 1 through 4 (of 4 total)

diseño de paginas web
In this tutorial we are gonna start developing SAPUI5 applications using SAP’s cutting edge Web IDE, tailored especially for frontend applications.

What is SAP Web IDE, SAPUI5 and OpenUI5?

SAP Web IDE is integrated development environment for developing javascript apps using OpenUI5 and SAPUI5 frameworks.

According the Andreas Kunz from SAPUI5 is;

It is a JavaScript UI library consisting of a feature-rich core 
and a really large number of UI controls which are organized in a 
handful of libraries.

And OpenUI5 is the open source version of this library. If you want to dig more you can always check the Github page for OpenUI5.

To start developing apps first of all you have to download WebIDE using link below.

You can choose one of these platform mentioned in webpage. I’ll continue with Windows version but procedure is the same on all systems.

After downloading suitable version of your IDE just extract the content into a folder. In this folder you will see executable application named as ‘orion’.

Before existence of Web IDE we were all using Eclipse for development of SAPUI5 applications. You just needed to download and install required plugins from Hana repository.

You can find the link and details about ABAP Development tools in the link below.

You can still use Eclipse for your projects but for usability and easier integration, I highly recommend Web IDE for development.

After clicking ‘orion’, a command line application will popup and wait after finishing configuration. Because of Web IDE is web-based application, Orion configures suitable environment for our usage. You just need to open your favourite IDE and type the url below;


This url will redirect you into the landing page of your local Orion instance. From this point you have to create user and password for your local workspace.

After successful login, you can finally open Web IDE.

There are lots of options after you log in Web IDE, we will get in deep most of them but for this tutorial we’ll just create sample page with labels.

Click on ‘New Project From Template’ button.

You can choose few different templates for your project, feel free to try all of them. For this tutorial we will use SAPUI5 application template.

And our first application is ready!

As you now SAPUI5 is a MVC framework. MVC is one of the most used design pattern in the world of programming. Just check the diagram below to realise how simple it is.

In this case I will just show you view part of our application, but in next chapters we will deep dive in details.

Go ahead and enter MainView.view.xml and change title of application to ‘Hello SAPUI5!’ and add label tag between content tags.

(View here

Save and click on green play button to review your app.

And here is your first app! Congratulations!

Thank you and happy coding! 🙂

SAP UI5 Associate Consultant
Intellect Bizware Services Pvt. Ltd.



Thanks for this great post to start with. I have created the app described as below but my title is coming in the top left corner, how can I align it in the centre.




Sopra Steria


Thanks for this amazing post.

Could you please let us know where is the rest of the content for this topic like routing etc. for the WebIDE personal Edition.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.