The definition of a configuration item components The definition of a configuration item components A container for a configuration that is specific to the form element specified in the formElement attribute. Defines an action that is used in scope of the Massaction component. The ActionDelete component provides user interface for deleting records of the DynamicRows component. A list of available actions for the Massaction component. The ActionsColumns component is a table's column responsible for displaying and performing a list of record-related actions. The Bookmarks component is responsible for storing active and changed states of data grids. It includes state of filters, columns position, applied sorting, pagination, and so on. The Button component is a UI element which allows to perform a list of predefined actions when user clicks on it. It's default display mode is the HTML "button" element which be configured to display a link. The Checkbox component is a field of the UI Form the initial display state of which is an "input" element of the "checkbox" type. It also can be displayed as the "toggle" handler or the radio button element. The Checkboxset component implements a group of selection elements type of which can be either "checkbox" (default) or "radio". The ColorPicker component uses the Spectrum and tinycolor .js libraries to make it easier to choose and implement color values. The Column component is a collection of columns and it provides an interface for such actions as showing and hiding columns. The Columns component is a collection of columns which is responsible for rendering the "table" element and displaying records of the Listing component in it. The ColumnsControls component allows to modify visibility of the table's columns. It renders a list of checkboxes that indicate whether an associated column is displayed in the table or not. Used to define an abstract instance of the UI component. Used to define an abstract instance of the UI component. DataSource component is a container for a DataProvider and exposes DataProvider's data to the UI Components tree. The Date component is a form element that implements a date input field. It should not be confused with the native "input" type="date" as it uses a custom date picker implementation provided by the mage/calendar widget. The DynamicRows component is, essentially, a dynamic collection of records that can be edited by user. Additionally it implements features like changing the position of records and navigation through the collection. The Email component is a form element that implements the HTML "input" field of type="email". The ExportButton component exports grid data to the specified data format (cvs, xml, and so on). To enable the ExportButton сomponent, add the "exportButton" element with a "selectProvider" item to the listing configuration file. Defines a form field. The Fieldset component is a container for visually grouped form elements, such as buttons and form fields. The File component is a form element that implements the HTML "input" field of type="file". UI File Uploader component is an adapter for jQuery-File-Upload plugin used in Magento. This component integrates file upload functionality with UI components. The Range component is a filter element that allows to specify search criteria by which associated fields of the listing's records will be limited to the provided boundaries. Visually this component represents two input fields for the "from" and "to" limits and type of which can be either "date" or "text". Search component allows to find records in the table that satisfy provided criteria. It displays a single input field that accepts a search query and it may be considered as a generic tool for filtering content that aggregates all other filter elements. The Filters component is responsible for rendering filters UI and applying filtering. Must be a child of the Listing component. The Form component allows performing CRUD operations on an entity. Form is a basic component. The Hidden component is a form element that implements the HTML field of type="hidden". HtmlContent is a UI component that provides the ability to process and render a layout structure or a Magento block directly inside a UI component configuration. Processing and rendering is executed on the server side. The layout structure inside HtmlContent must contain only one top-level block. The top-level block may contain as many child blocks or containers as required. All blocks inside HtmlContent are integrated into layout, and external blocks can refer to them and vice versa. Adds image gallery functionality alongside file uploader functionality. See fileUploader component documentation for more information. The Input component is a form element that implements the HTML field of type="text". The InsertForm component is used to insert Form into other components. The InsertListing component is used to insert Listing into other components. Listing is a basic component responsible for rendering grids, lists and tiles, providing filtering, pagination, sorting and other features. Toolbar component serves as a container for the listing-related elements like paging, massactions, filters, bookmarks, i.e. it aggregates all elements that serve as "tools" and renders them above the main table. It also allows to fix the position of its content along with the table's header so that they would always stay in the viewport area. The MassActions component allows selecting items in Listing and creates actions to perform with selected items. Must be a child of the Listing component. The Modal UI component implements a secondary window that opens on top of the main window. It uses the modal widget. Similar to the widget's configuration, the component's configuration allows you to set the window type and the behavior of action buttons (including linking action buttons to methods of the other UI components). The Modal component can be used for both Admin and storefronts. For recommendations about modal windows usage from the UX point of view, see the corresponding topic in the Magento Admin pattern library. The Multiline component is a collection form elements that is used to display multiple fields of the same type, the "Street Address" fields, for instance. The Multiselect component provides a check box interface for a specific listing or data set. The component is an extension for the Column component, and it allows the user to select either a collection of items or all items from the given set. The Nav component implements tabs navigation. See the Admin Design Pattern Library (Tabs) topic for information about the UI design patterns that can be implemented using the Nav component. Paging component provides navigation through the parts/pages of the table. On top of that, it creates an instance of the child Sizes component that allows to define the number of records displayed in the associated table. The Radioset component is essentially a wrapper for the Chekboxset with the input type set to the radio button. The Select component is used to provide check box interface for a list or a data set. The component allows selecting a collection of items. The SelectColumn is a column that displays values of provided records as labels of the corresponding options. The Tab component implements a tab content area. See the Admin Design Pattern Library (Tabs) topic for information about the UI design patterns that can be implemented using the Tab component. The Text component is used to display text data in elements like Form and DynamicRows. The Textarea component is a form element which implements the "textarea" field. The Wysiwyg component is an adapter for the TinyMCE editor which is used to integrate editor's instance into the UI Form. It expects to receive complete widget declaration in the "content" option which should contain both markup and the script responsible for creating editor's instance. The Url Input component allows to insert External URL and relative URL into the content. Add abilities to define custom url link types.