UI5con 2023 – Consume UI5 Controls based on UI5 Web Components inside a UI5 app

[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: 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 (this one): https://blogs.sap.com/2023/07/07/ui5con-2023-consume-ui5-controls-based-on-ui5-web-components-inside...

Final test in this blog post series, use the UI5 Controls based on UI5 Web Components through a UI5 library in a UI5 app.

Run the demo app

• Clone the demo app to test the control

git clone https://github.com/lemaiwo/ui5-space-webcomponent-app.git

• Navigate to the project

cd ui5-space-webcomponent-app

• Install dependencies

npm i

• Run the app

npm start

 

And we have a UI5 app running that consumes UI5 Controls from a UI5 Library that uses UI5 Web Components underneath:

How it is connected:

Load the library

The library is loaded by defining this in the manifest.json as a dependency:

Use the control

The control can be used in the a view as any normal UI5 control and benefit of all the UI5 functionalities:

• Define the namespace at the top:

• Use the namespace with the name of the control inside the view:

Connect the library

With the new UI5 Tooling we can simply connect to the library by defining it as an npm dependency:

The full sample project is available on GitHub: https://github.com/lemaiwo/ui5-space-webcomponent-app