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