Magento 2. Ui Grid
Absolutely all users of Magento 2 noticed the updated admin panel interface. In this article I would like to consider the new interface of the Grid pages and most importantly, how to create your own Grid page with a detailed description.
Magento 2 has 2 types of Grid pages. The ones we are used to in Magento 1 and absolutely new, Ui Grid, if I can call them that, which are based on new Ui elements.
This is a fairly standard grid village, it is almost the same as in Magento 1, and now let's move on to the Ui Grid.
')
You may have noticed a lot of new elements on this page, while Magento 1 screen usually looks like this:
Where are the filters, you can ask to see them just click "Filters".
As an administrator, you can not only view records from the database, as was the case in Magento 1, but also modify the list of columns, their positions, the list of available filters, and much more directly from the admin panel.
By the way, it also works on EAV Grid pages (such as a product list or user list). By adding a new attribute, you can add a column with its value.
You can also save your changes in order to return to them later or simply switch between different saved states to perform certain actions.
If you have a lot of records on the page, and you scrolled the page quite far, then the field headings and the necessary buttons will be displayed on top.
Another nice feature is the full-text search on grid pages (you can see the CMS grid page or the list of users page).
You can enter any text there and if at least 1 record is found with similar content, it will be shown.
Another cool thing is finally added columns with images. You can see an example of such a column on the product listing page. By clicking on the image will be shown the full version of the image of this product.
The last feature I want to talk about is the inline editor. In other words, now if you click on a line, you can edit it without opening the edit page.
You can also do this by editing several records (mass action). Just check the required lines and select “edit” in the “Actions” menu.
Thanks to the new architecture of the admin panel Magento, all these actions do not require reloading pages. This means that you will see the result of your actions almost instantly.
All the new features look promising, but how to use them? This is a bit of a difficult question due to the lack of details, full examples of code in the official documentation (it is now in the process of filling, which is good). This would help developers introduce new features faster and fully understand what their code does, and not blindly copy from Google. In order to fix this, let's review the full process of embedding a Ui Grid into an abstract extension.
First of all, our extension should have approximately the following structure:
* {entity_grid_listing} is a unique identifier of your ui component configuration, Magento merdzhit xml files by name, a good idea to call them as {entity} _grid_listing, as done in the CMS pages (page_grid_listing).
In the example:
The file list should be familiar to Magento developers, the new files among them are:
And also a couple of new lines in the following configuration files:
Let's quickly go through the main files.
Registration.php , module.xml should contain information for the announcement of our module, the content of the files you can see in any Magento 2 extension.
acl.xml , menu.xml , routes.xml should have information about links and menus in the admin panel so that you can get to your Grid page.
Index.php Controller - the usual admin controller, which does not have any special methods.
InstallSchema.php - must have instructions in order to create the necessary tables that your module will use later.
Your Model , ResourceModel, and Collection model may not have any particular methods, but they must have the usual methods to associate your model with a resource model, a resource model with a database, and a collection model with both of them.
uigrid_index_index.xml - layout file. Notice the container named "content". This is the most important thing in this file. The name of the uiComponent tag must match the name of your {entity_grid_listing} .xml file in the ui_component folder.
di.xml - contains information about the data source collection for your Ui Component.
This information will be used by Magento to prepare the data for your Grid page. Simply put, the class specified in di.xml is just a collection with a few additional methods for working with search criteria, and so on. Let's take a closer look at this class.
Please note that the collection should implement the Magento \ Framework \ Api \ Search \ SearchResultInterface interface and extend your original collection (in fact, it makes working with data easier and you don’t have to implement many other methods). All methods and properties with the exception of _construct can be copied from Magento \ Cms \ Model \ ResourceModel \ Block \ Grid \ Collection, no longer will you need them. The _construct method is special. You must make the collection use the Magento \ Framework \ View \ Element \ UiComponent \ DataProvider \ Document object as a model and your resource model as, in fact, a model resource for communicating with the database.
Ui Component is a ui_component / {entity_grid_listing} .xml file that provides information about the grid table and how the data should be represented in it.
From the beginning, you should look at the module-cms / view / adminhtml / ui_component / cms_block_listing.xml file, it looks relatively simple, but the lack of a description in the documentation does the trick. Most of the ui grid pages have a similar structure to this file: argument, dataSource, listingToolbar, columns.
But what do they actually do? Is the order of the elements important? What parameters can and should be transmitted? And the most important, how does all this work?
Ui Component is a new feature of Magento 2, a mixture of knockoutjs and backend code. When you use the uiComponent tag in your layout, it tells Magento to process the file with that name in a certain way. In short, Magento reads a component file, creates certain classes in order to collect options for a component and ultimately prepares a jsLayout config that will be passed to the frontend and processed by knockoutjs (observables, viewModels will be created, a view of heattresses will be created, etc.) . Magento_Ui is the extension that provides the majority of ready-to-use components (viewModels) that you can use in your code. You can find them in module-ui / view / base / web / js / *. The main config is the module-ui / view / base / ui_component / etc / definition.xml, it contains the description and default options for all components that you can use in your Ui Component. Any changes to this file (or your definition.xml file) will be applied to all extensions.
Let's analyze Test / UiGrid / view / adminhtml / ui_component / uigrid_grid_listing.xml. To make it easier to trace the structure, I will enumerate the nested elements and highlight the main places.
Let's start with the very first element that we see in the example above.
1. <argument name = "data" xsi: type = "array"> .
<item name = "js_config" xsi: type = "array"> contains information about the data provider on the frontend, the format of the provider name must be {file_name}. {file_name} _data_source.
<item name = "spinner" xsi: type = "string"> contains a link to the list of columns in the same file, the value must be identical to the name you specified for the columns tag. I recommend calling it {extension} _ {entity} _columns. If you did not install it or installed it incorrectly, then Magento will not stop the spinner even if the data has already been loaded.
<item name = "buttons" xsi: type = "array"> contains information about the top buttons.
Please note that you can not only add the “Add ...” button, but also other buttons with different classes, as shown below.
The button can be added not only through xml, but also through a separate class. Pay attention to the commented out piece of code. You will find the implementation of these classes within them.
2. <dataSource name = "uigrid_grid_listing_data_source">
This section contains important information about the render url, data provider class, the name of your collection that provides data, and so on. The attribute name must follow the following format {file_name} _data_source and must be identical to the one you used previously.
You need to change only the following elements:
<argument name = "name" xsi: type = "string"> must contain the name of your collection in di.xml,
<argument name = "primaryFieldName" xsi: type = "string"> , <argument name = "requestFieldName" xsi: type = "string"> , <item name = "indexField" xsi: type = "string"> - entity id key of your table in the database.
The remaining attributes may remain the same as in the example.
If the name is not specified correctly or the collection was not described in di.xml, you will see the following error
3. <listingToolbar name = "listing_top">
This element contains a list of top menu items, such as Filters, Bookmarks, Column editor, Full text search field, Mass Actions, Pagination, and so on.
Keep in mind that you can fill this xml in several extensions at the same time! Just put the ui_component file with the same name in the same or base scope. The order element plays a big difference, so make sure that the order in which the modules are loaded and the elements are added to ui_component. If the <listingToolbar> is loaded after <columns>, you will get the following result:
The element name should be as specified.
3.1. <item name = "sticky" xsi: type = "boolean"> optional, you can skip it. The default value is "false". This parameter is responsible for quick access to the top menu while scrolling the page, it will follow the scroll until you scroll the page back to the top.
3.2. <bookmark name = "bookmarks"> optional. He adds a “Bookmark” button. If you add this item, Magento will allow administrators to save the state of the columns and their positions for later use. Each administrator has his own list.
3.3. <columnsControls name = "columns_controls"> optional. He adds a “Columns” button. If you add this item, Magento will allow administrators to add or remove some columns from your grid table.
3.4. <filterSearch name = "fulltext"> optional. Adds a full text search field.
Magento developers have implemented a wonderful feature - search by any field in the database without writing additional code! All you need to do is add a full text index on 1 or more columns in the database. If your table has at least 1 full text index, then the entered text will be searched for it. You can add indexes in your install scripts. Starting with MySQL 5.6.4, InnoDB tables support Full text Index as well as MyISAM.
3.5. <filters name = "listing_filters"> is optional. This element may contain additional microfigure for filters and their display. In the example, you can see the <argument> and <filterSelect> elements.
Let's start with the first one.
<argument>
Sometimes you may need to change a component or pattern for a specific filter type (for example, change the text input behavior within a filter list or select an item). The most common case in Magento 2 code is the replacement of the standard component and the dropdown select template from select to ui-select for the status filter.
Please note that this change will affect all filters of the <item name = {type}> type.
<filterSelect>
The “filterSelect” element is an example of changing the standard filter for the store_id column. In general, almost all columns have their own filter (text, textRange, date, select, etc.), but in some cases you need to redefine the behavior / display of such a filter for a certain column. The available types are filterInput, filterRange, filterSelect, and containerConfiguration (this type is indicated by an error message if you try to specify something else). The name must be identical to the column name, the filter you want to override, otherwise the mapping will not work.
3.6. The <massaction name = "listing_massaction"> element is optional. It adds massaction dropdown and pop-up messages if the user has not selected any rows before selecting an action.
Usually this element looks like a regular dropdown, but you can replace the component with a tree menu.
If you want to replace the default message “You haven't selected any items!” As shown above, you need to pass the following parameters to the massaction component, just paste your message into “noItemsMsg”.
To add a new action to the dropdown, take a look at the example below. This is an example of a “delete” action, but you can add others as well.
<action name = "delete"> - must have a unique name, since Magento merdzhit elements by name.
<item name = "type"> - must be unique as well, otherwise Magento will show all such options in the dropdown, but they will all perform 1 and the same action as described in the 1st element with this type as Magento caches configs type. A good practice is to use the same name that you specified for the action.
<item name = "label"> is the name of the option.
<item name = "url"> - the action URL that will be used to process the selected lines. An array of selected / excluded elements will be sent there, filters applied and the phrase applied to the full text search. The difference between the transmitted parameters depends on the method of selecting elements. If you clicked “select all” then the element “excluded” will contain “false”. If you selected several elements manually, the “selected” array will contain the entity id of all selected entries. The most recent case, if you clicked “select all”, but later you manually added several records, the “excluded” array will contain the entity id of all the stripped records. To see an example of the implementation of the “massDelete” action and how these parameters are processed, see the class Magento \ Cms \ Controller \ Adminhtml \ Block \ massDelete.
<item name = "confirm"> is an optional item. If specified, Magento will display a modal window to confirm the action with the “Ok” or “Cancel” buttons. Title and Message can be changed as shown above.
Now let's consider not the usual button, but the mass edit button.
The main difference between them is the <item name = "callback"> element. It is optional. Its parameters make it possible to edit several lines at once. In fact, he applies the callback to the selected rows.
This is how the grid changes if several lines are selected:
and if only 1 runoff is selected:
For such editing, only those columns that have an “editor” attribute (more information about it below) will be available.
<item name = "provider"> is the path to the component. Notice the line in the example. The value should follow the following format {filename}. {Filename}. {Columns_element_name} _editor.
<item name = "target"> is the name of the method inside the knockoutjs component, "editSelected" should be specified here.
Detailed configuration of the editor will be discussed later.
Speaking of massaction dropdown options, as you saw earlier, there are 2 types of options available. Normal (select) and tree-like options. Unfortunately, the “select” component does not support submenus, but tree-massactions supports. To use this component, you need to tell Magento to use the Magento_Ui / js / grid / tree-massactions component. The “action” element should already be familiar to you, so let's take a look at the minor changes in the following example.
<argument name="actions" xsi:type="array"> . 0 N, knockoutjs (javascript) .
<param name="…">…</param> . post , get (. ). .
3.7. <paging name="listing_paging"/> . . , Magento 1 .
:
:
3.8. <exportButton name="export_button"/> . export 2 : export as csv, export as xml. , . , . , Magento ui_component . , ( ). , devdocs.magento.com/guides/v2.1/ui-components/ui-export.html .
4. <columns name="uigrid_grid_columns">
. , .
<columns name="uigrid_grid_columns"> — {extension}_{entity}_columns , <item name="spinner" xsi:type="string">name_of_columns_element</item>. «name», «class» vendor/magento/module-catalog/view/adminhtml/ui_component/product_listing.xml.
<columns name="product_columns" class="Magento\Catalog\Ui\Component\Listing\Columns">
columns - , - .
«edit» .
<item name="selectProvider" xsi:type="string"> — / , :
{filename}.{filename}.{columns_name}.{selectionsColumn_name},
uigrid_grid_listing.uigrid_grid_listing.uigrid_grid_columns.ids.
<item name="enabled" xsi:type="boolean"> — / .
<item name="indexField" xsi:type="string"> — entity id, .
<item name="clientConfig" xsi:type="array"> — «Save» .
<item name="saveUrl" xsi:type="url" path="*/*/inlineEdit"/> — , knockoutjs . «path», "*/*/inlineEditor", , .
<item name="validateBeforeSave" xsi:type="boolean"> — . – «true», «validateUrl», knockoutjs . , knockoutjs «validateUrl» ( http 200), knockoutjs saveUrl, . «false».
<item name="validateUrl" xsi:type="url" path="*/*/checkData"/> — .
( CMS page/block ), <argument> <columns> «editorConfig». , «provider», {filename}.{filename}.{columns_name}_editor, .
. . , inlineEditor. 2 : provider,0. {filename}.{filename}.{columns_name}.actions, «action» (. ).
<column|actionsColumn|selectionsColumn> — <columns> , . <column> , <actionsColumn> «action» <selectionsColumn> . <actionsColumn> . selectionsColumn ids, class , , ..
<column name="{unique_name}"> — . . Magento . ( ), . , Magento () . «class», / .
<column class="{class_name}"> — . «» / / . / . Magento\Ui\Component\Listing\Columns\Date , . Magento\Catalog\Ui\Component\Listing\Columns\Thumbnail . , .
<argument name="data" xsi:type="array"> — ( ) ( «config» ).
<item name="options" xsi:type="object"> — . dataType «select» (. ) source , ( «data» , knockoutjs ). , . .
<item name="config" xsi:type="array"> — - / knockoutjs . knockoutjs ViewModel. , ViewModel «config» .
<item name="component" xsi:type="string"> — . , . , «Sep 5, 2016 8:03:07 PM» 2016-09-05 . – Magento_Ui/js/grid/columns/column, . ViewModel' Magento_Ui/js/grid/columns/. () :
Magento_Ui/js/grid/columns/column – , .. ,
Magento_Ui/js/grid/columns/date – ,
Magento_Ui/js/grid/columns/select – ,
Magento_Ui/js/grid/columns/thumbnail – ,
, «» Magento_Ui/js/grid/columns/column.
<item name="bodyTmpl" xsi:type="string"> — . («view») , . ui/grid/cells/text. html , ui/grid/cells/html ( Store Id ) ui/grid/cells ( ).
<item name="add_field" xsi:type="boolean"> — . ui_*.xml , DataProvider/collection eav/ .
<item name="sortable" xsi:type="boolean"> — . «true». .
<item name="filter" xsi:type="string"> — . . : textRange, dateRange, select, text. . (ID – textRange, Created – dateRange, Store View – , Name – text, Status – select).
( , , Website/StoreView) <filters name="listing_filters">.
<item name="sorting" xsi:type="string"> — , . : asc, desc. 1 .
<item name="label" xsi:type="string"> — . , , . , «ui/grid/columns/text» , «headerTmpl» . , .
<item name="visible" xsi:type="boolean"> — . «true». , , .
<item name="draggable" xsi:type="boolean"> — . «true». / .
<item name="editor" xsi:type="{string|array}"> — . . . 2 . «string» «array». «string» () , «array». 3 : text, date, select. 1 .
:
<item name="timezone" xsi:type="boolean"> — . «true». «date». Magento\Ui\Component\Listing\Columns\Date . .
<item name="dataType" xsi:type="string"> — . , «select». «text». () /vendor/magento/module-ui/view/base/ui_component/etc/definition.xml. dataType? , . Magento , dataType , definition.xml, , dataType («class» ). , «data» . Magento definition.xml, , knockoutjs . , dataType «select» Magento\Ui\Component\Form\Element\Select, . «options» source model , Magento_Ui/js/grid/columns/select ( select ).
<item name="sortOrder" xsi:type="number"> — . sortOrder , Magento ui_component . , Magento sortOrder , ui_component ! , , sortOrder . , . .
<item name="options" xsi:type="array"> — «select». «select» . , «option» dataType=«select». . «select» , id. dataType , . :
/. {value} {option_label}. , dataType .
<item name="has_preview" xsi:type="boolean"> — . «thumbnail» /. «false». .
, .
«data» . .
. «select all», «select all on this page», «deselect all», «deselect all on this page», , id. .
<selectionsColumn name="ids"> «ids».
<item name="indexField" xsi:type="string"> primary key .
, .
2 . Date datetime.
Magento\Ui\Component\Listing\Columns\Date .
Magento_Ui/js/grid/columns/date .
<item name="editor" xsi:type="array"> .
<item name="showsTime" xsi:type="boolean"> — . . «false». Magento «true». showTime = true, – Magento 2.
<item name="timezone" xsi:type="boolean"> — . «true». «false», . , ( ) «save» .
<item name="filter" xsi:type="string">dateRange</item> — . . , , DataRange .
<item name="dateFormat" xsi:type="string"> — . . «MMM d, YYYY h:mm:ss A», «Sep 5, 2016 9:00:00 AM».
«select» Status. 2 Enabled Disabled.
<item name="options" xsi:type="object"> — . ( ), knockoutjs .
<item name="dataType" xsi:type="string"> — . «options» . «select» knockoutjs . «select».
xml.
<item name="options" xsi:type="array"> — . /.
Store View store_id ( ), . , . html, . «bodyTmpl». Magento\Store\Ui\Component\Listing\Column\Store Website-Store-StoreView html . , , .
Thumbnail . :
*{column_name} «image» .
, Magento\Catalog\Ui\Component\Listing\Columns\Thumbnail. , .
<item name="has_preview" xsi:type="boolean"> — . .
«Action» «actionColumn» «column», . 2 .
«action» :
:
, . «indexField» . , , knockoutjs . , .
, . Magento\Cms\Ui\Component\Listing\Column\BlockActions.php.
Magento «Select» 1 .
Second way
«action» .
«Magento\Sales\Ui\Component\Listing\Column\ViewAction» . . - , primary key «entity_id».
<item name="indexField" xsi:type="string"> — . ,
<item name="viewUrlPath" xsi:type="string"> — ,
<item name="urlEntityParamName" xsi:type="string"> — entity_id , GET . «entity_id», , - entity_id .
xml, , .
Magento , , ui_bookmark ui_component.xml . , Magento , «actions» , sortOrder . , ( ) ( «default», , «current» ).
, , ui . knockoutjs ui , Magento 1. , , . Magento 2, , . . ui . Ui Component .
Table of contents
Overview
Creating an extension
Ui Component
Editor
Columns
Examples
Must remember
Conclusion
Overview
Magento 2 has 2 types of Grid pages. The ones we are used to in Magento 1 and absolutely new, Ui Grid, if I can call them that, which are based on new Ui elements.
This is a fairly standard grid village, it is almost the same as in Magento 1, and now let's move on to the Ui Grid.
')
You may have noticed a lot of new elements on this page, while Magento 1 screen usually looks like this:
Where are the filters, you can ask to see them just click "Filters".
As an administrator, you can not only view records from the database, as was the case in Magento 1, but also modify the list of columns, their positions, the list of available filters, and much more directly from the admin panel.
By the way, it also works on EAV Grid pages (such as a product list or user list). By adding a new attribute, you can add a column with its value.
You can also save your changes in order to return to them later or simply switch between different saved states to perform certain actions.
If you have a lot of records on the page, and you scrolled the page quite far, then the field headings and the necessary buttons will be displayed on top.
Another nice feature is the full-text search on grid pages (you can see the CMS grid page or the list of users page).
You can enter any text there and if at least 1 record is found with similar content, it will be shown.
Another cool thing is finally added columns with images. You can see an example of such a column on the product listing page. By clicking on the image will be shown the full version of the image of this product.
The last feature I want to talk about is the inline editor. In other words, now if you click on a line, you can edit it without opening the edit page.
You can also do this by editing several records (mass action). Just check the required lines and select “edit” in the “Actions” menu.
Thanks to the new architecture of the admin panel Magento, all these actions do not require reloading pages. This means that you will see the result of your actions almost instantly.
Creating an extension
All the new features look promising, but how to use them? This is a bit of a difficult question due to the lack of details, full examples of code in the official documentation (it is now in the process of filling, which is good). This would help developers introduce new features faster and fully understand what their code does, and not blindly copy from Google. In order to fix this, let's review the full process of embedding a Ui Grid into an abstract extension.
First of all, our extension should have approximately the following structure:
- {NameSpace} / {ExtensionName} /registration.php
- {NameSpace} / {ExtensionName} /etc/module.xml
- {NameSpace} / {ExtensionName} /etc/di.xml
- {NameSpace} / {ExtensionName} /etc/acl.xml
- {NameSpace} / {ExtensionName} /etc/adminhtml/menu.xml
- {NameSpace} / {ExtensionName} /etc/adminhtml/routes.xml
- {NameSpace} / {ExtensionName} / Model / {Entity} .php
- {NameSpace} / {ExtensionName} / Model / ResourceModel / {Entity} .php
- {NameSpace} / {ExtensionName} / Model / ResourceModel / {Entity} /Collection.php
- {NameSpace} / {ExtensionName} / Model / ResourceModel / {Entity} /Grid/Collection.php
- {NameSpace} / {ExtensionName} /Setup/InstallSchema.php
- {NameSpace} / {ExtensionName} /Controller/Adminhtml/Index/Index.php
- {NameSpace} / {ExtensionName} / view / adminhtml / layout / {frontnameId} _index_index.xml
- {NameSpace} / {ExtensionName} / view / adminhtml / ui_component / {entity_grid_listing} .xml
* {entity_grid_listing} is a unique identifier of your ui component configuration, Magento merdzhit xml files by name, a good idea to call them as {entity} _grid_listing, as done in the CMS pages (page_grid_listing).
In the example:
- {NameSpace} - Test,
- {ExtensionName} - UiGrid,
- {Entity} - Grid.
The file list should be familiar to Magento developers, the new files among them are:
- {NameSpace} / {ExtensionName} / Model / ResourceModel / {Entity} /Grid/Collection.php
- {NameSpace} / {ExtensionName} / view / adminhtml / ui_component / {entity_grid_listing} .xml
And also a couple of new lines in the following configuration files:
- {NameSpace} / {ExtensionName} / view / adminhtml / layout / {frontnameId} _index_index.xml
- {NameSpace} / {ExtensionName} /etc/di.xml
Let's quickly go through the main files.
Registration.php , module.xml should contain information for the announcement of our module, the content of the files you can see in any Magento 2 extension.
registration.php
\Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Test_UiGrid', __DIR__ ); module.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Test_UiGrid" setup_version="0.1.0"/> </config> acl.xml , menu.xml , routes.xml should have information about links and menus in the admin panel so that you can get to your Grid page.
acl.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd"> <acl> <resources> <resource id="Magento_Backend::admin"> <resource id="Test_UiGrid::test" title="Test" translate="title" sortOrder="30"> </resource> </resource> </resources> </acl> </config> menu.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd"> <menu> <add id="Test_UiGrid::test" title="Test" translate="title" module="Test_UiGrid" sortOrder="20" dependsOnModule="Test_UiGrid" resource="Test_UiGrid::test"/> <add id="Test_UiGrid::test_uigrid" title="UiGrid" translate="title" module="Test_UiGrid" sortOrder="10" parent="Test_UiGrid::test" action="uigrid" resource="Test_UiGrid::test"/> </menu> </config> routes.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd"> <router id="admin"> <route id="uigrid" frontName="uigrid"> <module name="Test_UiGrid" /> </route> </router> </config> Index.php Controller - the usual admin controller, which does not have any special methods.
Index.php
namespace Test\UiGrid\Controller\Adminhtml\Index; use Magento\Framework\Controller\ResultFactory; use Magento\Framework\App\Action\Action; use Magento\Framework\View\Result\Page; class Index extends Action { public function execute() { return $this->resultFactory->create(ResultFactory::TYPE_PAGE); } } InstallSchema.php - must have instructions in order to create the necessary tables that your module will use later.
Your Model , ResourceModel, and Collection model may not have any particular methods, but they must have the usual methods to associate your model with a resource model, a resource model with a database, and a collection model with both of them.
Model
namespace Test\UiGrid\Model; use Magento\Framework\Model\AbstractModel; use Test\UiGrid\Model\ResourceModel\Grid; class Grid extends AbstractModel { protected function _construct() { $this->_init(Grid::class); } } ResourceModel
namespace Test\UiGrid\Model\ResourceModel; use Magento\Framework\Model\ResourceModel\Db\AbstractDb; class Grid extends AbstractDb { protected function _construct() { $this->_init('uigrid', 'entity_id'); } } Collection
namespace Test\UiGrid\Model\ResourceModel\Grid; use Magento\Framework\Model\ResourceModel\Db\Collection\AbstractCollection; use Test\UiGrid\Model\Grid; use Test\UiGrid\Model\ResourceModel\Grid as GridResource; class Collection extends AbstractCollection { protected function _construct() { $this->_init(Grid::class, GridResource::class); } } Preparing data for Ui Component
uigrid_index_index.xml - layout file. Notice the container named "content". This is the most important thing in this file. The name of the uiComponent tag must match the name of your {entity_grid_listing} .xml file in the ui_component folder.
uigrid_index_index.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <title>UiGrid</title> </head> <body> <referenceBlock name="menu"> <action method="setActive"> <argument name="itemId" xsi:type="string">Test_UiGrid::test_uigrid</argument> </action> </referenceBlock> <referenceContainer name="content"> <uiComponent name="uigrid_grid_listing"/> </referenceContainer> </body> </page> di.xml - contains information about the data source collection for your Ui Component.
di.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory"> <arguments> <argument name="collections" xsi:type="array"> <item name="uigrid_grid_listing_data_source" xsi:type="string">Test\UiGrid\Model\ResourceModel\Grid\Grid\Collection</item> </argument> </arguments> </type> </config> This information will be used by Magento to prepare the data for your Grid page. Simply put, the class specified in di.xml is just a collection with a few additional methods for working with search criteria, and so on. Let's take a closer look at this class.
{NameSpace} / {ExtensionName} / Model / ResourceModel / {Entity} /Grid/Collection.php
namespace Test\UiGrid\Model\ResourceModel\Grid\Grid; use Test\UiGrid\Model\ResourceModel\Grid\Collection as GridCollection; use Magento\Framework\Search\AggregationInterface; use Magento\Framework\Api\Search\SearchResultInterface; use Magento\Framework\View\Element\UiComponent\DataProvider\Document; use Test\UiGrid\Model\ResourceModel\Grid; use Magento\Framework\Api\SearchCriteriaInterface; class Collection extends GridCollection implements SearchResultInterface { protected $aggregations; protected function _construct() { $this->_init(Document::class, Grid::class); } public function getAggregations() { return $this->aggregations; } public function setAggregations($aggregations) { $this->aggregations = $aggregations; } public function getAllIds($limit = null, $offset = null) { return $this->getConnection()->fetchCol($this->_getAllIdsSelect($limit, $offset), $this->_bindParams); } public function getSearchCriteria() { return null; } public function setSearchCriteria(SearchCriteriaInterface $searchCriteria = null) { return $this; } public function getTotalCount() { return $this->getSize(); } public function setTotalCount($totalCount) { return $this; } public function setItems(array $items = null) { return $this; } } Please note that the collection should implement the Magento \ Framework \ Api \ Search \ SearchResultInterface interface and extend your original collection (in fact, it makes working with data easier and you don’t have to implement many other methods). All methods and properties with the exception of _construct can be copied from Magento \ Cms \ Model \ ResourceModel \ Block \ Grid \ Collection, no longer will you need them. The _construct method is special. You must make the collection use the Magento \ Framework \ View \ Element \ UiComponent \ DataProvider \ Document object as a model and your resource model as, in fact, a model resource for communicating with the database.
Ui Component
Ui Component is a ui_component / {entity_grid_listing} .xml file that provides information about the grid table and how the data should be represented in it.
From the beginning, you should look at the module-cms / view / adminhtml / ui_component / cms_block_listing.xml file, it looks relatively simple, but the lack of a description in the documentation does the trick. Most of the ui grid pages have a similar structure to this file: argument, dataSource, listingToolbar, columns.
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <argument name="data" xsi:type="array"> ... </argument> <dataSource name="uigrid_grid_listing_data_source"> ... </dataSource> <listingToolbar name="listing_top"> ... </listingToolbar> <columns name="uigrid_grid_columns"> ... </columns> </listing> But what do they actually do? Is the order of the elements important? What parameters can and should be transmitted? And the most important, how does all this work?
Ui Component is a new feature of Magento 2, a mixture of knockoutjs and backend code. When you use the uiComponent tag in your layout, it tells Magento to process the file with that name in a certain way. In short, Magento reads a component file, creates certain classes in order to collect options for a component and ultimately prepares a jsLayout config that will be passed to the frontend and processed by knockoutjs (observables, viewModels will be created, a view of heattresses will be created, etc.) . Magento_Ui is the extension that provides the majority of ready-to-use components (viewModels) that you can use in your code. You can find them in module-ui / view / base / web / js / *. The main config is the module-ui / view / base / ui_component / etc / definition.xml, it contains the description and default options for all components that you can use in your Ui Component. Any changes to this file (or your definition.xml file) will be applied to all extensions.
Ui Component config
Let's analyze Test / UiGrid / view / adminhtml / ui_component / uigrid_grid_listing.xml. To make it easier to trace the structure, I will enumerate the nested elements and highlight the main places.
Let's start with the very first element that we see in the example above.
1. <argument name = "data" xsi: type = "array"> .
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <argument name="data" xsi:type="array"> <item name="js_config" xsi:type="array"> <item name="provider" xsi:type="string">uigrid_grid_listing.uigrid_grid_listing_data_source</item> <item name="deps" xsi:type="string">uigrid_grid_listing.uigrid_grid_listing_data_source</item> </item> <item name="spinner" xsi:type="string">uigrid_grid_columns</item> <item name="buttons" xsi:type="array"> <item name="add" xsi:type="array"> <item name="name" xsi:type="string">add</item> <item name="label" xsi:type="string" translate="true">Add New Entity</item> <item name="class" xsi:type="string">primary</item> <item name="url" xsi:type="string">*/*/new</item> </item> <!-- <item name="back" xsi:type="string">Magento\Cms\Block\Adminhtml\Block\Edit\BackButton</item> <item name="delete" xsi:type="string">Magento\Cms\Block\Adminhtml\Block\Edit\DeleteButton</item> <item name="reset" xsi:type="string">Magento\Cms\Block\Adminhtml\Block\Edit\ResetButton</item> <item name="save" xsi:type="string">Magento\Cms\Block\Adminhtml\Block\Edit\SaveButton</item> <item name="save_and_continue" xsi:type="string">Magento\Cms\Block\Adminhtml\Block\Edit\SaveAndContinueButton</item> --> </item> </argument> <dataSource name="uigrid_grid_listing_data_source"> ... </dataSource> <listingToolbar name="listing_top"> ... </listingToolbar> <columns name="uigrid_grid_columns"> ... </columns> </listing> <item name = "js_config" xsi: type = "array"> contains information about the data provider on the frontend, the format of the provider name must be {file_name}. {file_name} _data_source.
<item name = "spinner" xsi: type = "string"> contains a link to the list of columns in the same file, the value must be identical to the name you specified for the columns tag. I recommend calling it {extension} _ {entity} _columns. If you did not install it or installed it incorrectly, then Magento will not stop the spinner even if the data has already been loaded.
<item name = "buttons" xsi: type = "array"> contains information about the top buttons.
Please note that you can not only add the “Add ...” button, but also other buttons with different classes, as shown below.
The button can be added not only through xml, but also through a separate class. Pay attention to the commented out piece of code. You will find the implementation of these classes within them.
2. <dataSource name = "uigrid_grid_listing_data_source">
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <argument name="data" xsi:type="array"> ... </argument> <dataSource name="uigrid_grid_listing_data_source"> <argument name="dataProvider" xsi:type="configurableObject"> <argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider</argument> <argument name="name" xsi:type="string">uigrid_grid_listing_data_source</argument> <argument name="primaryFieldName" xsi:type="string">entity_id</argument> <argument name="requestFieldName" xsi:type="string">entity_id</argument> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item> <item name="update_url" xsi:type="url" path="mui/index/render"/> <item name="storageConfig" xsi:type="array"> <item name="indexField" xsi:type="string">entity_id</item> </item> </item> </argument> </argument> </dataSource> <listingToolbar name="listing_top"> ... </listingToolbar> <columns name="uigrid_grid_columns"> ... </columns> </listing> This section contains important information about the render url, data provider class, the name of your collection that provides data, and so on. The attribute name must follow the following format {file_name} _data_source and must be identical to the one you used previously.
You need to change only the following elements:
<argument name = "name" xsi: type = "string"> must contain the name of your collection in di.xml,
<argument name = "primaryFieldName" xsi: type = "string"> , <argument name = "requestFieldName" xsi: type = "string"> , <item name = "indexField" xsi: type = "string"> - entity id key of your table in the database.
The remaining attributes may remain the same as in the example.
If the name is not specified correctly or the collection was not described in di.xml, you will see the following error
3. <listingToolbar name = "listing_top">
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <argument name="data" xsi:type="array"> ... </argument> <dataSource name="uigrid_grid_listing_data_source"> ... </dataSource> <listingToolbar name="listing_top"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="sticky" xsi:type="boolean">true</item> </item> </argument> <bookmark name="bookmarks"/> <columnsControls name="columns_controls"/> <filterSearch name="fulltext"/> <filters name="listing_filters"> ... </filters> <massaction name="listing_massaction"> ... </massaction> <paging name="listing_paging"/> <exportButton name="export_button"/> </listingToolbar> <columns name="uigrid_grid_columns"> ... </columns> </listing> This element contains a list of top menu items, such as Filters, Bookmarks, Column editor, Full text search field, Mass Actions, Pagination, and so on.
Keep in mind that you can fill this xml in several extensions at the same time! Just put the ui_component file with the same name in the same or base scope. The order element plays a big difference, so make sure that the order in which the modules are loaded and the elements are added to ui_component. If the <listingToolbar> is loaded after <columns>, you will get the following result:
The element name should be as specified.
<listingToolbar name="listing_top"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="sticky" xsi:type="boolean">true</item> </item> </argument> ... </listingToolbar> 3.1. <item name = "sticky" xsi: type = "boolean"> optional, you can skip it. The default value is "false". This parameter is responsible for quick access to the top menu while scrolling the page, it will follow the scroll until you scroll the page back to the top.
3.2. <bookmark name = "bookmarks"> optional. He adds a “Bookmark” button. If you add this item, Magento will allow administrators to save the state of the columns and their positions for later use. Each administrator has his own list.
3.3. <columnsControls name = "columns_controls"> optional. He adds a “Columns” button. If you add this item, Magento will allow administrators to add or remove some columns from your grid table.
3.4. <filterSearch name = "fulltext"> optional. Adds a full text search field.
Magento developers have implemented a wonderful feature - search by any field in the database without writing additional code! All you need to do is add a full text index on 1 or more columns in the database. If your table has at least 1 full text index, then the entered text will be searched for it. You can add indexes in your install scripts. Starting with MySQL 5.6.4, InnoDB tables support Full text Index as well as MyISAM.
3.5. <filters name = "listing_filters"> is optional. This element may contain additional microfigure for filters and their display. In the example, you can see the <argument> and <filterSelect> elements.
<listingToolbar name="listing_top"> ... <filters name="listing_filters"> <!-- If you need to apply custom filter render you can use these tag --> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="templates" xsi:type="array"> <item name="filters" xsi:type="array"> <item name="select" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</item> <item name="template" xsi:type="string">ui/grid/filters/elements/ui-select</item> </item> </item> </item> </item> </argument> <!-- custom filter, Expected is one of ( filterInput, filterRange, filterSelect, containerConfiguration ) --> <filterSelect name="store_id"> <argument name="optionsProvider" xsi:type="configurableObject"> <argument name="class" xsi:type="string">Magento\Cms\Ui\Component\Listing\Column\Cms\Options</argument> </argument> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="provider" xsi:type="string">${ $.parentName }</item> <!-- data that will be sent to server --> <item name="dataScope" xsi:type="string">store_id</item> <item name="label" xsi:type="string" translate="true">Store View</item> <!-- default value --> <item name="captionValue" xsi:type="string">0</item> </item> </argument> </filterSelect> </filters> ... </listingToolbar> Let's start with the first one.
<argument>
Sometimes you may need to change a component or pattern for a specific filter type (for example, change the text input behavior within a filter list or select an item). The most common case in Magento 2 code is the replacement of the standard component and the dropdown select template from select to ui-select for the status filter.
Please note that this change will affect all filters of the <item name = {type}> type.
<filterSelect>
The “filterSelect” element is an example of changing the standard filter for the store_id column. In general, almost all columns have their own filter (text, textRange, date, select, etc.), but in some cases you need to redefine the behavior / display of such a filter for a certain column. The available types are filterInput, filterRange, filterSelect, and containerConfiguration (this type is indicated by an error message if you try to specify something else). The name must be identical to the column name, the filter you want to override, otherwise the mapping will not work.
3.6. The <massaction name = "listing_massaction"> element is optional. It adds massaction dropdown and pop-up messages if the user has not selected any rows before selecting an action.
Usually this element looks like a regular dropdown, but you can replace the component with a tree menu.
If you want to replace the default message “You haven't selected any items!” As shown above, you need to pass the following parameters to the massaction component, just paste your message into “noItemsMsg”.
<massaction name="listing_massaction"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="noItemsMsg" xsi:type="string">Type here any text</item> </item> </argument> ... </massaction> To add a new action to the dropdown, take a look at the example below. This is an example of a “delete” action, but you can add others as well.
<massaction name="listing_massaction"> ... <action name="delete"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="type" xsi:type="string">delete</item> <item name="label" xsi:type="string" translate="true">Delete</item> <item name="url" xsi:type="url" path="uigrid/index/massDelete"/> <item name="confirm" xsi:type="array"> <item name="title" xsi:type="string" translate="true">Delete items</item> <item name="message" xsi:type="string" translate="true">Are you sure you want to delete selected items?</item> </item> </item> </argument> </action> ... </massaction> <action name = "delete"> - must have a unique name, since Magento merdzhit elements by name.
<item name = "type"> - must be unique as well, otherwise Magento will show all such options in the dropdown, but they will all perform 1 and the same action as described in the 1st element with this type as Magento caches configs type. A good practice is to use the same name that you specified for the action.
<item name = "label"> is the name of the option.
<item name = "url"> - the action URL that will be used to process the selected lines. An array of selected / excluded elements will be sent there, filters applied and the phrase applied to the full text search. The difference between the transmitted parameters depends on the method of selecting elements. If you clicked “select all” then the element “excluded” will contain “false”. If you selected several elements manually, the “selected” array will contain the entity id of all selected entries. The most recent case, if you clicked “select all”, but later you manually added several records, the “excluded” array will contain the entity id of all the stripped records. To see an example of the implementation of the “massDelete” action and how these parameters are processed, see the class Magento \ Cms \ Controller \ Adminhtml \ Block \ massDelete.
<item name = "confirm"> is an optional item. If specified, Magento will display a modal window to confirm the action with the “Ok” or “Cancel” buttons. Title and Message can be changed as shown above.
Now let's consider not the usual button, but the mass edit button.
<massaction name="listing_massaction"> ... <action name="edit"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="type" xsi:type="string">edit</item> <item name="label" xsi:type="string" translate="true">Edit</item> <item name="callback" xsi:type="array"> <item name="provider" xsi:type="string">uigrid_grid_listing.uigrid_grid_listing.uigrid_grid_columns_editor</item> <item name="target" xsi:type="string">editSelected</item> </item> </item> </argument> </action> </massaction> The main difference between them is the <item name = "callback"> element. It is optional. Its parameters make it possible to edit several lines at once. In fact, he applies the callback to the selected rows.
This is how the grid changes if several lines are selected:
and if only 1 runoff is selected:
For such editing, only those columns that have an “editor” attribute (more information about it below) will be available.
<item name = "provider"> is the path to the component. Notice the line in the example. The value should follow the following format {filename}. {Filename}. {Columns_element_name} _editor.
<item name = "target"> is the name of the method inside the knockoutjs component, "editSelected" should be specified here.
Detailed configuration of the editor will be discussed later.
Speaking of massaction dropdown options, as you saw earlier, there are 2 types of options available. Normal (select) and tree-like options. Unfortunately, the “select” component does not support submenus, but tree-massactions supports. To use this component, you need to tell Magento to use the Magento_Ui / js / grid / tree-massactions component. The “action” element should already be familiar to you, so let's take a look at the minor changes in the following example.
<massaction name="listing_massaction"> ... <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/grid/tree-massactions</item> </item> </argument> <action name="status"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="type" xsi:type="string">status</item> <item name="label" xsi:type="string" translate="true">Change status</item> </item> </argument> <argument name="actions" xsi:type="array"> <item name="0" xsi:type="array"> <item name="type" xsi:type="string">enable</item> <item name="label" xsi:type="string" translate="true">Enable</item> <item name="url" xsi:type="url" path="uigird/index/massStatus"> <param name="status">1</param> </item> </item> <item name="1" xsi:type="array"> <item name="type" xsi:type="string">disable</item> <item name="label" xsi:type="string" translate="true">Disable</item> <item name="url" xsi:type="url" path="uigrid/index/massStatus"> <param name="status">2</param> </item> </item> </argument> </action> ... </massaction> <argument name="actions" xsi:type="array"> . 0 N, knockoutjs (javascript) .
<param name="…">…</param> . post , get (. ). .
3.7. <paging name="listing_paging"/> . . , Magento 1 .
:
:
3.8. <exportButton name="export_button"/> . export 2 : export as csv, export as xml. , . , . , Magento ui_component . , ( ). , devdocs.magento.com/guides/v2.1/ui-components/ui-export.html .
4. <columns name="uigrid_grid_columns">
... <columns name="uigrid_grid_columns"> <argument name="data" xsi:type="array"> ... </argument> <selectionsColumn name="ids"> ... </selectionsColumn> <column name="entity_id"> ... </column> <actionsColumn name="actions" class="Test\UiGrid\Ui\Component\Listing\Column\Action"/> </columns> . , .
<columns name="uigrid_grid_columns"> — {extension}_{entity}_columns , <item name="spinner" xsi:type="string">name_of_columns_element</item>. «name», «class» vendor/magento/module-catalog/view/adminhtml/ui_component/product_listing.xml.
<columns name="product_columns" class="Magento\Catalog\Ui\Component\Listing\Columns">
columns - , - .
Editor
... <columns name="uigrid_grid_columns"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="editorConfig" xsi:type="array"> <item name="selectProvider" xsi:type="string">uigrid_grid_listing.uigrid_grid_listing.uigrid_grid_columns.ids</item> <item name="enabled" xsi:type="boolean">true</item> <item name="indexField" xsi:type="string">entity_id</item> <item name="clientConfig" xsi:type="array"> <item name="saveUrl" xsi:type="url" path="*/*/inlineEdit"/> <item name="validateBeforeSave" xsi:type="boolean">false</item> <!-- <item name="validateBeforeSave" xsi:type="boolean">true</item> <item name="validateUrl" xsi:type="url" path="*/*/checkData"/> --> </item> </item> </item> </argument> ... </columns> «edit» .
<item name="selectProvider" xsi:type="string"> — / , :
{filename}.{filename}.{columns_name}.{selectionsColumn_name},
uigrid_grid_listing.uigrid_grid_listing.uigrid_grid_columns.ids.
<item name="enabled" xsi:type="boolean"> — / .
<item name="indexField" xsi:type="string"> — entity id, .
<item name="clientConfig" xsi:type="array"> — «Save» .
<item name="saveUrl" xsi:type="url" path="*/*/inlineEdit"/> — , knockoutjs . «path», "*/*/inlineEditor", , .
<item name="validateBeforeSave" xsi:type="boolean"> — . – «true», «validateUrl», knockoutjs . , knockoutjs «validateUrl» ( http 200), knockoutjs saveUrl, . «false».
<item name="validateUrl" xsi:type="url" path="*/*/checkData"/> — .
InlineEditor
( CMS page/block ), <argument> <columns> «editorConfig». , «provider», {filename}.{filename}.{columns_name}_editor, .
... <columns name="uigrid_grid_columns"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="editorConfig" xsi:type="array"> ... </item> <item name="childDefaults" xsi:type="array"> <item name="fieldAction" xsi:type="array"> <item name="provider" xsi:type="string">uigrid_grid_listing.uigrid_grid_listing.uigrid_grid_columns_editor</item> <item name="target" xsi:type="string">startEdit</item> <item name="params" xsi:type="array"> <item name="0" xsi:type="string">${ $.$data.rowIndex }</item> <item name="1" xsi:type="boolean">true</item> </item> </item> </item> </item> </argument> ... </columns> . . , inlineEditor. 2 : provider,0. {filename}.{filename}.{columns_name}.actions, «action» (. ).
... <columns name="uigrid_grid_columns"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> ... <item name="childDefaults" xsi:type="array"> <item name="fieldAction" xsi:type="array"> <item name="provider" xsi:type="string">uigrid_grid_listing.uigrid_grid_listing.uigrid_grid_columns.actions</item> <item name="target" xsi:type="string">applyAction</item> <item name="params" xsi:type="array"> <!-- name of action from action class --> <item name="0" xsi:type="string">view</item> <item name="1" xsi:type="string">${ $.$data.rowIndex }</item> </item> </item> </item> </item> </argument> ... </columns> Columns
<column|actionsColumn|selectionsColumn name="{unique_name}" class="{class_name}"> <argument name="data" xsi:type="array"> <item name="options" xsi:type="object">{source_model_class}</item> <item name="config" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/{date|select|thumbnail|column|*}</item> <item name="bodyTmpl" xsi:type="string">ui/grid/cells/{html|text|*}</item> <item name="add_field" xsi:type="boolean">{true|false}</item> <item name="sortable" xsi:type="boolean">{true|false}</item> <item name="filter" xsi:type="string">{textRange|dateRange|select|text}</item> <item name="sorting" xsi:type="string">{asc|desc}</item> <item name="label" xsi:type="string" translate="true">{label}</item> <item name="visible" xsi:type="boolean">{true|false}</item> <item name="draggable" xsi:type="boolean">{true|false}</item> <!-- <item name="editor" xsi:type="string">{text|date|select}</item> --> <item name="editor" xsi:type="array"> <item name="editorType" xsi:type="string">{text|date|select}</item> <item name="options" xsi:type="array"> <item name="showsTime" xsi:type="boolean">{true|false}</item> </item> <item name="validation" xsi:type="string">{validation_rule}</item> <!-- <item name="validation" xsi:type="array"> <item name="validate-xml-identifier" xsi:type="boolean">true</item> <item name="required-entry" xsi:type="boolean">true</item> </item> --> </item> <item name="timezone" xsi:type="boolean">{true|false}</item> <item name="dataType" xsi:type="string">{dataType}</item> <item name="sortOrder" xsi:type="number">{position}</item> <item name="options" xsi:type="array"> <item name="0" xsi:type="array"> <item name="value" xsi:type="string">{value}</item> <item name="label" xsi:type="string">{option_label}</item> </item> <item name="1" xsi:type="array"> <item name="value" xsi:type="string">{value}</item> <item name="label" xsi:type="string">{option_label}</item> </item> </item> <item name="has_preview" xsi:type="boolean">{true|false}</item> </item> </argument> </column|actionsColumn|selectionsColumn> <column|actionsColumn|selectionsColumn> — <columns> , . <column> , <actionsColumn> «action» <selectionsColumn> . <actionsColumn> . selectionsColumn ids, class , , ..
<column name="{unique_name}"> — . . Magento . ( ), . , Magento () . «class», / .
<column class="{class_name}"> — . «» / / . / . Magento\Ui\Component\Listing\Columns\Date , . Magento\Catalog\Ui\Component\Listing\Columns\Thumbnail . , .
<argument name="data" xsi:type="array"> — ( ) ( «config» ).
<item name="options" xsi:type="object"> — . dataType «select» (. ) source , ( «data» , knockoutjs ). , . .
<item name="config" xsi:type="array"> — - / knockoutjs . knockoutjs ViewModel. , ViewModel «config» .
<item name="component" xsi:type="string"> — . , . , «Sep 5, 2016 8:03:07 PM» 2016-09-05 . – Magento_Ui/js/grid/columns/column, . ViewModel' Magento_Ui/js/grid/columns/. () :
Magento_Ui/js/grid/columns/column – , .. ,
Magento_Ui/js/grid/columns/date – ,
Magento_Ui/js/grid/columns/select – ,
Magento_Ui/js/grid/columns/thumbnail – ,
, «» Magento_Ui/js/grid/columns/column.
<item name="bodyTmpl" xsi:type="string"> — . («view») , . ui/grid/cells/text. html , ui/grid/cells/html ( Store Id ) ui/grid/cells ( ).
<item name="add_field" xsi:type="boolean"> — . ui_*.xml , DataProvider/collection eav/ .
<item name="sortable" xsi:type="boolean"> — . «true». .
<item name="filter" xsi:type="string"> — . . : textRange, dateRange, select, text. . (ID – textRange, Created – dateRange, Store View – , Name – text, Status – select).
( , , Website/StoreView) <filters name="listing_filters">.
<item name="sorting" xsi:type="string"> — , . : asc, desc. 1 .
<item name="label" xsi:type="string"> — . , , . , «ui/grid/columns/text» , «headerTmpl» . , .
<item name="visible" xsi:type="boolean"> — . «true». , , .
<item name="draggable" xsi:type="boolean"> — . «true». / .
<item name="editor" xsi:type="{string|array}"> — . . . 2 . «string» «array». «string» () , «array». 3 : text, date, select. 1 .
:
- <item name="editorType" xsi:type="string"> — . «string» : text, date, select.
- <item name="showsTime" xsi:type="boolean"> — . «date» . , . «false».
- <item name="validation" xsi:type="{string|array}"> — . «string» «array». . vendor\magento\magento2-base\lib\web\mage\validation.js. 1 «array» :
- <item name="{validation_rule}" xsi:type="boolean">true</item>
<item name="timezone" xsi:type="boolean"> — . «true». «date». Magento\Ui\Component\Listing\Columns\Date . .
<item name="dataType" xsi:type="string"> — . , «select». «text». () /vendor/magento/module-ui/view/base/ui_component/etc/definition.xml. dataType? , . Magento , dataType , definition.xml, , dataType («class» ). , «data» . Magento definition.xml, , knockoutjs . , dataType «select» Magento\Ui\Component\Form\Element\Select, . «options» source model , Magento_Ui/js/grid/columns/select ( select ).
<item name="sortOrder" xsi:type="number"> — . sortOrder , Magento ui_component . , Magento sortOrder , ui_component ! , , sortOrder . , . .
<item name="options" xsi:type="array"> — «select». «select» . , «option» dataType=«select». . «select» , id. dataType , . :
<item name="0" xsi:type="array"> <item name="value" xsi:type="string">{value}</item> <item name="label" xsi:type="string">{option_label}</item> </item> <item name="1" xsi:type="array"> <item name="value" xsi:type="string">{value}</item> <item name="label" xsi:type="string">{option_label}</item> </item> /. {value} {option_label}. , dataType .
<item name="has_preview" xsi:type="boolean"> — . «thumbnail» /. «false». .
, .
Examples
Minimum required data for creating a column
<column name="data"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="label" xsi:type="string" translate="true">Data</item> </item> </argument> </column> «data» . .
Selections column
. «select all», «select all on this page», «deselect all», «deselect all on this page», , id. .
<selectionsColumn name="ids"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="indexField" xsi:type="string">entity_id</item> </item> </argument> </selectionsColumn> <selectionsColumn name="ids"> «ids».
<item name="indexField" xsi:type="string"> primary key .
Text column
<column name="name"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="editor" xsi:type="string">text</item> <item name="filter" xsi:type="string">text</item> <item name="label" xsi:type="string" translate="true">Name</item> </item> </argument> </column> , .
Date column
2 . Date datetime.
<column name="date" class="Magento\Ui\Component\Listing\Columns\Date"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <!-- <item name="editor" xsi:type="string">date</item> --> <item name="editor" xsi:type="array"> <item name="editorType" xsi:type="string">date</item> <item name="options" xsi:type="array"> <item name="showsTime" xsi:type="boolean">true</item> </item> </item> <item name="timezone" xsi:type="boolean">false</item> <item name="filter" xsi:type="string">dateRange</item> <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item> <item name="label" xsi:type="string" translate="true">Created</item> <item name="dateFormat" xsi:type="string">MMM d</item> </item> </argument> </column> Magento\Ui\Component\Listing\Columns\Date .
Magento_Ui/js/grid/columns/date .
<item name="editor" xsi:type="array"> .
<item name="showsTime" xsi:type="boolean"> — . . «false». Magento «true». showTime = true, – Magento 2.
<item name="timezone" xsi:type="boolean"> — . «true». «false», . , ( ) «save» .
<item name="filter" xsi:type="string">dateRange</item> — . . , , DataRange .
<item name="dateFormat" xsi:type="string"> — . . «MMM d, YYYY h:mm:ss A», «Sep 5, 2016 9:00:00 AM».
Select column
«select» Status. 2 Enabled Disabled.
<column name="is_active"> <argument name="data" xsi:type="array"> <item name="options" xsi:type="object">Magento\Cms\Model\Block\Source\IsActive</item> <item name="config" xsi:type="array"> <item name="dataType" xsi:type="string">select</item> <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item> <item name="editor" xsi:type="string">select</item> <item name="filter" xsi:type="string">select</item> <item name="label" xsi:type="string" translate="true">Status</item> </item> </argument> </column> <item name="options" xsi:type="object"> — . ( ), knockoutjs .
<item name="dataType" xsi:type="string"> — . «options» . «select» knockoutjs . «select».
xml.
<column name="is_active"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="options" xsi:type="array"> <item name="0" xsi:type="array"> <item name="value" xsi:type="string">0</item> <item name="label" xsi:type="string">Disabled</item> </item> <item name="1" xsi:type="array"> <item name="value" xsi:type="string">1</item> <item name="label" xsi:type="string">Enabled</item> </item> </item> <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item> <item name="editor" xsi:type="string">select</item> <item name="filter" xsi:type="string">select</item> <item name="label" xsi:type="string" translate="true">Status</item> </item> </argument> </column> <item name="options" xsi:type="array"> — . /.
Store View column
<column name="store_id" class="Magento\Store\Ui\Component\Listing\Column\Store"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item> <item name="label" xsi:type="string" translate="true">Store View</item> </item> </argument> </column> Store View store_id ( ), . , . html, . «bodyTmpl». Magento\Store\Ui\Component\Listing\Column\Store Website-Store-StoreView html . , , .
Thumbnail column
<column name="image" class="Magento\Catalog\Ui\Component\Listing\Columns\Thumbnail"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/thumbnail</item> <item name="has_preview" xsi:type="string">1</item> <item name="label" xsi:type="string" translate="true">Image</item> </item> </argument> </column> Thumbnail . :
- {column_name}_src – ,
- {column_name}_alt – alt ,
- {column_name}_link – , ,
- {column_name}_orig_src – , .
*{column_name} «image» .
, Magento\Catalog\Ui\Component\Listing\Columns\Thumbnail. , .
<item name="has_preview" xsi:type="boolean"> — . .
Action column
«Action» «actionColumn» «column», . 2 .
«action» :
<actionsColumn name="actions" class="Test\UiGrid\Ui\Component\Listing\Column\Action"/> :
<actionsColumn name="actions" class="Test\UiGrid\Ui\Component\Listing\Column\Action"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="indexField" xsi:type="string">entity_id</item> </item> </argument> </actionsColumn> , . «indexField» . , , knockoutjs . , .
, . Magento\Cms\Ui\Component\Listing\Column\BlockActions.php.
Magento «Select» 1 .
Second way
«action» .
<actionsColumn name="actions" class="Magento\Sales\Ui\Component\Listing\Column\ViewAction"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="indexField" xsi:type="string">entity_id</item> <item name="viewUrlPath" xsi:type="string">ugrid/enity/view</item> <item name="urlEntityParamName" xsi:type="string">uigrid_id</item> </item> </argument> </actionsColumn> «Magento\Sales\Ui\Component\Listing\Column\ViewAction» . . - , primary key «entity_id».
<item name="indexField" xsi:type="string"> — . ,
<item name="viewUrlPath" xsi:type="string"> — ,
<item name="urlEntityParamName" xsi:type="string"> — entity_id , GET . «entity_id», , - entity_id .
xml, , .
Must remember
Magento , , ui_bookmark ui_component.xml . , Magento , «actions» , sortOrder . , ( ) ( «default», , «current» ).
Conclusion
, , ui . knockoutjs ui , Magento 1. , , . Magento 2, , . . ui . Ui Component .
Source: https://habr.com/ru/post/315182/
All Articles