Easy UI5 Generator : Scaffolding UI5 projects made easy

0
2713

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.

Also Read: Getting started with UI5 Tooling

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
Easy UI5 Generator Yeoman Installation Step1

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

Easy UI5 Generator Yeoman Installation Step2

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
Easy UI5 Generator Yeoman Installation Step3

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.

yo easy-ui5 project

Create a new OpenUI5/SAPUI5 project

Easy UI5 Generator Step1

Provide the name of the project

Easy UI5 Generator Step2

Enter namespace of the project

Easy UI5 Generator Step3

Choose the platform to host the application

Easy UI5 Generator Step4

Select View type

Easy UI5 Generator Step5

Choose from which location UI5 libraries/controls served from

Easy UI5 Generator Step6

Yes, to create a new directory for the project

Easy UI5 Generator Step7

Creation of the project starts and you can observe the progress

Easy UI5 Generator Step8

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.
Easy UI5 Generator Step9

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
Easy UI5 Generator Step10

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

Easy UI5 Generator Step11

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
Easy UI5 Generator Step12

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.