Home

Awesome

UI5 iconUI5 Web Components

CI npm Package Version REUSE status

What are UI5 Web Components?

Why use web components?

Where can I see them in action?

More Resources

Related Projects

OpenUI5

1. What is UI5/OpenUI5?

OpenUI5 is an open source JS framework that lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice. It's based on JavaScript, using jQuery as its foundation and follows web standards. It eases your development with a client-side HTML5 rendering library including a rich set of controls and supports data binding to different data models (JSON, XML and OData).

2. How do UI5 Web Components relate to OpenUI5?

UI5 Web Components…

UI5 Web Components are good for…

UI5 remains what it is: the best choice for…

UI5 Web Components for React

UI5 Web Components for React is a wrapper implementation around UI5 Web Components which makes using them in React even more comfortable. The current version of React (react 18) has some shortcomings when it comes to handling Custom Elements, namely the binding of boolean attributes as well as adding event listeners to custom event names like selection-change. With the help of UI5 Web Components for React, you can use the UI5 Web Components in React as if they were native React components. In addition to that, this library is also offering TypeScript definitions for all components, some complex layout components built on top of UI5 Web Components as well as Charting Components.

UI5 Web Components for Angular

UI5 Web Components for Angular is a wrapper implementation around UI5 Web Components which to make it work with Angular without needing to use the CUSTOM_ELEMENTS_SCHEMA or NO_ERRORS_SCHEMA schemas. Moreover, all Angular-specific features, such as two-way data binding and Angular Form support, work out of the box.

How to Use

  1. Install the NPM module(s) that ship the desired UI5 Web Component(s), for example if you need ui5-button:

    npm install @ui5/webcomponents
    
  2. Import the desired UI5 Web Component(s) to your app:

    import "@ui5/webcomponents/dist/Button.js"; // loads and defines ui5-button
    
  3. Use the UI5 Web Component(s) as you would use any HTML element:

    <ui5-button>Hello world!</ui5-button>
    

    For more information, see Importing UI5 Web Components and Understanding UI5 Web Components APIs.

Typescript Support

TypeScript Support is enabled for both component development and component consumption. Since version 1.11.0, we have been providing TypeScript definitions under an experimental flag, and starting from version 1.19.0, all TypeScript definitions are considered stable.

Is there a CDN I can use?

No, you are expected to import only the components (or other public APIs) that you are going to use and bundle them along with the rest of your application.

Browser Support

UI5 Web Components are supported by all major modern browsers.

BrowserSupported versions
ChromeLatest two stable releases
FirefoxLatest two stable releases
SafariLatest two stable releases
EdgeLatest two stable releases

Project Structure, Development and Build

This section might be of interest to you mainly if you need to run or build the project locally

Requirements

Note: The UI5 Web Components project is set up with the Yarn node package manager. This is because it offers functionality that the otherwise preferred npm package manager is currently lacking. Namely, the workspace setting which is currently used in the UI5 Web Components (mono-)repository. Note that npm might add this feature in the future.

Structure

The UI5 Web Components project contains several packages:

ProjectNPM PackageDescription
mainUI5 Web Components - MainBread-and-butter components (buttons, inputs, popups, pickers, tables, etc.) that are generally found in web apps.
fioriUI5 Web Components - FioriMore semantic components, specific to the Fiori UX (shell bar, side navigation, etc.) that are commonly found in SAP apps.
iconsUI5 Web Components - IconsA rich icons collection (SAP-icons), suitable for enterprise-grade apps
icons-tntUI5 Web Components - Icons TNTA rich icons collection (SAP-icons-TNT), suitable for more technical apps
icons-business-suiteUI5 Web Components - Icons Business SuiteA rich icons collection (BusinessSuiteInAppSymbols), suitable for SAP Fiori apps
baseUI5 Web Components - BaseThe UI5 Web Components framework itself
themingUI5 Web Components - ThemingTheming assets (the default theme and additional accessibility themes)
localizationUI5 Web Components - Localizationi18n functionality and CLDR assets
create-packageCreate Webcomponents PackageAn npm init script for creating new UI5 Webcomponents Packages
playgroundN/AThe playground application

How to run the project locally:

yarn # to install all dependencies
yarn start # to serve the project

A dev server will be started and the browser will open its index URL with a listing of all test pages.

How to start Website (Docs & Samples):

You can start the website app with the following commands:

yarn # to install all dependencies

# start the playground from the project root
yarn start:website

# open http://localhost:3000/ui5-webcomponents/nightly/

Note: If you wish to manually install dependencies & run the Playground you can check out our in depth tutorial

Production Build

To build the UI5 Web Components project, run the following commands:

yarn # to install all dependencies
yarn ci:releasebuild # to build the project

Afterwards, you can find the build output in the dist folder of the corresponding package folder. For example, to find the Button component (that belongs to the main package), look inside the packages/main/dist folder.

Limitations

None as of 1.24.0

Known Issues

No major bugs known. To report an issue or view the currently open issues, click here.

Support

We welcome all comments, suggestions, questions, and bug reports. Please follow our Support Guidelines on how to report an issue, or chat with us in the #webcomponents channel of the OpenUI5 Community Slack.

Contribute

Please check our Contribution Guidelines.