Using Additional Features

Several UI5 Web Components packages offer additional features. This section explains what these are and how to use them.

What Are Additional Features

These are features that logically belong to a component, but are not needed for the component’s most common use cases, thus not part of the component’s code by default.

The goal of features is to keep the components’ code base minimal and allow users greater flexibility over what code to bundle.

If you intend to use a component’s additional feature, your app must import it explicitly.

Importing Additional Features

Import the feature file from the respective NPM package:

import "@ui5/<PACKAGE-NAME>/dist/features/<FEATURE-NAME>.js

Currently, only a few components offer additional features:

Package Affects Feature Import Description
main ui5-color-palette @ui5/webcomponents/dist/features/ColorPaletteMoreColors.js Support for “more colors dialog” for the color palette component
main ui5-input @ui5/webcomponents/dist/features/InputSuggestions.js Support for input suggestions while typing
main Multiple (ui5-input, ui5-date-picker, etc…) @ui5/webcomponents/dist/features/InputElementsFormSupport.js Support for using input components in forms
fiori ui5-shellbar @ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js Support for a better (but bigger in size) animation for the “co-pilot” button in the shellbar component
base Framework @ui5/webcomponents-base/dist/features/OpenUI5Support.js Integration with the OpenUI5 framework, allowing synchronization and resources re-use
base Multiple components within all libraries @ui5/webcomponents-base/dist/features/F6Navigation.js Support for F6 fast groups navigation
localization Multiple (ui5-date-picker, etc…) @ui5/webcomponents-localization/dist/features/calendar/Buddhist.js Buddhist calendar support
localization Multiple (ui5-date-picker, etc…) @ui5/webcomponents-localization/dist/features/calendar/Islamic.js Islamic calendar support
localization Multiple (ui5-date-picker, etc…) @ui5/webcomponents-localization/dist/features/calendar/Japanese.js Japanese calendar support
localization Multiple (ui5-date-picker, etc…) @ui5/webcomponents-localization/dist/features/calendar/Persian.js Persian calendar support

For example:

import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js;";

Next: Wrapping Up