Abhishek Singh Software Engineer
Abhishek SinghSoftware Engineer
uiComponent In Magento2
What is uicomponent in magento2?
=> New approach.
=> Designed for simple and flexible user interface (UI) rendering.
=> Responsible for rendering result page fragments.
Example of Magento1.x layout XML code<!-- #File: app/design/adminhtml/default/default/layout/catalog.xml -->
Code behind reusable node <update handlen=”editor” />
**Logos and Trademarks are owned by their respective owners
<!-- #File: app/design/adminhtml/default/default/layout/main.xml -->
How to add product edit form in Magento2?
<uiComponent name="product_form"/>
Why uicomponent?
Simplifies layout handle XML files.
Extensibility..
Configuration over code.
Less code for logic, more declarative xmls.
Less traffic over the network.
The xml is transformed into a json and sent to the browser. Also each field type is sent only once to the browser and the form generation happens on the client
The new system allow column reordering
Use pure javascript custom widget system for user interface.
Moves admin user interface elements from HTML + Javascript to a “pure javascript” custom widget system
Is a system for building more complex UI components out of smaller components
Pre-renders data for UI components as JSON, binding closely to Magento backend data objects.
Uses ajax to update component data.
Type of uicomponent.
=> Basic
=> Secondary
Basic uicomponent
=> List
=> Form
Secondary uicomponent
=> Filter component
=> Pagination component
=> MassAction
=> TreeMassAction
=> Column component
=> UI-select component
=> Multiselect component
=> Inline Edit component
=> Bookmark component
=> Resize component
=> Sticky header component
=> ExportButton component
Thanks