UI5 Web Components

UI5 Web Components are custom HTML elements. A developer installs an npm package, imports the components the app needs and uses them as tags, for example a button or a shell bar, like any other HTML element.

The mechanism has four parts:

1. Custom Elements register each component as its own tag, so the browser knows how to render and update it.
2. Shadow DOM encapsulates each component's markup and styles, so the page's CSS and the component's CSS do not interfere.
3. Theming comes from SAP's theming parameters as CSS variables, which is how the components follow SAP Horizon or Quartz and can take a custom theme from the UI theme designer.
4. Bundling is the app's job: there is no official content delivery network, so only the imported components end up in the app's build.

The components are distributed across packages: core controls such as inputs, lists, tables and dialogs; SAP Fiori-specific controls such as the shell bar, wizard and side navigation; AI-related controls; and the icon set. UI5 Web Components are therefore a control library that any web stack can consume, not a runtime that owns the app.

The decision criterion is which framework owns the application.

Use UI5 Web Components when:

• the app is already built with React, Angular, Vue or another web framework and should look like SAP Fiori;
• a static site or portal needs a few interactive SAP Fiori-style elements without a full framework;
• the app is a micro-frontend that must stay isolated from the page it runs in.

Use SAPUI5 when:

• the app is an SAP Fiori app in SAP S/4HANA or the SAP Fiori Launchpad;
• the app needs OData models, routing, the SAP Fiori elements floorplans or key user adaptation;
• the team works inside SAP's standard tooling and lifecycle for SAP Fiori apps.

For Alder Manufacturing, a React-based supplier portal for Cedar Office Supply and Bright Freight is a typical UI5 Web Components case; an approval app for purchase requisitions in the launchpad is not. UI5 Web Components fit when the web framework is a given and SAP Fiori is the visual standard.

• React: UI5 Web Components for React wraps the components so they behave like React components, with typed properties and events. The wrapper adds layout components and charting components of its own.
• Angular: UI5 Web Components for Angular provides wrappers that support Angular forms and two-way binding without schema workarounds.
• Vue and plain JavaScript: the components are used directly as custom elements.
• SAPUI5: an SAPUI5 app can require a UI5 Web Component like a regular control. SAPUI5 maps properties, slots, events and methods to its own properties, aggregations, events and methods. The setup uses the ui5-tooling-modules extension of the UI5 CLI to bundle the npm packages.

The older SAPUI5 wrapper libraries for web components (sap.ui.webc.main, sap.ui.webc.fiori, sap.ui.webc.common) were deprecated in SAPUI5 1.120 and removed in 1.147, so new work uses the direct integration. UI5 Web Components connect to each framework through thin wrappers rather than through a framework of their own.

• No application framework. There are no models, no OData binding, no routing and no component lifecycle. The host framework or the team supplies them.
• No floorplans. List reports, object pages and other SAP Fiori elements floorplans do not exist as ready-made pages; the team composes them from components.
• No launchpad integration out of the box. Running such an app inside the SAP Fiori Launchpad or SAP Build Work Zone needs an integration approach of its own; the ABAP-based launchpad, for example, can integrate it through the URL application type.
• Not every SAPUI5 control has an equivalent. The component set is broad but smaller than SAPUI5's full library list.
• Upgrades are the team's job. Because components are bundled into the app, new versions arrive only when the app is rebuilt and redeployed.

None of this is a defect: UI5 Web Components deliberately leave architecture decisions to the host framework.

1. Looking for a content delivery network. The project expects apps to bundle only the components they import. Fix: add the packages to the build pipeline.
2. Mixing major versions. Version 2 changed APIs compared with version 1. Fix: upgrade all @ui5/webcomponents* packages in lockstep and follow the migration notes.
3. Treating SAP Fiori controls as SAP Fiori compliance. The controls follow the SAP Fiori design; page layout, navigation and wording still have to follow the SAP Fiori Design Guidelines.
4. Keeping the old SAPUI5 wrapper libraries. Apps that still use sap.ui.webc.* stop working on SAPUI5 releases where those libraries are removed. Fix: migrate to the direct web component integration.
5. Forgetting theme assets. Custom themes and the SAP 72 font come from SAP's theming content; check that the build serves them.

Most UI5 Web Components issues come from build and version management, not from the components themselves.