SAP Web IDE Personal Edition Setup and Create SAPUI5 Application for Beginner

Hi All,

I hope this blog post will be helpful for you to Setup SAP Web IDE personal Edition and Create SAPUI5 application.

In this blog we will cover the below topics:

1. SAP Web IDE Personal Edition SETUP
2. Create SAPUI5 application.
3. Display hello world text.

 

Prerequisites

• You are installing SAP Web IDE personal edition in one of the following operating systems:

  • Microsoft Windows (version 7 or higher)

  • Mac OS (version 9 or higher)

• JDK 1.8 Version on laptop:

  • Before using Web IDE personal edition, make sure you must and should have the JDK 1.8 version installed in your system.

        Note : If you install JDK version higher then 1.8, it will NOT work.

 

SAP Web IDE Personal Edition Setup:

Step 1 : Go to SAP Development tools  and browse to the SAPUI5-tab and download the preferred version

Step 2: Download the installation ZIP file.

 

Step 3: Extract the zipped files to

C:\Users\…..\Downloads\sap-webide-personal-edition-1.53.9-trial-win32.win32.x86_64 (1)\eclipse.

If you open the extracted folder(eclipse) then The folder-structure should look like this:

Step 4: To start the WebIDE you have to go to the folder eclipse and now double click on the orion.exe file to run the Orion Server. (marked yellow above)

Below window should show up

Step 5: Launch SAP Web IDE personal edition via the URL http://localhost:8080/webide/index.html. You will see the below screen:

 

Step 6: Before starting the Web-IDE you need an Orion account. To create new Orion account press Create a new account button highlighted in the screen. You will see the below screen:

 

If you already have Orion account then directly press three dot highlighted in point 5 screen.

You will see the below screen:

 

Step 7:  IF your Orion account created successfully and after Sign-in your Web-IDE open. You will see the below SAP Web IDE screen:

 

Create SAPUI5 Application:

Step 1: Create a SAPUI5 application from the project template

Select Development  ==> Select Workspace ==> Right click on Workspace and select New

==> Press Project from Template.

 

 

Step 2: As you see below different template options you have. You will choose any of them as per your requirements.

For example: I am selecting SAPUI5 application and press on Next button.

 

Step 3: Give Project Name and Namespace and press on Next button.

 

Step 4: You can select any one of the following View types(XML, JSON, JavaScript and HTML) as per your requirement. I am selecting View Type XML and Give the view name and press on Finish button.

 

Step 5: Expand the project(Demo) inside the Workspace folder. Select the view and add

“Hello World”  text inside the page content and save it (Ctrl + S).

 

Step 5: Run the Application

Select Project folder(Demo) and click Green button on top.

 

Step 6: Finally  seen the “Hello World” text in the Browser.

 

 

Conclusion: 

In this blog post, We have learnt how to Setup SAP Web IDE personal Edition and help to Create SAPUI5 application. This blog for pure beginner.

Like always, add your comments, thoughts and if there is room for improvement (and I’m sure there is) let me know.

 

Thank You 🙂

 

References:

• https://help.sap.com/viewer/825270ffffe74d9f988a0f0066ad59f0/CF/en-US/fb956be1440745f89f1445e605096af8.html
• https://tools.hana.ondemand.com/#sapui5
• https://help.sap.com/doc/saphelp_tm93/9.3/en-US/24/21a2c9fa574b2e937461b5313671f0/content.htm?no_cache=true

 

 

– Ram