Hey! My name is Pavel and I am a Magento 2 backend developer. In the last part of the Magento 2 UI Components saga, we got an overview of UI components, their variety, structure and underlying technologies. Today we will touch upon their configuration in detail: default values, XML-configurations, expressions in configuration values, replacement of templates and JS-components, etc. Let's go!
Primarily
XML , . XML , ( JS , . ) . , , - .
, 2 XML merge . , ( , , , ). , ( ) sequence module.xml
.
<magento root>/vendor/magento/module-ui/view/base/ui_component/etc/definition.xml
. , . , JS .
XML , , , .
, XML
<script type="text/x-magento-init">{"*": {"Magento_Ui/js/core/app":{<JSON_configuration>}}}</script>
, UI .
( listing) , .
-
, - - listing. :
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">white_rabbit_grid_listing.white_rabbit_grid_listing_data_source</item>
</item>
</argument>
:
[‘data’][‘js_config’][‘provider’] = white_rabbit_grid_listing.white_rabbit_grid_listing_data_source
- , - listing
( , white_rabbit_grid_listing.xml
). - - , -.
- - Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory
, $collections , -, - . - DI di.xml, :
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
<arguments>
<argument name="collections" xsi:type="array">
<item name="white_rabbit_listing_data_source"
xsi:type="string">RSHB\WhiteRabbit\Model\ResourceModel\Rabbit\Grid\Collection</item>
</argument>
</arguments>
</type>
<virtualType name="RSHB\WhiteRabbit\Model\ResourceModel\Rabbit\Grid\Collection"
type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
<arguments>
<argument name="mainTable" xsi:type="string">rshb_white_rabbit</argument>
<argument name="resourceModel" xsi:type="string">RSHB\WhiteRabbit\Model\ResourceModel\Rabbit</argument>
</arguments>
</virtualType>
- , .
- :
<dataSource name="white_rabbit_listing_data_source" component="Magento_Ui/js/grid/provider">
<settings>
<storageConfig>
<param name="indexField" xsi:type="string">id</param>
</storageConfig>
<updateUrl path="mui/index/render"/>
</settings>
<dataProvider class="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider" name="white_rabbit_grid_listing_data_source">
<settings>
<requestFieldName>id</requestFieldName>
<primaryFieldName>id</primaryFieldName>
</settings>
</dataProvider>
</dataSource>
, DataSource
, primary , , ( ).
(settings)
, . listing:
<settings>
<spinner>entity_grid_columns</spinner>
<deps>
<dep>entity_grid_listing.entity_grid_listing_data_source</dep>
</deps>
<buttons>
<button name="add">
<url path="*/*/new"/>
<class>primary</class>
<label translate="true">Add New Referral</label>
</button>
</buttons>
</settings>
. : (<dep>
) -. : <buttons>
, ( , ).
: , settings
? , <magento root>/vendor/magento/module-ui/view/base/ui_component/etc/definition
, listing.xsd
, componentListingSettings
, . <dep>
, ui_settings.xsd
. , , settings
(. ).
listing
listing
:
ListingToolbar
, :
<listingToolbar name="listing_top">
<settings>
<sticky>true</sticky>
</settings>
<bookmark name="bookmarks"/>
<columnsControls name="columns_controls"/>
<filters name="listing_filters"/>
<paging name="listing_paging"/>
<exportButton name="export_button"/>
</listingToolbar>
, , , . , - settings. bookmark, filters, paging , settings .
, - Columns, Column.
, , <settings>:
<column name="order_id" class="Magento\Ui\Component\Listing\Columns\Column" sortOrder="20">
<settings>
<filter>text</filter>
<sortable>true</sortable>
<label translate="true">Order ID</label>
</settings>
</column>
, .
, js-. , , . .
, , :
{ “fist_name”: “Rabbit”, “middle_name”: “Whitest”, “last_name”: “White”, … }
, first_name
, middle_name
last_name
name
, . ?
column ( , Magento\Ui\Component\Listing\Columns\Column
):
<?php
namespace RSHB\WhiteRabbit\Ui\Component\Listing\Column\Rabbit;
use Magento\Ui\Component\Listing\Columns\Column;
/**
* Class Name
* @package RSHB\WhiteRabbit\Ui\Component\Listing\Column\Rabbit
*/
class Name extends Column
{
/**
* @param array $dataSource
* @return array
*/
public function prepareDataSource(array $dataSource)
{
if (isset($dataSource['data']['items'])) {
foreach ($dataSource['data']['items'] as & $item) {
$nameArray = [
$item['first_name'] ?: '',
$item['middle_name'] ?: '',
$item['last_name'] ?: ''
];
$name = implode(' ', array_filter($nameArray));
$item['name'] = $name;
}
}
return $dataSource;
}
}
:
<column name="name" class="RSHB\WhiteRabbit\Ui\Component\Listing\Column\Rabbit\Name" sortOrder="20">
<settings>
<filter>text</filter>
<sortable>true</sortable>
<label translate="true">Name</label>
</settings>
</column>
name , .
js- , :
<column name="name" class="RSHB\WhiteRabbit\Ui\Component\Listing\Column\Rabbit\Name" sortOrder="20">
<settings>
<filter>text</filter>
<sortable>true</sortable>
<label translate="true">Name</label>
<component>RSHB_WhiteRabbit/js/listing/column</component>
<template>ui/column/templates/name</template>
</settings>
</column>
, settings
. , . (field
), form
, . :
<item name="config" xsi:type="array">
...
<item name="filterBy" xsi:type="array">
<item name="target" xsi:type="string">${ $.provider }:${ $.parentScope }.white</item>
<item name="field" xsi:type="string">rabbit_id</item>
</item>
...
</item>
item target
. white
. ?
, , , . rabbit_id
. :
<field name="white" sortOrder="60">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">RSHB\WhiteRabbit\Model\Config\Source\White</item>
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">White</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">select</item>
<item name="source" xsi:type="string">rabbit</item>
<item name="dataScope" xsi:type="string">white</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
<field name="rabbit" sortOrder="70">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">RSHB\WhiteRabbit\Model\Config\Source\Rabbit</item>
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Rabbit</item>
<item name="formElement" xsi:type="string">multiselect</item>
<item name="source" xsi:type="string">rabbit</item>
<item name="dataScope" xsi:type="string">rabbit</item>
<item name="filterBy" xsi:type="array">
<item name="target" xsi:type="string">${ $.provider }:${ $.parentScope }.white</item>
<item name="field" xsi:type="string">rabbit_id</item>
</item>
</item>
</argument>
</field>
multiselect
“rabbit” , rabbit_id
value
white
.
, .
Ui-. , . , 2.
. . !