UI5con 2023 – Consume UI5 Controls based on UI5 Web Components inside a UI5 app
source link: https://blogs.sap.com/2023/07/07/ui5con-2023-consume-ui5-controls-based-on-ui5-web-components-inside-a-ui5-app/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
UI5con 2023 – Consume UI5 Controls based on UI5 Web Components inside a UI5 app
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-a-ui5-app/
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK