A list of Magento UI components
What’s in this topic
This page will contain a list of all Magento UI components. This topic is being updated.
Magento UI components
Form
- UI Component: Form
- Link to constructor: form.js
- Node name in
definition.xml:<form> - Is top-level: Yes
- Top-level parent component: -
- Description: Form component allows performing CRUD operations on an entity.
- Has server-side template: default.xhtml
Listing
- UI Component: Listing
- Link to constructor: listing.js
- Node name in
definition.xml:<listing> - Is top-level: Yes
- Top-level parent component: -
- Description: Listing is a basic component responsible for rendering grids, lists, and tiles.
- Has server-side template: default.xhtml
Fieldset
- UI Component: Fieldset
- Link to constructor: fieldset.js
- Node name in
definition.xml:<fieldset> - Is top-level: No
- Top-level parent component: Form
- Description: Container for visually grouped form elements (i.e. buttons, form fields.)
- Has server-side template: No.
Field
- UI Component: Field
- Link to constructor: abstract.js
- Node name in
definition.xml:<field> - Is top-level: No
- Top-level parent component: Form
- Description: Form field’s abstract component.
- Has server-side template: No.
Group
- UI Component: Group
- Link to constructor: group.js
- Node name in
definition.xml:<multiline> - Is top-level: No
- Top-level parent component: Form
- Description: Container for visually grouped fields close together with a single label.
- Has server-side template: No.
Tab
- UI Component: Tab
- Link to constructor: tab.js
- Node name in
definition.xml:<tab> - Is top-level: No
- Top-level parent component: Form
- Description: Area for the content accessed by clicking on the Nav.
- Has server-side template: No.
Nav
- UI Component: Nav
- Link to constructor: tab_group.js
- Node name in
definition.xml:<nav> - Is top-level: No
- Top-level parent component: Form
- Description: Creates a navigation bar with individual tabs.
- Has server-side template: No.
Insert
- UI Component: Insert
- Link to constructor: insert.js
- Node name in
definition.xml:<container> - Is top-level: No
- Top-level parent component: Form
- Description: Abstract component (that is extended by two other components: InsertForm and InsertListing).
- Has server-side template: No.
Insert Form
- UI Component: Insert Form
- Link to constructor: insert-form.js
- Node name in
definition.xml:<insertForm> - Is top-level: No
- Top-level parent component: Form
- Description: Extends ‘Insert’, allows to dynamically visually insert a Form component.
- Has server-side template: No.
Insert Listing
- UI Component: Insert Listing
- Link to constructor: insert-listing.js
- Node name in
definition.xml:<insertListing> - Is top-level: No
- Top-level parent component: Form
- Description: Extends the Insert component, allows to dynamically visually insert a Listing component.
- Has server-side template: No.
Modal
- UI Component: Modal
- Link to constructor: modal-component.js
- Node name in
definition.xml:<modal> - Is top-level: No
- Top-level parent component: Form
- Description: Wraps modal widget functionality into the modal UI component.
- Has server-side template: No.
Button adapter
- UI Component: Button adapter
- Link to constructor: button-adapter.js
- Node name in
definition.xml:<container> - Is top-level: No
- Top-level parent component: Form
- Description: Wraps the buttons and adds to a form created by the UI component. For example, this component can be used to create a button bar.
- Has server-side template: No.
Form provider
- UI Component: Form provider
- Link to constructor: provider.js
- Node name in
definition.xml:<dataSource> - Is top-level: No
- Top-level parent component: Form
- Description: Provides data for a form.
- Has server-side template: No.
- Paging
- Filters
- FilterSearch
- FilterSelect
- FilterRange
- FilterInput
- FilterDate
- ContainerMassAction
- Actions
- Action
- ActionDelete
- Column
- Columns
- ActionsColumn
- SelectionsColumn
- Component
- Container
- Fieldset
- Field
- Bookmark
- InsertForm
- InsertListing
- ExportButton
- ColumnsControls
- ListingToolbar
- DynamicRows
- HtmlContent
- Button
- DataSource
There is a <container> node in the definition.xml file. Any UI components that are not represented elsewhere in the definition.xml should use the <container> node.