Formation Magento 2 : Chapitre 4 – Partie D
Ajout de filtres dans une grid
Sur notre grid des deparments, nous allons avoir 2 champs sur lesquels appliquer nos filtres :
– l’ID
– Le nom
Ces filtres sont déclarés dans notre XML, nous le mettrons après la fermeture du noeud <container name="columns_controls"> dans le fichier :
app/code/Maxime/Jobs/view/adminhtml/ui_component/jobs_department_listing.xml
<!-- Filters -->
<filters name="listing_filters">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<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.filters</item>
</item>
<item name="childDefaults" xsi:type="array">
<item name="provider" xsi:type="string">jobs_department_listing.jobs_department_listing.listing_top.listing_filters</item>
<item name="imports" xsi:type="array">
<item name="visible" xsi:type="string">jobs_department_listing.jobs_department_listing.listing_top.bookmarks:current.columns.${ $.index }.visible</item>
</item>
</item>
</item>
</argument>
<!-- Department ID Filter -->
<filterRange name="department_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">entity_id</item> <!-- Column name in DB -->
<item name="label" xsi:type="string" translate="true">ID</item> <!-- Label on grid -->
<item name="childDefaults" xsi:type="array">
<item name="provider" xsi:type="string">jobs_department_listing.jobs_department_listing.listing_top.listing_filters</item>
</item>
</item>
</argument>
<filterInput name="from">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">from</item>
<item name="label" xsi:type="string" translate="true">from</item>
<item name="placeholder" xsi:type="string" translate="true">From</item>
</item>
</argument>
</filterInput>
<filterInput name="to">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">to</item>
<item name="label" xsi:type="string" translate="true">to</item>
<item name="placeholder" xsi:type="string" translate="true">To</item>
</item>
</argument>
</filterInput>
</filterRange>
<!-- Department name Filter -->
<filterInput name="department_name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">name</item> <!-- Column name in DB -->
<item name="label" xsi:type="string" translate="true">Name</item> <!-- Label on grid -->
</item>
</argument>
</filterInput>
</filters>
Notre premier filtre concernant l’ID, est de type « range ». Il y’a donc 2 champs pour filtrer de à partir de la première valeur, jusque la deuxième.
Si vous voulez filtrer sur un seul ID, il faut donc mettre la même valeur dans les 2 champs.
Le deuxième filtre sur le nom est un champ text classique, et la recherche effectuée est du type « LIKE %% » sur la colonne.
Voici le XML complet tel qu’il est actuellement :
<?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>
<!-- Filters -->
<filters name="listing_filters">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<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.filters</item>
</item>
<item name="childDefaults" xsi:type="array">
<item name="provider" xsi:type="string">jobs_department_listing.jobs_department_listing.listing_top.listing_filters</item>
<item name="imports" xsi:type="array">
<item name="visible" xsi:type="string">jobs_department_listing.jobs_department_listing.listing_top.bookmarks:current.columns.${ $.index }.visible</item>
</item>
</item>
</item>
</argument>
<!-- Department ID Filter -->
<filterRange name="department_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">entity_id</item> <!-- Column name in DB -->
<item name="label" xsi:type="string" translate="true">ID</item> <!-- Label on grid -->
<item name="childDefaults" xsi:type="array">
<item name="provider" xsi:type="string">jobs_department_listing.jobs_department_listing.listing_top.listing_filters</item>
</item>
</item>
</argument>
<filterInput name="from">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">from</item>
<item name="label" xsi:type="string" translate="true">from</item>
<item name="placeholder" xsi:type="string" translate="true">From</item>
</item>
</argument>
</filterInput>
<filterInput name="to">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">to</item>
<item name="label" xsi:type="string" translate="true">to</item>
<item name="placeholder" xsi:type="string" translate="true">To</item>
</item>
</argument>
</filterInput>
</filterRange>
<!-- Department name Filter -->
<filterInput name="department_name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">name</item> <!-- Column name in DB -->
<item name="label" xsi:type="string" translate="true">Name</item> <!-- Label on grid -->
</item>
</argument>
</filterInput>
</filters>
</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>
Et le rendu dans l’admin Magento :
Ajout d’un filtre fulltext dans une grid
Nous allons mettre en place un nouveau filtre présent dans Magento 2.
Pour cela, ajouter le XML suivant après les filtres que l’on vient de déclarer (après la fermeture de la balise « filters ») :
<!-- Filter Search -->
<filterSearch name="fulltext">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="provider" xsi:type="string">jobs_department_listing.jobs_department_listing_data_source</item>
<item name="chipsProvider" xsi:type="string">jobs_department_listing.jobs_department_listing.listing_top.listing_filters_chips</item>
<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.search</item>
</item>
</item>
</argument>
</filterSearch>
Nous avons donc le XML qui suit :
<?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>
<!-- Filters -->
<filters name="listing_filters">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<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.filters</item>
</item>
<item name="childDefaults" xsi:type="array">
<item name="provider" xsi:type="string">jobs_department_listing.jobs_department_listing.listing_top.listing_filters</item>
<item name="imports" xsi:type="array">
<item name="visible" xsi:type="string">jobs_department_listing.jobs_department_listing.listing_top.bookmarks:current.columns.${ $.index }.visible</item>
</item>
</item>
</item>
</argument>
<!-- Department ID Filter -->
<filterRange name="department_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">entity_id</item> <!-- Column name in DB -->
<item name="label" xsi:type="string" translate="true">ID</item> <!-- Label on grid -->
<item name="childDefaults" xsi:type="array">
<item name="provider" xsi:type="string">jobs_department_listing.jobs_department_listing.listing_top.listing_filters</item>
</item>
</item>
</argument>
<filterInput name="from">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">from</item>
<item name="label" xsi:type="string" translate="true">from</item>
<item name="placeholder" xsi:type="string" translate="true">From</item>
</item>
</argument>
</filterInput>
<filterInput name="to">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">to</item>
<item name="label" xsi:type="string" translate="true">to</item>
<item name="placeholder" xsi:type="string" translate="true">To</item>
</item>
</argument>
</filterInput>
</filterRange>
<!-- Department name Filter -->
<filterInput name="department_name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">name</item> <!-- Column name in DB -->
<item name="label" xsi:type="string" translate="true">Name</item> <!-- Label on grid -->
</item>
</argument>
</filterInput>
</filters>
<!-- Filter Search -->
<filterSearch name="fulltext">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="provider" xsi:type="string">jobs_department_listing.jobs_department_listing_data_source</item>
<item name="chipsProvider" xsi:type="string">jobs_department_listing.jobs_department_listing.listing_top.listing_filters_chips</item>
<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.search</item>
</item>
</item>
</argument>
</filterSearch>
</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 pouvez constater l’ajout de ce nouveau filtre dans notre page liste des departments :
Si vous tapez un mot clé comme « marketing », vous remarquerez que le filtre ne fonctionne pas.
En effet, nous devons déclarer les colonnes que nous souhaitons utiliser dans la structure de notre table en BDD.
Pour cela, nous allons mettre à jour notre module, et y ajouter la création des index fulltext pour notre table des départements. Nous en ferons de même pour la table des Jobs.
Rendez-vous dans le fichier :
app/code/Maxime/Jobs/etc/module.xml
Et passez la version du module en 1.0.0.2
Allez maintenant dans le fichier :
app/code/Maxime/Jobs/Setup/UpgradeSchema.php
Nous allons mettre en place notre mise à jour :
if (version_compare($context->getVersion(), '1.0.0.2') < 0) {
/**
* Add full text index to our table department
*/
$tableName = $installer->getTable('maxime_department');
$fullTextIntex = array('name'); // Column with fulltext index, you can put multiple fields
$setup->getConnection()->addIndex(
$tableName,
$installer->getIdxName($tableName, $fullTextIntex, \Magento\Framework\DB\Adapter\AdapterInterface::INDEX_TYPE_FULLTEXT),
$fullTextIntex,
\Magento\Framework\DB\Adapter\AdapterInterface::INDEX_TYPE_FULLTEXT
);
/**
* Add full text index to our table jobs
*/
$tableName = $installer->getTable('maxime_job');
$fullTextIntex = array('title', 'type', 'location', 'description'); // Column with fulltext index, you can put multiple fields
$setup->getConnection()->addIndex(
$tableName,
$installer->getIdxName($tableName, $fullTextIntex, \Magento\Framework\DB\Adapter\AdapterInterface::INDEX_TYPE_FULLTEXT),
$fullTextIntex,
\Magento\Framework\DB\Adapter\AdapterInterface::INDEX_TYPE_FULLTEXT
);
}
Pour les départements, nous allons utiliser uniquement la colonne « name ».
Pour les jobs, nous utilisons plusieurs colonnes : ‘title’, ‘type’, ‘location’, ‘description’
Voici le code complet du fichier pour information :
<?php namespace Maxime\Jobs\Setup;
use Magento\Framework\Setup\UpgradeSchemaInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\SchemaSetupInterface;
use Magento\Framework\DB\Ddl\Table;
class UpgradeSchema implements UpgradeSchemaInterface
{
/**
* Upgrades DB schema for a module
*
* @param SchemaSetupInterface $setup
* @param ModuleContextInterface $context
* @return void
*/
public function upgrade(SchemaSetupInterface $setup, ModuleContextInterface $context)
{
$installer = $setup;
$installer->startSetup();
// Action to do if module version is less than 1.0.0.0
if (version_compare($context->getVersion(), '1.0.0.0') < 0) {
/**
* Create table 'maxime_jobs'
*/
$tableName = $installer->getTable('maxime_job');
$tableComment = 'Job management on Magento 2';
$columns = array(
'entity_id' => array(
'type' => Table::TYPE_INTEGER,
'size' => null,
'options' => array('identity' => true, 'unsigned' => true, 'nullable' => false, 'primary' => true),
'comment' => 'Job Id',
),
'title' => array(
'type' => Table::TYPE_TEXT,
'size' => 255,
'options' => array('nullable' => false, 'default' => ''),
'comment' => 'Job Title',
),
'type' => array(
'type' => Table::TYPE_TEXT,
'size' => 255,
'options' => array('nullable' => false, 'default' => ''),
'comment' => 'Job Type (CDI, CDD...)',
),
'location' => array(
'type' => Table::TYPE_TEXT,
'size' => 255,
'options' => array('nullable' => false, 'default' => ''),
'comment' => 'Job Location',
),
'date' => array(
'type' => Table::TYPE_DATE,
'size' => null,
'options' => array('nullable' => false),
'comment' => 'Job date begin',
),
'status' => array(
'type' => Table::TYPE_BOOLEAN,
'size' => null,
'options' => array('nullable' => false, 'default' => 0),
'comment' => 'Job status',
),
'description' => array(
'type' => Table::TYPE_TEXT,
'size' => 2048,
'options' => array('nullable' => false, 'default' => ''),
'comment' => 'Job description',
),
'department_id' => array(
'type' => Table::TYPE_INTEGER,
'size' => null,
'options' => array('unsigned' => true, 'nullable' => false),
'comment' => 'Department linked to the job',
),
);
$indexes = array(
'title',
);
$foreignKeys = array(
'department_id' => array(
'ref_table' => 'maxime_department',
'ref_column' => 'entity_id',
'on_delete' => Table::ACTION_CASCADE,
)
);
/**
* We can use the parameters above to create our table
*/
// Table creation
$table = $installer->getConnection()->newTable($tableName);
// Columns creation
foreach($columns AS $name => $values){
$table->addColumn(
$name,
$values['type'],
$values['size'],
$values['options'],
$values['comment']
);
}
// Indexes creation
foreach($indexes AS $index){
$table->addIndex(
$installer->getIdxName($tableName, array($index)),
array($index)
);
}
// Foreign keys creation
foreach($foreignKeys AS $column => $foreignKey){
$table->addForeignKey(
$installer->getFkName($tableName, $column, $foreignKey['ref_table'], $foreignKey['ref_column']),
$column,
$foreignKey['ref_table'],
$foreignKey['ref_column'],
$foreignKey['on_delete']
);
}
// Table comment
$table->setComment($tableComment);
// Execute SQL to create the table
$installer->getConnection()->createTable($table);
}
if (version_compare($context->getVersion(), '1.0.0.2') < 0) {
/**
* Add full text index to our table department
*/
$tableName = $installer->getTable('maxime_department');
$fullTextIntex = array('name'); // Column with fulltext index, you can put multiple fields
$setup->getConnection()->addIndex(
$tableName,
$installer->getIdxName($tableName, $fullTextIntex, \Magento\Framework\DB\Adapter\AdapterInterface::INDEX_TYPE_FULLTEXT),
$fullTextIntex,
\Magento\Framework\DB\Adapter\AdapterInterface::INDEX_TYPE_FULLTEXT
);
/**
* Add full text index to our table jobs
*/
$tableName = $installer->getTable('maxime_job');
$fullTextIntex = array('title', 'type', 'location', 'description'); // Column with fulltext index, you can put multiple fields
$setup->getConnection()->addIndex(
$tableName,
$installer->getIdxName($tableName, $fullTextIntex, \Magento\Framework\DB\Adapter\AdapterInterface::INDEX_TYPE_FULLTEXT),
$fullTextIntex,
\Magento\Framework\DB\Adapter\AdapterInterface::INDEX_TYPE_FULLTEXT
);
}
$installer->endSetup();
}
}
Maintenant, lancer la commande upgrade à la racine de votre installation Magento :
./bin/magento setup:upgrade
Nos index fulltext sont bien mis en places, et si on relance la recherche de tout à l’heure avec le mot « marketing », notre liste est bien filtrée :
Notez également qu’une liste filtrée peux-être mémorisée en cliquant sur « Default view » > « Save view as »
Et voilà, nous avons terminé pour la partie filtres !
Dans la prochaine étape nous terminerons notre partie sur les grid avec les actions de masse et la pagination.
Création de filtres dans une grid adminhtml
Bonjour,
Je suis en train de suivre votre formation sur Magento 2, que je trouve parfaite.
J’ai installé la version actuelle de magento 2 via le dépôt Github, et j’ai remarqué 2-3 bug graphique sur ma partie des filtres.
J’ai repris toute la partie du fichier « jobs_department_listing.xml », et les champs de la partie « filtre » sont doublé (6 champs au lieu de 3).
De plus, les checkbox de mon tableau sont situé après mes colonnes ID et NAME. Alors que mon code XML reprend bien le code de la formation.
Pouvez-vous me donner des conseils pour corriger ces bugs ?
Je vous remercie par avance de la réponse que vous pourrez me donner.
Bonjour Guillaume,
Ravi de vois que quelqu’un de X2I suive la formation 😉
Je viens de vérifier sur mon local et tout s’affiche correctement.
Aurais-tu un screenshot à fournir ?
N’hésite pas aussi à supprimer ces dossiers, peut-être que c’est du cache ^^ :
var/generation
var/cache
Pour les checkboxes qui s’affichent après les colonnes ID et Name, c’est dû au fait qu’on a suivi pas à pas le tutoriel… Je m’explique :
– On charge une fois la grid avec juste la colonne ID et la colonne NAME. Pendant ce temps, Magento 2 crée une entrée dans la table `ui_bookmark` qui contient la config de la grid.
– Ensuite, on modifie notre .XML pour qu’apparaisse la fameuse colonne des checkboxes. Cette colonne sera ajoutée dans la config en BBD, mais à la suite des deux colonnes (Si j’ai bien appris mes leçons). Ce qui fait qu’elle sera affichée après les autres colonnes.
Pour régler ce problème, il suffit de supprimer l’entrée (il y en a deux en vrai) correspondante à la grid dans la table `ui_bookmark`, puis simplement recharger la page.
J’espère que ça aidera certaines personnes.
Et merci pour ces tutoriels 🙂
j’ai le meme probleme avec Magento-CE-2.2.2, et je ne trouve pas la solution
Merci de votre réponse rapide.
J’ai uploadé le screenshot à cette adresse : http://dl.free.fr/mVc1bLZmT.
Je vide souvent le cache avec la commande suivante : sudo rm -rf var/cache/* var/generation/*
Cela n’a rien changé.
Pour le moment, je ne sais pas d’où vient le problème.
Ça y est. J’ai trouvé pourquoi j’avais tous les champs en double dans la partie des filtres.
Comme tu conseilles de mettre les mains dans le cambouis, je l’ai fait.
Dans ton tutoriel, tu fais préciser tous les champs dans la partie des XML.
J’ai juste testé la ligne suivante à la place, et tout est rentré dans l’ordre.
Comme je l’ai dis dans un précédent commentaire, j’ai la dernière version de magento 2, qui est la version 2.1.
J’espère que cela servira à d’autres personnes.
La ligne n’est pas visible dans le commentaire hélas.
Tu peux la communiquer via http://pastebin.com/
Attention la version Magento 2.1 est en Release Candidate donc pas encore en version stable !
Merci de ton retour, je n’avais pas vu que le code ne s’était pas affiché.
Voilà ce que je voulais montrer tout à l’heure :
1) le filtre comme il est montré dans le tutoriel : http://pastebin.com/5KELJPF7
C’est pour la version 2.0 de Magento. Mais qui bug sur Magento 2.1 en doublant tous les champs précisé.
2) Voici le filtre comme il est accepté sur Magento 2.1 : http://pastebin.com/FTQKkF46
Je m’étais inspiré de ce qui existait dans d’autres XML de Magento 2.1.
Peut-être est-ce une évolution de cette version.
Il y’aurait donc plus rien a mettre et Magento génèrerait tout tout seul ??
A surveiller lorsque la version 2.1 sortira en version stable
Je confirme.
Il n’y aurait plus qu’une ligne de code à mettre (une balise « filters » auto-fermante), et l’affichage se fait tout seul avec les champs qui vont bien.
Affaire à suivre.
J’ai la version 2.0 (récupéré il y a quelques semaines sur github)
Et j’ai eu le même souci, réglé de la même manière.
Merci
petite faute de frappe ?
$fullTextIntex serait à remplacer par $fullTextIndex ?
Bonjour à tous,
Merci Maxime pour cette formation,
Je voudrais rajouter qu’avec Magento 2.1, j’avais un souci au niveau du FiltreSearch, du coup, j’ai trouvé qu’il faudra mettre uniquement le code suivant pour que le FILTER SEARCH fonctionne correctement :
L’ajout de l’index composite sur la table maxime_job a provoqué chez moi l’erreur suivante: SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 3072 bytes.
Clairement, c’est la taille du champ maxime_job.description qui pose problème. J’ai donc réduit sa longueur à 255.
Plus d’information sur les contraintes de taille des index: https://stackoverflow.com/questions/1814532/1071-specified-key-was-too-long-max-key-length-is-767-bytes