Magento Meetup New Delhi- Magento2 Ui component

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