Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
WouterLemaire
Active Contributor

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

 
1 Comment
Labels in this area