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.
Step 3. New Step by step procedure will be displayed for selecting different type of templates. Select SAPUI5 Application and click Next.
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.
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.
Step 6. After finish your project would be created and project structure looks as below. All of these files are auto created.
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.
If everything is fine, then you can see application running in new tab as shown below.