Déclaration du layout
Pour définir le contenu de notre page, nous devons commencer par créer un layout.
Rappelez-vous, le nom du layout est lié au controller qui lui est associé.
Dans notre cas, le nom du fichier sera jobs_department_index car notre action est jobs/department.
Vous pouvez donc créer le fichier :
app/code/Maxime/Jobs/view/adminhtml/layout/jobs_department_index.xml
Avec ce contenu :
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<uiComponent name="jobs_department_listing"/>
</referenceContainer>
</body>
</page>
Dans ce XML nous précisons que la partie « content » de notre page contiendra un element de type « uiComponent » appelé « jobs_department_listing ».
Facile à comprendre, mais devons maintenant apprendre ce qu’est un uiComponent.
Création d’un uiComponent
Dans un uiComponent nous pouvons y mettre énormément de choses. Des boutons, des colonnes de tableau, des filtres, etc…
Nous allons donc commencer par créer notre structure de base avant d’y ajouter des éléments.
Pour créer votre uiComponent, ajoutez le fichier suivant :
app/code/Maxime/Jobs/view/adminhtml/ui_component/jobs_department_listing.xml
Avec ce contenu :
<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>
</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>
</listing>
Dans la première partie « Integration », on définit un provider (fournisseur). Ce provider est de type jobs_department_listing_data_source.
C’est cette data source que nous déclarons dans la partie en dessous « Data source ».
– class : c’est l’objet qui ca nous permettre de préciser le contenu que l’on va mettre dans notre grid.
– name : le nom de notre dataProvider, on met le même que le dataSource.
– primaryFieldName : le nom de notre colonne primaire
– requestFieldName : le paramètre qui sera envoyé dans l’url pour envoyer la valeur du primaryFieldName
La partie qui arrive ensuite est statique et fait appel à des éléments natifs de Magento.
Seule exception le champ indexField, qui comme vous l’avez deviné, contient également le champ primaire de notre table.
Nous allons maintenant passer par l’injecteur de dépendance afin de définir notre objet « DepartmentGridDataProvider », qui n’existe pour le moment nul part.
Injection de dépendances (di.xml)
Créer le fichier :
app/code/Maxime/Jobs/etc/di.xml
Et mettez-y le contenu qui suit :
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<!-- Create our type DepartmentGridDataProvider -->
<virtualType name="DepartmentGridDataProvider" type="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
<arguments>
<argument name="collection" xsi:type="object" shared="false">Maxime\Jobs\Model\Resource\Department\Collection</argument>
<argument name="filterPool" xsi:type="object" shared="false">DepartmentGridFilterPool</argument> <!-- Define new object for filters -->
</arguments>
</virtualType>
<!-- Create our type DepartmentGridFilterPool -->
<virtualType name="DepartmentGridFilterPool" type="Magento\Framework\View\Element\UiComponent\DataProvider\FilterPool">
<arguments>
<argument name="appliers" xsi:type="array">
<item name="regular" xsi:type="object">Magento\Framework\View\Element\UiComponent\DataProvider\RegularFilter</item>
<item name="fulltext" xsi:type="object">Magento\Framework\View\Element\UiComponent\DataProvider\FulltextFilter</item>
</argument>
</arguments>
</virtualType>
<!-- Type for jobs_department_listing_data_source -->
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
<arguments>
<argument name="collections" xsi:type="array">
<item name="jobs_department_listing_data_source" xsi:type="string">Maxime\Jobs\Model\ResourceModel\Grid\Department\Collection</item>
</argument>
</arguments>
</type>
<!-- Simulate our class Maxime\Jobs\Model\ResourceModel\Grid\Department\Collection -->
<virtualType name="Maxime\Jobs\Model\ResourceModel\Grid\Department\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
<arguments>
<argument name="mainTable" xsi:type="string">maxime_department</argument>
<argument name="resourceModel" xsi:type="string">Maxime\Jobs\Model\ResourceModel\Department</argument>
</arguments>
</virtualType>
</config>
En premier lieu, nous créons notre objet de type DepartmentGridDataProvider qui est défini par deux éléments :
– collection : Nous lui envoyons ici notre classe Maxime\Jobs\Model\Resource\Department\Collection que nous avons déjà créée
– filterPool : Ici nous renseignons un nouvel objet que l’on défini juste après.
Nous créons donc maintenant notre objet DepartmentGridFilterPool, qui fait appel à 2 classes natives de Magento. Vous pouvez y jeter un oeil pour votre culture, mais je n’irai pas plus loin ici.
Enuite, nous avions défini un dataProvider dans notre uiComponent. Ce dataProvider était nommé jobs_department_listing_data_source.
C’est cet élément que nous mettons en place dans la 3è partie. Nous déclarons que ce dataProvider fera appel à la classe « Maxime\Jobs\Model\ResourceModel\Grid\Department\Collection ».
Le soucis c’est que cette classe n’existe pas. Et au lieu de la créer, nous allons la définir dans ce di.xml.
Comme vous le constatez nous avons 2 arguments très simples :
– mainTable : qui est la table qui contient les éléments que l’on souhaite afficher.
– resourceModel : qui pointe vers le resourceModel de notre objet Department.
Qu’est ce que cela donne ?
Rendez-vous maintenant dans votre page dans le backoffice Magento.
Jobs > Department
Quand vous cliquez, vous avez une page avec un loader qui reste toujours affiché.
Rassurez-vous, c’est normal ! Nous avons défini la base de notre grid, maintenant nous allons y ajouter les élements !
Bonjour Maxime,
Je pense qu’il y a une erreur dans le fichier app/code/Maxime/Jobs/etc/di.xml
dans l’argument collection vous avez : Maxime\Jobs\Model\Resource\Department\Collection
Il doit etre ResourceModel à la place Resource
J’ai suivi toutes les étapes mais moi rien ne s’affiche
Même si je fais la section d’après, je n’ai rien que Department et rien en dessous
L’erreur est qu’il faut supprimer Grid\ dans la section Type et Simulate