Skip to Content
Technical Articles
Author's profile photo Wouter Lemaire

UI5 Control Generator – npm version

Introduction

A UI5 Control exists out of two parts, the control logic (including metadata) and the renderer. This last one defines the visualization of the control by writing JavaScript and will generate HTML at runtime. Writing the HTML by using JavaScript function is not straight forward in case of complex UI5 Controls. Although UI5 is going more and more to Web Components, we still need a control as a proxy for each web component. In both cases, it still makes sense to have a control generator as I made before in Web IDE:

Custom control generator: https://blogs.sap.com/2016/11/27/custom-ui5-control-generator-sap-web-ide-plugin/

Custom control generator version 2: https://blogs.sap.com/2018/09/04/ui5-control-generator-v2-sap-web-ide-template/

 

Since then, I never made time to migrate this to the new control renderer syntax or make it IDE independent. So, I was more than happy when Robin Van Het Hof reached out to me about the control generator. He really triggered me to give it second life and make a third version.

This time I did not want to have something that depends on any specific IDE. I wanted to follow the strategy of the UI5 tooling to make it IDE independent. As a solution I came up with an NPM package (VSCode plugin would be an option but would not be as open as NPM).

 

Installation

Install it as a npm dev dependency into your project:

npm install --save-dev ui5-control-generator

 

Usage

Provide any html file in your project and run the following script in your project from in a terminal or create a npm script:

npx ui5-control-generator --ns <project-namespace> --t TS

 

Example of a script: https://github.com/lemaiwo/TSDemoCustomControlGenerator/blob/f57d38663a2760456f87f62916032a6b1a05b750/package.json#L19

 

The tool requires the namespace of the project and the type of app (JavaScript or TypeScript) to be executed. It also has some optional parameters:

  • –ns, –namespace: namespace of the project (including the project name) which will be used for the name and namespace of the control
  • –t, –type: Define the type of syntax, JavaScript or TypeScript.
  • –p, –path: Optional parameter to define a specific folder to search for html files, default will search in all folders
  • –s, –split: Split Control logic and renderer in two files, default will split. Values can be true or false
  • –ow, –overwrite: Overwrite already existing files with the same name, default will not overwrite. Possible values can be true or false.
  • –loglevel: Set the console logging verbosity; options are: “error”, “warn”, “info”, “debug”, “trace”; default level is “info”

Provide any html file that contains the html for the control in your project. I do this in the control folder where I would like to have the control, e.g.:

https://github.com/lemaiwo/TSDemoCustomControlGenerator/blob/main/src/control/BusinessCard.html

After running the script, you have the control files generated in the same folder as the html file. For TypeScript you will also have to run ‘@ui5/ts-interface-generator’ for generating the types of the control:

https://github.com/lemaiwo/TSDemoCustomControlGenerator/tree/main/src/control

Result

The result is not completely finished but already shows the functionality of the generator:

 

Resources

 

Control generator GitHub: https://github.com/lemaiwo/ui5-control-generator

Control generator on NPM: https://www.npmjs.com/package/ui5-control-generator

Demo app JavaScript: https://github.com/lemaiwo/TSDemoCustomControlGenerator

Demo app TypeScript: https://github.com/lemaiwo/TSDemoCustomControlGenerator

 

Contribution

Feel free to contribute and improve the control generator.

Control generator GitHub: https://github.com/lemaiwo/ui5-control-generator

 

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Jorge Sousa Villafaina
      Jorge Sousa Villafaina

      Thanks a lot! This plugin has always been one of my favorites 🙂

      Author's profile photo Robin van het Hof
      Robin van het Hof

      Thanks Wouter for kickstarting this project into life again!

      For me, this has proven to be a tremendous timesaver, especially when creating rather complex custom controls with lots of properties and (nested) aggregates. Absolutely stunning work you have done here!

      Author's profile photo Volker Buzek
      Volker Buzek

      nice!

      may I suggest making it compatible with easy-ui5? there‘s already a control generator (https://github.com/ui5-community/generator-ui5-control) that could get equipped with a „typescript“ switch - when chosen, then your generator could be used!

      having your generator as part of easy-ui5 would prevent tooling fragmentation and make it available via a single point of entry. and „yo easy-ui5 custom-control —ts“ (or similar) just reads cool 😎

      whaddaya think?!?

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      That was part of the plan but I’m just not sure how to make it fit as it requires an html file as input. The generators start from nothing, that’s why I decided to do it the same way as the type definition generator for controls.

       

      Author's profile photo Volker Buzek
      Volker Buzek

      hmmm - Xmas Hackathon to try out a few things and eventually find a way to align the generators?

      Probably with more UI5ers jumping in?

      With Glühwein and everything?!?