How to create new SAPUI5 project in Web IDE?

SAP’s Web IDE is very powerful, fully integrated development environment which supports UI5 out of the box. We covered how to get a free Web IDE trial account for practicing UI5. Before continuing with this tutorial please go through the procedure for creating a Web IDE account and get ready for building UI5 project.

Pre-requisite: Web IDE account access.

If you don’t have account yet, you can read about how to get free account from How to create SAP Web IDE account for free.

Requirement: Creating a sample SAPUI5 project in Web IDE.

Web IDE provides step by step procedure for creating project. We can create project from scratch by creating each and every file. Else we can use sample template which creates all essential basic project structure, which is very easy and clean.

Step 1. Open your Web IDE work space.

Step 2. Right-click on work space folder and select New -> Project From Template as shown below.

new-project

Step 3. New Step by step procedure will be displayed for selecting different type of templates. Select SAPUI5 Application and click Next.

new-ui5-project

Step 4. Enter your project name and namespace. Click on Next.

Namespace refers to project root folder location. Throughout the application, whenever there is a need of accessing  root folder we can use this. You can learn more about Namespaces here.

project-name

Step 5. This is optional step, but it is helpful for creating initial view of your application. Select view type and view name. After that click on Finish.

view-type

Step 6. After finish your project would be created and project structure looks as below. All of these files are auto created.

project-structure

Controller functions and application logic related files

CSS application style sheets

i18n translatable text files

model data files for the application

view UI views of application

Component.js application configuration file

index.html starting point of the application.

manifest.json metadata of application including models and routing.

Step 7. Run application.

Click on the Run button or press alt + F5 to run application.

project-structure

If everything is fine, then you can see application running in new tab as shown below.

app