UI5con 2023 – Generate UI5 Library & Controls for UI5 Web Components

[WouterLemaire]

Introduction

In this blog post series, I’ll show how to create a Web Component and consume it in UI5! This is based on my UI5con session of 2023 together with peter.muessig .

- Vanilla Web Component: https://blogs.sap.com/2023/07/07/ui5con-2023-vanilla-web-component/
- UI5 Web Component: https://blogs.sap.com/2023/07/07/ui5con-2023-ui5-web-component/
- Generate UI5 Library & Controls for UI5 Web Components (this one): https://blogs.sap.com/2023/07/07/ui5con-2023-generate-ui5-library-controls-for-ui5-web-components/
- Consume UI5 Controls based on UI5 Web Components inside a UI5 app: https://blogs.sap.com/2023/07/07/ui5con-2023-consume-ui5-controls-based-on-ui5-web-components-inside...

After transforming my Web Component to a UI5 Web Component, time has come to bring it to UI5. We do this by generating a library with a UI5 control for each Web Component. From here it can be used inside a UI5 app as any other UI5 control.

Generate library

For generating the library we can use easy-ui5. This has a new generator for this: “library-webc”:

The generator will ask the same questions as the library generator that we all know with one additional question. It will ask for the UI5 Web Component package. This can be an npm package or a local folder. In my case, I use the folder “./spacepackage” as the UI5 Web Component project and the library are in the same root folder.

Prepare project

Open the generated project and install all dependencies using:

npm i

This template comes with two new commands in the package.json:

• ui5:prebuild


• generate

Run prebuild

Execute the prebuild with the following command:

npm run ui5:prebuild

 

This will copy all the generrated files from the UI5 Web Component dist folder into the thirdparty folder and integrate it into UI5.

This will generate a thirdparty folder with all UI5 Web Component resources:

If you compare the dist folder of the UI5 Web Component and the thirdparty folder of the UI5 Library, you’ll find all the same files except for the TypeScript files.

 

It will also integrate the resources as UI5 resources by adding the define function at the top:

Run generate

The second command to generate the UI5 controls can be triggered with the following script:

npm run generate

 

This script will generate a UI5 control for each UI5 Web Component and generated the library.js file

Now we have all the missing library files + controls:

The metadata of the controls (properties,events and aggregations) are generated based on the JSDoc in the UI5 Web Component:

• @type is used for the type of the property


• @name for the name


• @defaultValue for the name

Test the generated controls

With the UI5 Web Component resources being copied and controls generated, it is time to test the controls from in the library.

For this we need to provide an example in the kitchen and copy the image:

Once everything is in place we can test it by running the start script:

npm run start

This will open the kitchen.html page with the UI5 Control running in it. Under the hood, the UI5 control will use the UI5 Web Component resources for the rendering:

The full example is available on GitHub: https://github.com/lemaiwo/ui5-space-webcomponent-library

 

[Sebbe]

Hi,

I am trying to create a ui5 web compoment that uses svg.js. That works in the Tray.ts web component:

import {

	G, Rect, SVG, Svg, Text,

} from "@svgdotjs/svg.js";

in the ui5 bibliothke npm run ui5:prebuild and npm run generate are executed without error. However, when starting with npm run start, the svg.js is not loaded:what do I have to do to make it work?