DOCSEARCHbyAlgolia
Submit Docs

UI5 Web Components

repository·main·Indexed 23 days ago

https://github.com/ui5/webcomponents

An open-source, enterprise-grade toolkit of reusable UI elements based on web standards and SAP Fiori design guidelines. Framework-agnostic and compatible with React, Angular, Vue, OpenUI5/SAPUI5, and plain HTML/JS. Includes the @ui5/webcomponents-base package for core functionality, @ui5/webcomponents-ai for experimental AI-related interaction patterns, and dedicated wrappers for React and Angular.

Tokens
250.7K
Snippets
546
Records
1.4K
Agent score
80%

What's inside UI5 Web Components

  1. Overview of UI5 Web Components

    main

    UI5 Web Components is an open-source, enterprise-grade toolkit of reusable UI elements built on Web Component standards. It is designed to be framework-agnostic, meaning it can be used in any web development stack (React, Angular, Vue, etc.).

    Key characteristics include:

    • Enterprise Standards: Built-in support for accessibility, themeability, and internationalization (i18n).
    • SAP Fiori Design: Adheres to SAP Fiori design guidelines for a consistent user experience.
    • AI-Ready: Includes dedicated AI components for conversational/generative interfaces and is optimized for AI-assisted development (via MCP server and llms.txt).
    • Simplicity: Uses standard HTML custom elements, allowing usage via standard DOM APIs.

  2. Overview of UI5 Web Components - Fiori

    main
    The @ui5/webcomponents-fiori package provides essential building blocks required to implement the Fiori UX concept. It includes high-level layout components and specialized UI elements such as the ShellBar (a common header), SideNavigation, and various dialogs and views designed to follow SAP Fiori design guidelines.

  5. Supported Components for Drag and Drop

    main

    UI5 Web Components provides built-in drag and drop support for several component types. You can use these to reorder items or move them between different components.

    Lists and Trees

    • ui5-list: Lists with movable items.
    • ui5-li: Draggable list items.
    • ui5-li-custom: Custom draggable list items.
    • ui5-tree: Trees with movable items.
    • ui5-tree-item: Draggable tree items.
    • ui5-tree-item-custom: Custom draggable tree items.

    Tables

    • ui5-table: Tables with movable rows.
    • ui5-table-row: Draggable table rows.

    Tab Containers

    • ui5-tab-container: Tab containers with movable tabs.
    • ui5-tab: Draggable tabs.

    Other

    • ui5-li-group: List groups that support drag events.

  6. Use UI5 Web Components - AI

    main

    The @ui5/webcomponents-ai package provides web components designed for AI-related visual and interaction patterns.

    Important Considerations:

    • Experimental Status: This package is under active development and is considered experimental. Component APIs are subject to change.
    • Theme Support: This package currently supports Horizon themes only.
    • Availability: Available since version 2.0.

  7. Understand the purpose of UI5 Web Components - Tools

    main
    The tools package provides the underlying libraries, configuration files, and build artifacts required by other UI5 Web Components packages. It serves as a foundational layer for packages like @ui5/webcomponents (main) and @ui5/webcomponents-fiori.

  9. Understand the UI5 Web Components package structure

    main

    The UI5 Web Components project is organized as a monorepo containing several specialized packages. Depending on your needs, you can install specific packages rather than the entire suite:

    • @ui5/webcomponents: The main package containing core components like buttons, inputs, popups, pickers, and tables.
    • @ui5/webcomponents-fiori: Semantic components specific to the Fiori UX (e.g., shell bar, side navigation).
    • @ui5/webcomponents-icons: The standard SAP-icons collection.
    • @ui5/webcomponents-icons-tnt: The SAP-icons-TNT collection for technical applications.
    • @ui5/webcomponents-icons-business-suite: BusinessSuiteInAppSymbols for SAP Fiori apps.
    • @ui5/webcomponents-base: The underlying framework for all components.
    • @ui5/webcomponents-theming: Default and accessibility themes.
    • @ui5/webcomponents-localization: i18n functionality and CLDR assets.
    • @ui5/create-webcomponents-package: A CLI tool (npm init) to scaffold new UI5 Web Component packages.

  11. Use the Search component

    main

    The Search component (part of @ui5/webcomponents-fiori) provides a robust interface for searching through data. It supports features such as:

    • Filtering: Real-time filtering based on user input, including typeahead and highlighting suggestions.
    • Advanced Filtering: Customizing the filtering experience via a filterButton slot.
    • Byline Items: Displaying rich metadata (like images and descriptions) alongside search results.
    • Interactive Items: Including interactive elements (actions) directly within search items.
    • Loading States: Visual indicators for asynchronous search operations.
    • Show More: Implementing 'Show More' functionality for paginated or extended results.