UI5con 2024 - Bring Your Own Design System

How do you combine the OpenUI5/SAPUI5 programming model with a design system that makes its controls available as Web Components? Since OpenUI5/SAPUI5 1.120, the framework supports the integration of any Web Components. This makes it possible, for example, to natively embed own Web Components of your design system which are created with Stencil. The integration embeds the Web Components in a way that they can be used naturally in XMLViews, like with standard UI5 controls, and can be bound with data binding. Learn how you can also make use of the Web Components base class in OpenUI5/SAPUI5 to also integrate your Web Components and get inspired by the solution to generate a custom UI5 library providing the Web Components control wrappers for the native ones.

1. Bring Your Own Design System Integration of Web Components in OpenUI5/SAPUI5 Peter Muessig, SAP SE June 5 th , 2024

2. “What’s the best/easiest way to integrate Web Components into OpenUI5*?” Holger Schäfer, UI5con 2023 native * OpenUI5 also stands for SAPUI5

3. “OpenUI5 only supports UI5 Web Components!” Fake News

4. “Native Web Components can only be embedded using HTML in XMLViews !” Fake News

5. “Is it possible to use my own native Web Component with OpenUI5?” !! YES !!

6. kickstand-ui Kickstand UI is a design system and pattern library built with Web Components (using Stencil) with an OSS friendly license

7. How to Wrap a Native Web Component? TASK LIST 1. Create UI5 App

8. UI5 Tooling Extension for NPM packages Enables the direct usage of NPM packages in UI5 applications/libraries Configuration free (no shimming needed!) Converts any module into a UI5-AMD-like module ( sap.ui.define ) Supports loading and inclusion of assets (CSS, images, …) Provides a custom middleware: ui5-tooling-modules-middleware Extends the development server to load the modules and assets from NPM packages Provides a custom build task: ui5-tooling-modules-task Integrates the used modules and assets in the build output to allow to distribute the project Modules and assets can be included into the namespace of the application/library npm install ui5-tooling-modules --save-dev

9. How to Wrap a Native Web Component? TASK LIST 1. Create UI5 App 2. Install Dependencies

10. How to Wrap a Native Web Component? TASK LIST 1. Create UI5 App 2. Install Dependencies 3. Configure UI5 tooling ext.

11. How to Wrap a Native Web Component? TASK LIST 1. Create UI5 App 2. Install Dependencies 3. Configure UI5 tooling ext. 4. Include bootstrap script

12. Web Components Base Class Base Class to wrap Web Components as UI5 Control Lifecycle Integration (Databinding, Rendering, …) Seamless usage in SAPUI5 programming model Mapping Metadata for ( API ): HTML-Tag Properties Aggregations Events Methods Generic Renderer leveraging Metadata sap/ ui /core/ webc / WebComponent ( API ) WebComponent.extend (" my.WebComponent ", { […] metadata: { tagName : "my-web-component", properties : { […] }, aggregations : { […] }, associations : { […] }, events : { […] }, getters: [ " getterName ", … ], methods: [ " methodName ", … ], } […] });

13. Web Components Base Class sap /ui/ core / webc / WebComponent > metadata > properties WebComponent.extend (" my.WebComponent ", { […] metadata : { properties : { " propertyName ": { type: " string|number|boolean|object|any |…", mapping : { type: " property |style|textContent|slot|none ", [ to ]: " attribute -name", [ formatter ]: " mapPropertyValue " } } } } […] }); new my.WebComponent ({ propertyName : " value " }); < my -web- component attribute -name=" value " />

14. Web Components Base Class sap /ui/ core / webc / WebComponent > metadata > aggregations WebComponent.extend (" my.WebComponent ", { […] metadata : { aggregations : { " aggregationName ": { type: " sap.ui.core.Control ", [ slot ]: " slotName " } } } […] }); new my.WebComponent ({ aggregationName : [ new Button({ … }) ] }); < my -web- component > < button slot =" slotName "/> </ my -web- component >

15. Web Components Base Class sap /ui/ core / webc / WebComponent > metadata > associations WebComponent.extend (" my.WebComponent ", { […] metadata : { associations : { " associationName ": { type: " sap.ui.core.Control ", mapping : { type: " property ", [ to ]: " attribute -name", [ formatter ]: " mapAssociationValue " } } } } […] }); new my.WebComponent ({ aggregationName : [ new Button({ … }) ] }); < my -web- component attribute -name=" btn_ID " />

16. Web Components Base Class sap /ui/ core / webc / WebComponent > metadata > events WebComponent.extend (" my.WebComponent ", { […] metadata : { events : { " eventName ": { […] } } } […] }); new my.WebComponent ({ eventName : () => { … } }); Control# attachBrowserEvent ( " eventName ", … )

17. How to Wrap a Native Web Component? TASK LIST 1. Create UI5 App 2. Install Dependencies 3. Configure UI5 tooling ext. 4. Include bootstrap script 5. Implement Wrapper Web Component

18. How to Wrap a Native Web Component? TASK LIST 1. Create UI5 App 2. Install Dependencies 3. Configure UI5 tooling ext. 4. Include bootstrap script 5. Implement Wrapper Web Component 6. Use it in XMLView

19. How to Wrap a Native Web Component? TASK LIST 1. Create UI5 App 2. Install Dependencies 3. Configure UI5 tooling ext. 4. Include bootstrap script 5. Implement Wrapper Web Component 6. Use it in XMLView 7. Run it and enjoy…

20. “This is tedious, isn’t it? Is there a better way to enable my Design System for OpenUI5?” !!!! SURE !!!!

21. Productive Solution: Generator & UI Library Generator UI Library

22. Generator for Kickstand Web Components kickstand-ui (npm package created with stencil) collection- manifest.json … Button.js FormField.js UI5 Button.js … FormField.js Stencil stencil-ui5-generator Metadata

23. UI Library for Kickstand Web Components UI Libraries enable reusability UI Libraries bundle Controls (and Wrappers) Applications can simply reference UI Libraries Assets can be loaded once via the UI Library modules UI Libraries ensure maintainability Changes can be managed and rolled-out centrally UI Libraries optimize performance UI Library provides preloads for optimized loading UI Libraries for publishing UI Library can be published to npm for easy consumption What are the benefits of UI Libraries?