Installations
npm install @ui5/webcomponents-fioriDeveloper
Developer Guide
Module System
ESM
Min. Node Version
Typescript Support
No
Node Version
20.18.0
NPM Version
lerna/7.4.2/node@v20.18.0+x64 (linux)
Statistics
1,576 Stars
5,567 Commits
269 Forks
59 Watching
174 Branches
680 Contributors
Updated on 27 Nov 2024
Languages
HTML (27.7%)
TypeScript (27.39%)
JavaScript (24.78%)
CSS (16.71%)
Handlebars (2.22%)
MDX (1.18%)
Shell (0.01%)
Total Downloads
Cumulative downloads
Total Downloads
4,269,169
Last day
6.4%
6,810
Compared to previous day
Last week
13.5%
35,603
Compared to previous week
Last month
14.7%
153,396
Compared to previous month
Last year
-5.1%
1,573,484
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
UI5 Web Components
What are UI5 Web Components?
- A rich set of enterprise-grade reusable UI elements driven by a lightweight framework (~20K gzipped for the framework part).
- Suitable for building anything from static web sites to complex web applications.
- Usable with any current or future web development framework (React, Angular, Vue, etc.).
- Implement the SAP Fiori design and follow the SAP Fiori Design Guidelines for a consistent UX.
- Created and maintained by SAP as part of the UI5 product family.
Why use web components?
- Future-proof: being web standards, they are compatible with any version of any web development framework.
- Encapsulated: the HTML/CSS in the shadow DOM are protected from interference by the web page and vice versa, making them stable in any environment and suitable not only for apps, but also for libraries and micro-frontends.
- Elegant: being custom HTML elements, they hide implementation complexity behind a single HTML tag, making them easily usable with the standard DOM APIs.
Where can I see them in action?
More Resources
- UI5 Web Components Home Page
- Configuring UI5 Web Components
- Customizing with
UI Theme Designer - Creating a Custom UI5 Web Components Package
- Developing Custom UI5 Web Components
- Micro-Frontends and Custom Elements Scoping
- Release Management
- F.A.Q.
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…
- …are not built on top of UI5, but rather lightweight and independent UI elements.
- …are not a successor of UI5, but rather a complementary offering.
- …bring the relevant UI5 qualities and SAP Fiori UX to the HTML level, usable with any web framework.
UI5 Web Components are good for…
- …web applications which already use a different web framework.
- …static web sites built without web frameworks, to just add a few interactive UI elements.
UI5 remains what it is: the best choice for…
- …building complete enterprise-ready and responsive web applications.
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
-
Install the NPM module(s) that ship the desired UI5 Web Component(s), for example if you need
ui5-button:1npm install @ui5/webcomponents -
Import the desired UI5 Web Component(s) to your app:
1import "@ui5/webcomponents/dist/Button.js"; // loads and defines ui5-button -
Use the UI5 Web Component(s) as you would use any HTML element:
1<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.
| Browser | Supported versions |
|---|---|
| Chrome | Latest two stable releases |
| Firefox | Latest two stable releases |
| Safari | Latest two stable releases |
| Edge | Latest 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:
| Project | NPM Package | Description |
|---|---|---|
main | UI5 Web Components - Main | Bread-and-butter components (buttons, inputs, popups, pickers, tables, etc.) that are generally found in web apps. |
fiori | UI5 Web Components - Fiori | More semantic components, specific to the Fiori UX (shell bar, side navigation, etc.) that are commonly found in SAP apps. |
icons | UI5 Web Components - Icons | A rich icons collection (SAP-icons), suitable for enterprise-grade apps |
icons-tnt | UI5 Web Components - Icons TNT | A rich icons collection (SAP-icons-TNT), suitable for more technical apps |
icons-business-suite | UI5 Web Components - Icons Business Suite | A rich icons collection (BusinessSuiteInAppSymbols), suitable for SAP Fiori apps |
base | UI5 Web Components - Base | The UI5 Web Components framework itself |
theming | UI5 Web Components - Theming | Theming assets (the default theme and additional accessibility themes) |
localization | UI5 Web Components - Localization | i18n functionality and CLDR assets |
create-package | Create Webcomponents Package | An npm init script for creating new UI5 Webcomponents Packages |
playground | N/A | The playground application |
How to run the project locally:
1yarn # to install all dependencies 2yarn 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:
1yarn # to install all dependencies 2 3# start the playground from the project root 4yarn start:website 5 6# 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:
1yarn # to install all dependencies 2yarn 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.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
30 commit(s) and 21 issue activity found in the last 90 days -- score normalized to 10
Reason
license file detected
Details
- Info: project has a license file: LICENSE.txt:0
- Info: FSF or OSI recognized license: Apache License 2.0: LICENSE.txt:0
Reason
security policy file detected
Details
- Info: security policy file detected: github.com/SAP/.github/SECURITY.md:1
- Info: Found linked content: github.com/SAP/.github/SECURITY.md:1
- Info: Found disclosure, vulnerability, and/or timelines in security policy: github.com/SAP/.github/SECURITY.md:1
- Info: Found text in security policy: github.com/SAP/.github/SECURITY.md:1
Reason
no binaries found in the repo
Reason
Found 27/30 approved changesets -- score normalized to 9
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: jobLevel 'contents' permission set to 'write': .github/workflows/issues-handling.yaml:9
- Warn: jobLevel 'contents' permission set to 'write': .github/workflows/merge-release-changelog.yaml:9
- Warn: jobLevel 'contents' permission set to 'write': .github/workflows/release-rc-auto.yaml:11
- Warn: jobLevel 'contents' permission set to 'write': .github/workflows/release-stable.yaml:20
- Warn: no topLevel permission defined: .github/workflows/ci-test-website.yaml:1
- Warn: no topLevel permission defined: .github/workflows/ci-test.yaml:1
- Warn: no topLevel permission defined: .github/workflows/deploy-website-auto.yaml:1
- Warn: no topLevel permission defined: .github/workflows/deploy-website-manually.yaml:1
- Warn: no topLevel permission defined: .github/workflows/deploy-website-on-release.yaml:1
- Warn: no topLevel permission defined: .github/workflows/issues-close.yaml:1
- Warn: no topLevel permission defined: .github/workflows/issues-handling.yaml:1
- Warn: no topLevel permission defined: .github/workflows/lint.yaml:1
- Warn: no topLevel permission defined: .github/workflows/merge-release-changelog.yaml:1
- Warn: no topLevel permission defined: .github/workflows/release-downport.yaml:1
- Warn: no topLevel permission defined: .github/workflows/release-experimental.yaml:1
- Warn: no topLevel permission defined: .github/workflows/release-rc-auto.yaml:1
- Warn: no topLevel permission defined: .github/workflows/release-rc.yaml:1
- Warn: no topLevel permission defined: .github/workflows/release-stable.yaml:1
- Warn: no topLevel permission defined: .github/workflows/reset-gh-pages.yaml:1
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-test-website.yaml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/ci-test-website.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-test-website.yaml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/ci-test-website.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-test.yaml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/ci-test.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-test.yaml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/ci-test.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-website-auto.yaml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/deploy-website-auto.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-website-auto.yaml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/deploy-website-auto.yaml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy-website-auto.yaml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/deploy-website-auto.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-website-manually.yaml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/deploy-website-manually.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-website-manually.yaml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/deploy-website-manually.yaml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy-website-manually.yaml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/deploy-website-manually.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-website-on-release.yaml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/deploy-website-on-release.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-website-on-release.yaml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/deploy-website-on-release.yaml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy-website-on-release.yaml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/deploy-website-on-release.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/issues-close.yaml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/issues-close.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/issues-handling.yaml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/issues-handling.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/issues-handling.yaml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/issues-handling.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/issues-handling.yaml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/issues-handling.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yaml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/lint.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yaml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/lint.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/merge-release-changelog.yaml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/merge-release-changelog.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/merge-release-changelog.yaml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/merge-release-changelog.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/merge-release-changelog.yaml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/merge-release-changelog.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-downport.yaml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-downport.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-downport.yaml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-downport.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-experimental.yaml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-experimental.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-experimental.yaml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-experimental.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-rc-auto.yaml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-rc-auto.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-rc-auto.yaml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-rc-auto.yaml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release-rc-auto.yaml:55: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-rc-auto.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-rc-auto.yaml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-rc-auto.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-rc.yaml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-rc.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-rc.yaml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-rc.yaml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release-rc.yaml:50: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-rc.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-stable.yaml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-stable.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-stable.yaml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-stable.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-stable.yaml:62: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-stable.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-stable.yaml:74: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-stable.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/reset-gh-pages.yaml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/reset-gh-pages.yaml/main?enable=pin
- Info: 0 out of 33 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 5 third-party GitHubAction dependencies pinned
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 27 are checked with a SAST tool
Reason
10 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
5.4
/10
Last Scanned on 2024-11-25
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreOther packages similar to @ui5/webcomponents-fiori
@ui5/webcomponents-icons-tnt
UI5 Web Components: SAP Fiori Tools icon set
@ui5/webcomponents-react
React Wrapper for UI5 Web Components and additional components
@ui5/webcomponents-theming
UI5 Web Components: webcomponents.theming
@ui5/webcomponents-icons
UI5 Web Components: webcomponents.SAP-icons