Checkboxes et Bookmarks
Vous avez certainement remarqué le bouton « Bookmarks » (Symbolisé par l’oeil et le texte « Default View »)
Il permet de choisir des colonnes à afficher, des tris et des filtres, puis de mémoriser ces paramètres pour plus tard.
Pour le moment l’affichage est présent, mais la création de vue ne fonctionne pas.
Nous allons modifier le XML en conséquence.
Nous allons en profiter aussi pour ajouter des checkboxes au début de chaque ligne de notre grid.
Pour cela, nous devons ajouter le XML suivant avant notre premier noeud « column » :
<argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <!-- Bookmarks behaviour --> <item name="storageConfig" xsi:type="array"> <item name="provider" xsi:type="string">jobs_department_listing.jobs_department_listing.listing_top.bookmarks</item> <item name="namespace" xsi:type="string">current</item> </item> <item name="childDefaults" xsi:type="array"> <item name="controlVisibility" xsi:type="boolean">true</item> <!-- Bookmarks behaviour --> <item name="storageConfig" xsi:type="array"> <item name="provider" xsi:type="string">jobs_department_listing.jobs_department_listing.listing_top.bookmarks</item> <item name="root" xsi:type="string">columns.${ $.index }</item> <item name="namespace" xsi:type="string">current.${ $.storageConfig.root}</item> </item> </item> </item> </argument> <!-- Add columns with checkboxes --> <selectionsColumn name="ids"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="resizeEnabled" xsi:type="boolean">false</item> <item name="resizeDefaultWidth" xsi:type="string">55</item> <item name="indexField" xsi:type="string">entity_id</item> </item> </argument> </selectionsColumn>
Ce qui nous donne le XML complet suivant :
<?xml version="1.0" encoding="UTF-8"?> <!-- /** * Copyright © 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ --> <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <!-- Integration --> <argument name="data" xsi:type="array"> <item name="js_config" xsi:type="array"> <!-- we define a provider --> <item name="provider" xsi:type="string">jobs_department_listing.jobs_department_listing_data_source</item> <!-- same string as above --> <item name="deps" xsi:type="string">jobs_department_listing.jobs_department_listing_data_source</item> </item> <!-- define column type --> <item name="spinner" xsi:type="string">jobs_department_columns</item> <!-- Button to add new 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 Department</item> <item name="class" xsi:type="string">primary</item> <item name="url" xsi:type="string">*/*/new</item> <!-- magento will translate it by jobs/department/new --> </item> </item> </argument> <!-- Data source --> <dataSource name="jobs_department_listing_data_source"> <argument name="dataProvider" xsi:type="configurableObject"> <argument name="class" xsi:type="string">DepartmentGridDataProvider</argument> <!-- Data provider class --> <argument name="name" xsi:type="string">jobs_department_listing_data_source</argument> <!-- provider defined above --> <argument name="primaryFieldName" xsi:type="string">entity_id</argument> <!-- Primary key --> <argument name="requestFieldName" xsi:type="string">id</argument> <!-- URL name parameter --> <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"> <!-- Primary key column name --> <item name="indexField" xsi:type="string">entity_id</item> </item> </item> </argument> </argument> </dataSource> <!-- Container Listing Top --> <container name="listing_top"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">ui/grid/toolbar</item> </item> </argument> <!-- Button to manage views --> <bookmark name="bookmarks"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/bookmarks/bookmarks</item> <item name="displayArea" xsi:type="string">dataGridActions</item> <item name="storageConfig" xsi:type="array"> <item name="saveUrl" xsi:type="url" path="mui/bookmark/save"/> <item name="deleteUrl" xsi:type="url" path="mui/bookmark/delete"/> <item name="namespace" xsi:type="string">jobs_department_listing</item> </item> </item> </argument> </bookmark> <!-- Button to manage columns --> <container name="columns_controls"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="columnsData" xsi:type="array"> <item name="provider" xsi:type="string">jobs_department_listing.jobs_department_listing.jobs_department_columns</item> </item> <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/columns</item> <item name="displayArea" xsi:type="string">dataGridActions</item> </item> </argument> </container> </container> <!-- Columns --> <columns name="jobs_department_columns"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <!-- Bookmarks behaviour --> <item name="storageConfig" xsi:type="array"> <item name="provider" xsi:type="string">jobs_department_listing.jobs_department_listing.listing_top.bookmarks</item> <item name="namespace" xsi:type="string">current</item> </item> <item name="childDefaults" xsi:type="array"> <item name="controlVisibility" xsi:type="boolean">true</item> <!-- Bookmarks behaviour --> <item name="storageConfig" xsi:type="array"> <item name="provider" xsi:type="string">jobs_department_listing.jobs_department_listing.listing_top.bookmarks</item> <item name="root" xsi:type="string">columns.${ $.index }</item> <item name="namespace" xsi:type="string">current.${ $.storageConfig.root}</item> </item> </item> </item> </argument> <!-- Add columns with checkboxes --> <selectionsColumn name="ids"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="resizeEnabled" xsi:type="boolean">false</item> <item name="resizeDefaultWidth" xsi:type="string">55</item> <item name="indexField" xsi:type="string">entity_id</item> </item> </argument> </selectionsColumn> <!-- ID Column --> <column name="entity_id"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">textRange</item> <item name="sorting" xsi:type="string">asc</item> <item name="label" xsi:type="string" translate="true">ID</item> </item> </argument> </column> <!-- Name Column --> <column name="name"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">text</item> <item name="editor" xsi:type="array"> <item name="editorType" xsi:type="string">text</item> <item name="validation" xsi:type="array"> <item name="required-entry" xsi:type="boolean">true</item> </item> </item> <item name="label" xsi:type="string" translate="true">Name</item> </item> </argument> </column> </columns> </listing>
Vous pouvez maintenant retirer des colonnes de l’affichage, puis sauvegarder votre nouvelle vue avec le nom de votre choix.
Nous avons aussi les checkboxes, qui nous permettrons de mettre en plasse des actions de masse par la suite. Comme par exemple, supprimer toutes les lignes cochées.
Actions de colonnes
Pour le moment nous avons nos lignes avec nos entrées, mais au clic, nous n’avons aucune interaction avec celles-ci.
Nous allons ajouter 2 actions : Editer et Supprimer.
Pour cela commencer a ajouter ce XML après la dernière balise « column » :
<!-- Action columns --> <actionsColumn name="actions" class="Maxime\Jobs\Ui\Component\Listing\Column\DepartmentActions"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="resizeEnabled" xsi:type="boolean">false</item> <item name="resizeDefaultWidth" xsi:type="string">107</item> <item name="indexField" xsi:type="string">entity_id</item> </item> </argument> </actionsColumn>
Ce qui vous donne le XML suivant :
<?xml version="1.0" encoding="UTF-8"?> <!-- /** * Copyright © 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ --> <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <!-- Integration --> <argument name="data" xsi:type="array"> <item name="js_config" xsi:type="array"> <!-- we define a provider --> <item name="provider" xsi:type="string">jobs_department_listing.jobs_department_listing_data_source</item> <!-- same string as above --> <item name="deps" xsi:type="string">jobs_department_listing.jobs_department_listing_data_source</item> </item> <!-- define column type --> <item name="spinner" xsi:type="string">jobs_department_columns</item> <!-- Button to add new 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 Department</item> <item name="class" xsi:type="string">primary</item> <item name="url" xsi:type="string">*/*/new</item> <!-- magento will translate it by jobs/department/new --> </item> </item> </argument> <!-- Data source --> <dataSource name="jobs_department_listing_data_source"> <argument name="dataProvider" xsi:type="configurableObject"> <argument name="class" xsi:type="string">DepartmentGridDataProvider</argument> <!-- Data provider class --> <argument name="name" xsi:type="string">jobs_department_listing_data_source</argument> <!-- provider defined above --> <argument name="primaryFieldName" xsi:type="string">entity_id</argument> <!-- Primary key --> <argument name="requestFieldName" xsi:type="string">id</argument> <!-- URL name parameter --> <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"> <!-- Primary key column name --> <item name="indexField" xsi:type="string">entity_id</item> </item> </item> </argument> </argument> </dataSource> <!-- Container Listing Top --> <container name="listing_top"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">ui/grid/toolbar</item> </item> </argument> <!-- Button to manage views --> <bookmark name="bookmarks"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/bookmarks/bookmarks</item> <item name="displayArea" xsi:type="string">dataGridActions</item> <item name="storageConfig" xsi:type="array"> <item name="saveUrl" xsi:type="url" path="mui/bookmark/save"/> <item name="deleteUrl" xsi:type="url" path="mui/bookmark/delete"/> <item name="namespace" xsi:type="string">jobs_department_listing</item> </item> </item> </argument> </bookmark> <!-- Button to manage columns --> <container name="columns_controls"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="columnsData" xsi:type="array"> <item name="provider" xsi:type="string">jobs_department_listing.jobs_department_listing.jobs_department_columns</item> </item> <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/columns</item> <item name="displayArea" xsi:type="string">dataGridActions</item> </item> </argument> </container> </container> <!-- Columns --> <columns name="jobs_department_columns"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <!-- Bookmarks behaviour --> <item name="storageConfig" xsi:type="array"> <item name="provider" xsi:type="string">jobs_department_listing.jobs_department_listing.listing_top.bookmarks</item> <item name="namespace" xsi:type="string">current</item> </item> <item name="childDefaults" xsi:type="array"> <item name="controlVisibility" xsi:type="boolean">true</item> <!-- Bookmarks behaviour --> <item name="storageConfig" xsi:type="array"> <item name="provider" xsi:type="string">jobs_department_listing.jobs_department_listing.listing_top.bookmarks</item> <item name="root" xsi:type="string">columns.${ $.index }</item> <item name="namespace" xsi:type="string">current.${ $.storageConfig.root}</item> </item> </item> </item> </argument> <!-- Add columns with checkboxes --> <selectionsColumn name="ids"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="resizeEnabled" xsi:type="boolean">false</item> <item name="resizeDefaultWidth" xsi:type="string">55</item> <item name="indexField" xsi:type="string">entity_id</item> </item> </argument> </selectionsColumn> <!-- ID Column --> <column name="entity_id"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">textRange</item> <item name="sorting" xsi:type="string">asc</item> <item name="label" xsi:type="string" translate="true">ID</item> </item> </argument> </column> <!-- Name Column --> <column name="name"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">text</item> <item name="editor" xsi:type="array"> <item name="editorType" xsi:type="string">text</item> <item name="validation" xsi:type="array"> <item name="required-entry" xsi:type="boolean">true</item> </item> </item> <item name="label" xsi:type="string" translate="true">Name</item> </item> </argument> </column> <!-- Action columns --> <actionsColumn name="actions" class="Maxime\Jobs\Ui\Component\Listing\Column\DepartmentActions"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="resizeEnabled" xsi:type="boolean">false</item> <item name="resizeDefaultWidth" xsi:type="string">107</item> <item name="indexField" xsi:type="string">entity_id</item> </item> </argument> </actionsColumn> </columns> </listing>
Vous remarquez que l’on déclare un objet Maxime\Jobs\Ui\Component\Listing\Column\DepartmentActions, nous allons le créer :
app/code/Maxime/Jobs/Ui/Component/Listing/Column/DepartmentActions.php
Avec le contenu suivant :
<?php /** * Copyright © 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ namespace Maxime\Jobs\Ui\Component\Listing\Column; use Magento\Framework\View\Element\UiComponent\ContextInterface; use Magento\Framework\View\Element\UiComponentFactory; use Magento\Ui\Component\Listing\Columns\Column; use Magento\Framework\UrlInterface; /** * Class DepartmentActions */ class DepartmentActions extends Column { /** * @var UrlInterface */ protected $urlBuilder; /** * @param ContextInterface $context * @param UiComponentFactory $uiComponentFactory * @param UrlInterface $urlBuilder * @param array $components * @param array $data */ public function __construct( ContextInterface $context, UiComponentFactory $uiComponentFactory, UrlInterface $urlBuilder, array $components = [], array $data = [] ) { $this->urlBuilder = $urlBuilder; parent::__construct($context, $uiComponentFactory, $components, $data); } /** * Prepare Data Source * * @param array $dataSource * @return array */ public function prepareDataSource(array $dataSource) { if (isset($dataSource['data']['items'])) { foreach ($dataSource['data']['items'] as &$item) { $item[$this->getData('name')]['edit'] = [ 'href' => $this->urlBuilder->getUrl( 'jobs/department/edit', ['id' => $item['entity_id']] ), 'label' => __('Edit'), 'hidden' => false, ]; $item[$this->getData('name')]['delete'] = [ 'href' => $this->urlBuilder->getUrl( 'jobs/department/delete', ['id' => $item['entity_id']] ), 'label' => __('Delete'), 'hidden' => false, ]; } } return $dataSource; } }
Ce qui est important, c’est la partie « prepareDataSource ». Ici nous définissons 2 actions : Editer et Supprimer, avec les URL et les paramètres à passer qui vont avec.
Nous avons le rendu suivant :
A noter que si nous mettons qu’une seule action dans notre code nous n’aurons pas de menu déroulant, mais un lien simple :
Voilà, vous en savez un peu plus sur les grid à partir de maintenant, mais ce n’est pas fini !
Prochaine étape et non des moindres, les filtres !
Chez moi les checkboxes sont à droite. J’ai cru à une erreur de ma part et pourtant même en copiant collant le code fournis j’ai la colonne entre les colonnes name et actions. J’ai essayé d’intégrer un 1 à chaque colonnes pour les ordonner mais ça n’a rien changé
J’ai également eu le problème.
Pour corriger le souci, j’ai dû supprimer dans la table « ui_bookmark », les lignes dont le champ « namespace » équivaut à « jobs_department_listing ».
En faisant un refresh, les colonnes étaient à la bonne place.
Excellent, merci pour l’astuce.
En effet, le problème semble ‘connu’ ..
https://magento.stackexchange.com/a/137149
Bonjour j’ai l’impression que le premier Bookmarks behaviour dans Columns ne sert a rien sur magento 2.2.2.
En le retirant le résultat reste le même.