The document outlines the Magento 2 UI library, detailing its components, data management, and rendering processes. It highlights the library's capabilities for creating reusable widgets, handling data, and supporting multiple rendering engines. Additionally, it emphasizes the flexibility and customization options available within the UI library for developers.

1. Magento 2 UI Library
Sergey Ivashchenko
Magento is an eBay Inc. company. © 2014 Magento, Inc. All rights reserved.

2. Sergey Ivashchenko
 Backend developer in Magento
 Working in Magento for about 2.5 years
 Projects:
 Magento 1.13
 Magento 2
(Full Page Cache, Filesystem, Pricing, UI Library)
 Magento Testing Framework
 Current projects:
 Magento 2 Sales modules
 Magento Testing Framework
© 2014 Magento, Inc. Page | 2

3. Magento 2 UI Library
Provides universal UI components for content organization
© 2014 Magento, Inc. Page | 3
using compact and simple configuration
and creating reusable widgets

4. Base
Data
© 2014 Magento, Inc. Page | 4
Layout
Interaction
Rendering
engine

5. 1 Data Source
© 2014 Magento, Inc. Page | 5

6. Entity Data
Entity attributes Dynamic attributes References and extensions
© 2014 Magento, Inc. Page | 6
Data Manager

7. Data Manager
 Responsible for gathering all data related to entity
 Works with preset (etc/data_source/<preset_name>.xml file)
 Handles references and allows extensions
© 2014 Magento, Inc. Page | 7

8. Collecting Data
© 2014 Magento, Inc. Page | 8
Customer
Customer address Customer balance
Customer group
Website

9. Data Unit
Date of birth field
label: “Date of birth”
data_type: date
visible: true
value: 12.10.1989
© 2014 Magento, Inc. Page | 9
Metadata
Data
Group field
label: “Date of birth”
options: [
{
label: “Magento”,
value: “MAGE”
},
{
label: “Amasty”
value: “AM”
}
],
value: MAGE

10. Use
 data_source.xml
<config ...>
<datasource
name="customer"
dataset="MagentoCustomerModelResourceCustomerCollection"
>
<fields entityType="customer">
<field name="entity_id" visible="false"/>
</fields>
</datasource>
</config>
 MagentoUiDataProviderManager
 getData
 getMeta
© 2014 Magento, Inc. Page | 10

11. 2 Layout
© 2014 Magento, Inc. Page | 11

12. Components
Widgets Sub-Widgets Layouts
© 2014 Magento, Inc. Page | 12
(Containers)
Elements

13. Sub-Widgets
© 2014 Magento, Inc. Page | 13

14. Layouts
(Containers)
Tabs Fieldsets
© 2014 Magento, Inc. Page | 14

15. Declaration in Layout
Page layout
(cms_page_index.xml)
© 2014 Magento, Inc. Page | 15
…
<ui_component
name=“cms_pages_grid”
component=“listing” />
…
UI Component instance layout
(cms_page_grid.xml)
<referenceBlock name=“listing”>
<argument name="layout">
<item name="type“>tabs</item>
UI Library layout file
(ui_components.xml)
<block name=“listing”/>
</argument>
<ui_component
name=“cms_page_filter”
component=“filter”/>
<block name=“tabs”/>
<block name=“filter”/>

16. 3 Rendering
© 2014 Magento, Inc. Page | 16

17. Configuration Storage
loadLayout
© 2014 Magento, Inc. Page | 17
UI Component 1
Configuration
Storage
UI Component 2
renderLayout
UI Component 1
Configuration
Storage
UI Component 2
prepare
render

18. Rendering Engines
Direct HTML On client side etc.
© 2014 Magento, Inc. Page | 18

19. UI Components Controllers
 General UI Library controller
 Render Component
 UI Components controllers
 Form Save
 Form Validate
© 2014 Magento, Inc. Page | 19

20. 4 Finally
© 2014 Magento, Inc. Page | 20

21. Conclusions
 Granular and flexible layout structure: UI Components
 UI Component handle interaction by itself: UI Components Controllers
 Tools for data preparation and configuration: Data Manager
 UI Library supports multiple rendering engines: Configuration Storage
© 2014 Magento, Inc. Page | 21

22. Customization and Extension Points
On Data level
© 2014 Magento, Inc. Page | 22
On Widget layout level
On UI Component level
On Page layout level

23. © 2014 Magento, Inc. Page | 23
Q&A

24. Thank you!
© 2014 Magento, Inc. Page | 24
sivashchenko@ebay.com