Easy UI5 Generator : Scaffolding UI5 projects made easy

Easy UI5 Generator is a community-driven project by SAP to scaffold and generate SAPUI5 and OpenUI5 projects within seconds.

OpenUI5 and SAPUI5 projects often have an essential project structure, including Views, Controllers, Models, etc. Manually creating these files will take time and be prone to errors. Moreover, we may be missing the best practice guidelines from SAP.

Easy UI5 Generator

The Easy UI5 generator will quickly help to start the with basic OpenUI5/SAPUI5 project within no time to overcome these problems. The generator uses the official UI5 tooling and supports multiple deployments such as SAP BTP, SAP HANA XSA, On-Premise ABAP.

The generator is based on Yeoman; if you have not heard of yeoman, it’s an open-source Node.js based client-side scaffolding tool for modern web applications. You can find more about it here.

Now let us look step-by-step procedure on how we can install the easy-ui5 generator.

Installation Requirements

1. You should have already installed Node.js and Npm, follow the installation steps here.

2. Install Yeoman using the following terminal command.

npm i -g yo

3. After a couple of seconds, the yeoman is successfully installed.

Install Easy UI5 Generator

1. You can install the generator using below terminal command

npm install -g yo generator-easy-ui5

2. Verify the installation by running the following command, and you should see the Easy UI5 generator listed

yo

Scaffolding SAPUI5/OpenUI5 project

Run the following command to create a new project, and you need to answer a few questions along the way to complete the project creation. Hit enter on each question.

1. Create a new OpenUI5/SAPUI5 project

yo easy-ui5 project

2. Provide the name of the project

3. Enter namespace of the project

4. Choose the platform to host the application

4. Select View type

5. Choose from which location UI5 libraries/controls served from

6. Yes, to create a new directory for the project

7. Creation of the project starts and you can observe the progress

8. After some time project is successfully created. Now open the project in the Visual Studio Code editor project, and you can see the project with a proper structure based on UI5 tooling.

Run UI5 project

10. Let’s add a sample button in the View and run the project using the below command to start a local development server.

npm start

11. The UI5 demo application is running at “http://localhost:8080/index.html“

Finally, you now know about the Easy-UI5 generator; next time when you want to create a project, you can use this generator.

If you are using SAP Business Application Studio, you can still use this generator.

Target Platforms

The Easy-UI5 generator support below target platforms 

1. Static WebServer
2. SAP BTP Cloud Foundry Application Router
3. SAP HANA XS Advanced
4. SAP BTP HTML5 App Repository
5. On-premise ABAP Repository

Sub-generators

It also supports sub-generators to support recurring tasks such as.

1. Add a new View
2. Add a new Component
3. Add a new custom control
4. Add a new model
5. Add a new OPA5 test suite
6. Add a new UIVeri5 test suite

Final Words

Congrats! You have successfully learned about the Easy-UI5 generator. If you liked it ❤️, please share it! Thanks! ????

Please feel free to comment and let us know your feedback. Subscribe for more updates.