Explication de la grille de composants de l'interface utilisateur dans Magento 2

91

Existe-t-il une bonne explication et / ou un échantillon de la configuration minimale minimale requise pour créer une grille de composants d'interface utilisateur dans Magento 2?

Je sais qu'il existe une myriade de composants de base, tels que

./vendor/magento/module-catalog/view/adminhtml/ui_component/product_listing.xml

Cependant, ces fichiers XML sont volumineux et il existe peu d'explications sur ce que fait chaque nœud et sur la façon dont vous l'utiliseriez pour créer une grille à partir de rien.

Il y a aussi cet exemple de module , mais il

  1. Semble être avant un formulaire
  2. Manque de contexte / explication sur ce que fait chaque nœud

Je suis à la recherche d'informations de "démarrage" qui me permettraient de construire une grille pour ma propre collection de modèles CRUD.

magento2 php layout uicomponent Alan Storm
la source
6
Il ne vaut pas la peine de donner
Alan Storm Le

Réponses:

167

[EDIT 3 octobre 2018]

Mise à jour des liens vers devdocs: 2.0 - https://devdocs.magento.com/guides/v2.0/ui-components/ui-listing-grid.html et https://devdocs.magento.com/guides/v2. 0 / ui-components / ui-secondary.html

2.1 - https://devdocs.magento.com/guides/v2.1/ui_comp_guide/components/ui-listing-grid.html

2.2 - https://devdocs.magento.com/guides/v2.2/ui_comp_guide/components/ui-listing-grid.html

[EDIT 21 janvier 2016]

Depuis le 20/01/2016, magento2 devdocs a été mis à jour avec une documentation étendue sur les composants de l'interface utilisateur. Je ne l'ai pas vérifié de manière approfondie, mais ils peuvent contenir plus d'informations que la réponse que j'ai donnée il y a quelques jours. Dans l'intérêt de votre temps, vous souhaiterez peut-être consulter http://devdocs.magento.com/guides/v2.0/ui -library / ui-library-secondary.html

[/MODIFIER]

Je travaille avec Magento2 depuis plus d’un mois et c’est ce que j’ai remarqué à propos de la nouvelle façon de créer des grilles.

Composant de grille de l'interface utilisateur Magento 2

1) Le fichier de mise en page à l'intérieur Company/Module/view/adminhtml/layout/module_controller_action.xmldéfinit la grille comme étant uiComponent avec:

<?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">
    <update handle="styles"/>
    <body>
        <referenceContainer name="content">
            <uiComponent name="listing_name"/>
        </referenceContainer>
    </body>
</page>

2) uiComponent est défini dans le Company/Module/view/adminhtml/ui_component/listing_name.xmlfichier. Le nom du fichier doit être identique au nom uiComponent utilisé dans le fichier de mise en page. La structure du fichier peut sembler assez complexe à première vue mais, comme toujours, il s’agit de nœuds répétitifs. Pour faire simple, on le tranche. Le noeud principal du fichier de composant est <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">. Il est corrigé et je pense qu'il nécessite un attribut d'emplacement d'espace de nom. Il y a typiquement 4 nœuds à l' intérieur de <listing />noeud: <argument />, <dataSource />, <container />et <columns />. Il ne s’agit toutefois pas d’une configuration stricte, car le <argument />nœud peut être dupliqué pour fournir davantage de configuration ou <container />comme dans la liste de pages cms qui ajoute un conteneur "collant" pour une raison quelconque.

Le premier noeud est <argument />. Ce nœud définit les données pour le composant. Habituellement, vous devez fournir quelque chose comme ceci:

<argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
        <item name="provider" xsi:type="string">listing_name.listing_name_data_source</item>
        <item name="deps" xsi:type="string">listing_name.listing_name_data_source</item>
    </item>
    <item name="spinner" xsi:type="string">listing_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 Item</item>
            <item name="class" xsi:type="string">primary</item>
            <item name="url" xsi:type="string">*/*/new</item>
        </item>
    </item>
</argument>

<argument />noeud requiert un attribut name. Dans ce cas, datadéfinit les informations de base sur le composant. Il contient plusieurs <item />nœuds pour chaque partie spécifique de la configuration. js_configindique au composant où se trouvent le fournisseur des données et des dépendances dans la configuration de liste XML (qui, à mon avis, est convertie en hachage javascript). providervaleur consiste en un nom de liste utilisé dans le fichier de présentation et un nom de source de données unique qui sera utilisé ultérieurement. Dans ces listes, j'ai vérifié dans magento provideret depssont les mêmes. Je ne suis pas sûr de savoir à quoi sert d'avoir cela. spinnerprend le nom du nœud où les colonnes de la grille sont définies. buttonspermet d'ajouter des boutons en haut de la grille. Dans la plupart des cas, ce serait juste un Add newbouton. Les boutons ont peu d'éléments:nameCe labelque le bouton dit, utilisé comme id d'élément , classest la classe de boutons et urlle lien vers lequel il pointe. Asteriks est remplacé par la partie de l'URL actuelle. D' autres possibles <item />noeuds pour bouton sont: id, title, type(remise à zéro, soumettre ou bouton), onclick( au lieu de url, il a priorité), style, value, disabled. L'élément Button est rendu par la Magento\Ui\Component\Control\Buttonclasse.

Ensuite nous avons le <dataSource />noeud:

<dataSource name="listing_name_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">UniqueNameGridDataProvider</argument>
        <argument name="name" xsi:type="string">listing_name_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">database_id</argument>
        <argument name="requestFieldName" xsi:type="string">request_id</argument>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="update_url" xsi:type="url" path="mui/index/render"/>
            </item>
        </argument>
    </argument>
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
        </item>
    </argument>
</dataSource>

nameutilisé dans le <dataSource />noeud doit correspondre à celui utilisé dans argument/js_config/provideret argument/js_config/deps. Le noeud suivant définit quelle classe est responsable de la préparation des données pour la grille. classl'argument nécessite un nom unique qui sera mis en correspondance dans di.xml. primaryFieldNameconcerne la colonne primaire de la base de données et requestFieldNamela variable dans les requêtes http. Ils peuvent être égaux , mais ne doivent pas, l' inscription de la page CMS utilise page_idcomme primaryFieldNameet idque requestFieldName. update_urlfait référence au point d'entrée où les appels ajax pour le filtrage et le tri sont envoyés. Le deuxième argument de <dataSource />référence fait référence au fichier javascript qui gère la partie js de l’envoi et du traitement des appels ajax pour la grille. Le fichier par défaut est Magento/Ui/view/base/web/js/grid/provider.js.

Un autre noeud est <container />.

<container name="listing_top"> ... </container>

Comme il contient beaucoup de données, permettez-moi de le diviser également. Ses enfants sont les parties de la page entière. Premier enfant <argument />:

<argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">ui/grid/toolbar</item>
    </item>
</argument>

Il définit le modèle de masquage responsable de la mise en page, de toutes les actions et, par défaut, pointe vers Magento/Ui/view/base/web/templates/grid/toolbar.html

Le noeud suivant est (ou peut être) <bookmark />

<bookmark name="bookmarks">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="storageConfig" xsi:type="array">
                <item name="namespace" xsi:type="string">listing_name</item>
            </item>
        </item>
    </argument>
</bookmark>

Ce nœud ajoute une fonctionnalité de signet à la grille. Il permet à l’administrateur de configurer différents "profils" de la grille qui affiche différentes colonnes. Grâce à cela, vous pouvez ajouter toutes les colonnes de la table à la grille et laisser l’utilisateur choisir les informations qui le concernent. namespacedoit correspondre au nom utilisé dans le fichier de mise en page.

Un autre noeud est <component />

<component 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">listing_name.listing_name.listing_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>
</component>

Nous avons 3 valeurs à configurer ici. La première est celle providerqui suit le modèle [nom_répertoire_from_layout]. [Nom_liste_from_layout]. [Nom_noeud_nomne_colonnes] (comme dans la liste de noeuds / argument / spinner). componentfait référence au fichier js qui affiche la grille et, par défaut, les points sur Magento/Ui/view/base/web/js/grid/controls/columns.jslesquels utilise le modèle Magento/Ui/view/base/web/templates/grid/controls/columns.html. Le dernier élément est celui displayAreaqui définit où les contrôles de colonne doivent être affichés. Il fait référence à getRegion('dataGridActions')dans le fichier défini dans container/argument/config/template(par défaut:) Magento/Ui/view/base/web/templates/grid/toolbar.html.

Le noeud suivant est <filterSearch />

<filterSearch name="fulltext">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="provider" xsi:type="string">listing_name.listing_name_data_source</item>
            <item name="chipsProvider" xsi:type="string">listing_name.listing_name.listing_top.listing_filters_chips</item>
            <item name="storageConfig" xsi:type="array">
                <item name="provider" xsi:type="string">listing_name.listing_name.listing_top.bookmarks</item>
                <item name="namespace" xsi:type="string">current.search</item>
            </item>
        </item>
    </argument>
</filterSearch>

Ce nœud ajoute une recherche en texte intégral dans la page. Il se trouve au-dessus de la grille sous la forme d'un champ de saisie de texte avec "Recherche par mot-clé" comme espace réservé. Je ne suis pas sûr des options possibles ici, car je n’ai pas trop joué avec cela, mais listing_filters_chips fait référence à Magento/Ui/view/base/web/js/grid/filters/chips.jsfile.

Le noeud suivant est <filters />

<filters name="listing_filters">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="columnsProvider" xsi:type="string">listing_name.listing_name.listing_columns</item>
            <item name="storageConfig" xsi:type="array">
                <item name="provider" xsi:type="string">listing_name.listing_name.listing_top.bookmarks</item>
                <item name="namespace" xsi:type="string">current.filters</item>
            </item>
            <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 name="childDefaults" xsi:type="array">
                <item name="provider" xsi:type="string">listing_name.listing_name.listing_top.listing_filters</item>
                <item name="imports" xsi:type="array">
                    <item name="visible" xsi:type="string">listing_name.listing_name.listing_columns.${ $.index }:visible</item>
                </item>
            </item>
        </item>
        <item name="observers" xsi:type="array">
            <item name="column" xsi:type="string">column</item>
        </item>
    </argument>
</filters>

Ce nœud définit la configuration du filtrage des colonnes qui est visible après avoir cliqué sur le bouton "Filtres" en haut à droite au-dessus de la grille. columnsProvidersuit une structure similaire à celle des nœuds précédents, donc [listing_nom_from_layout]. [nom_langage_from_layout]. [nom_colonne_numeur]. storegeConfigva comme [nom_liste_from_layout]. [nom_liste_frame_layout]. [nom_noeud_conteneur] [nom_noeud_de_signet]. Dans le templatesnœud de l'élément, vous pouvez définir les fichiers utilisés pour rendre des options de filtre spécifiques. Dans ce cas , ne sélectionnez est défini et utilise Magento/Ui/view/base/web/js/form/element/ui-select.jscomme componentet Magento/Ui/view/base/web/templates/grid/filters/elements/ui-select.htmlcomme modèle de knock - out. Regardez dans Magento/Ui/view/base/web/js/form/elementpour voir d'autres possibilités. Seule la sélection est définie ici pour remplacer les valeurs par défaut: Magento/Ui/view/base/web/js/form/element/select.jset Magento/Ui/view/base/web/templates/grid/filters/elements/select.html. Les valeurs par défaut des filtres et des autres nœuds sont définies dans Magento/Ui/view/base/ui_component/etc/definition.xml.

Le noeud suivant est <massAction />et permet d’ajouter une action en masse select to the grid

<massaction name="listing_massaction">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="selectProvider" xsi:type="string">listing_name.listing_name.listing_columns.ids</item>
            <item name="component" xsi:type="string">Magento_Ui/js/grid/tree-massactions</item>
            <item name="indexField" xsi:type="string">database_id</item>
        </item>
    </argument>
    <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="*/*/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 wan't to delete selected items?</item>
                </item>
            </item>
        </argument>
    </action>
    <action name="change_status">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="type" xsi:type="string">change_status</item>
                <item name="label" xsi:type="string" translate="true">Change Status</item>
            </item>
        </argument>
        <argument name="actions" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Company\Module\Ui\Component\MassAction\Status\Options</argument>
            <argument name="data" xsi:type="array">
                <item name="confirm" xsi:type="array">
                    <item name="title" xsi:type="string" translate="true">Change Status</item>
                    <item name="message" xsi:type="string" translate="true">Are you sure to change status for selected feed(s)?</item>
                </item>
            </argument>
        </argument>
    </action>
</massaction>

namel'argument devrait être unique. Le premier noeud enfant <argument />définit les données de base. providersuit la même structure que les autres nœuds et fait référence aux colonnes nom de nœud et à sa colonne ids. Cette colonne contiendra les cases à cocher avec les éléments sélectionnés pour l'action en masse à traiter. componentdéfinit quel fichier est utilisé pour rendre et gérer l'action de masse. La valeur par défaut est Magento_Ui/js/grid/massactions(pointe sur Magento/Ui/view/base/web/js/grid/massactions.js). Vous pouvez utiliser Magento_Ui/js/grid/tree-massactionspour ajouter une structure semblable à un arbre. Dans le cas ci-dessus, je l'utilise pour ajouter l'action "Change status" qui indique les options "enable" et "disable". Après <argument />nœud, vous pouvez ajouter autant de <action />nœuds que d’actions à effectuer. Chaque <action />nœud suit un schéma similaire. Dans le premier cas (action de suppression), le noeud requiert un nom unique. Puis argumentcontient la configuration oùlabelest ce qui est visible dans l'option de sélection, le urlpoint de terminaison pour envoyer des données et confirmajoute une confirmation modale avant l'envoi. Dans le cas du "changement d'état", l'action urlsur le premier argumentnœud est omise car les URL sont fournies par état par classe définie dans le deuxième argumentnœud. La classe doit implémenter l'interface Zend \ Stdlib \ JsonSerializable. Vérifiez Magento\Customer\Ui\Component\MassAction\Group\Optionscomme une référence.

Enfin, dans le <container />nœud, nous avons un <paging />nœud qui définit la pagination.

<paging name="listing_paging">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="storageConfig" xsi:type="array">
                <item name="provider" xsi:type="string">listing_name.listing_name.listing_top.bookmarks</item>
                <item name="namespace" xsi:type="string">current.paging</item>
            </item>
            <item name="selectProvider" xsi:type="string">listing_name.listing_name.listing_columns.ids</item>
        </item>
    </argument>
</paging>

Structure pour provideret selectProviderdevrait être clair maintenant.

Et le dernier noeud pour la grille de base est <columns />. Il contient toutes les définitions de colonnes pouvant être utilisées par l'administrateur. Le nœud est défini comme

<columns name="listing_columns"> ... </columns>

et l'attribut name est utilisé dans les autres nœuds lorsqu'il s'y réfère. Le premier enfant est

<argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="storageConfig" xsi:type="array">
            <item name="provider" xsi:type="string">listing_name.listing_name.listing_top.bookmarks</item>
            <item name="namespace" xsi:type="string">current</item>
        </item>
        <item name="childDefaults" xsi:type="array">
            <item name="storageConfig" xsi:type="array">
                <item name="provider" xsi:type="string">listing_name.listing_name.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 name="fieldAction" xsi:type="array">
                <item name="provider" xsi:type="string">name_listing.name_listing.listing_columns.actions</item>
                <item name="target" xsi:type="string">applyAction</item>
                <item name="params" xsi:type="array">
                    <item name="0" xsi:type="string">edit</item>
                    <item name="1" xsi:type="string">${ $.$data.rowIndex }</item>
                </item>
            </item>
        </item>
    </item>
</argument>

Ce que j'ai fait ici n'était que de fournir des providervaleurs correctes en suivant le schéma utilisé dans la liste. fieldActionnoeud permet de définir une action déclenchée lorsque vous cliquez sur la cellule. Les paramètres par défaut appellent l'action de modification

Suivant est <selectionColumns />

<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">id</item>
        </item>
    </argument>
</selectionsColumn>

Ce nœud définit la colonne avec les cases à cocher pour les actions en masse à utiliser. Ses noms sont mentionnés après le point dans plusieurs nœuds décrits ci-dessus.

Après cela, vous pouvez ajouter un nombre quelconque de colonnes dans le même format:

<column name="name" class="Company\Module\Ui\Component\Listing\Column\Name">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Company\Module\Model\Source\Type</item>
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">select</item>
            <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
            <item name="dataType" xsi:type="string">select</item>
            <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
            <item name="label" xsi:type="string" translate="true">Name</item>
            <item name="sortOrder" xsi:type="number">80</item>
            <item name="visible" xsi:type="boolean">false</item>
        </item>
    </argument>
</column>

Tous les nœuds de la plupart des éléments internes ne sont pas nécessaires. Ils définissent:

filter- type de filtre de la colonne. Ceci est utilisé dans le bloc de filtres. Les valeurs disponibles sont: text, select, dateRange. Si select est utilisé <item name="options">...</item>sera utilisé en tant que classe fournissant des options pour le filtre select

component- définit les fichiers js utilisés pour rendre la colonne. Les options disponibles sont dans Magento/Ui/view/base/web/js/grid/columns/*. select est fourni si le filtre est configuré pour select. Pour le filtre de texte, cette valeur n'est pas requise.

dataType- fournit des informations sur le type de données utilisé pour la valeur de la colonne. Pour select use, select aussi, pour dateRange, utilisation date bodyTmpl- définit le fichier HTML utilisé par Knockout pour le rendu de la cellule. Par défaut, ui / grid / cells / text est utilisé ( Magento/Ui/view/base/web/templates/grid/cells/text.html). Les autres options sont situées dans le Magento/Ui/view/base/web/templates/grid/cells/*répertoire. ui/grid/cells/htmlpermet d'utiliser le contenu HTML dans la cellule.

label - ceci sera affiché dans l'en-tête de colonne et le bloc de filtrage

sortOrder - commande

visible- afficher ou non la colonne. Cela peut être utilisé pour définir des colonnes pour les signets mais ne les affiche pas par défaut.

A la fin, vous pouvez ajouter des actions à la colonne actions à effectuer pour un seul élément.

<actionsColumn name="actions" class="Company\Module\Ui\Component\Listing\Column\Actions">
    <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">database_id</item>
        </item>
    </argument>
</actionsColumn>

indexFieldfait référence au nom de la colonne dans la base de données. La classe Actions devrait s'étendre Magento\Ui\Component\Listing\Columns\Columnet définir une prepareDataSourceméthode. Voir Magento/Cms/Ui/Component/Listing/Column/PageActions.phpcomme référence

3) pour terminer la grille, nous devons définir certains éléments dans Company / Module / etc / di.xml

Nous définissons d’abord la classe de fournisseur utilisée dans le noeud dataSource/class

<virtualType name="UniqueNameGridDataProvider" type="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
    <arguments>
        <argument name="collection" xsi:type="object" shared="false">Company\Module\Model\Resource\Item\Collection</argument>
        <argument name="filterPool" xsi:type="object" shared="false">UniqueNameItemIdFilterPool</argument>
    </arguments>
</virtualType>

collectionrésout en classe de collection standard et filerPooldéfinit un nouvel élément:

<virtualType name="UniqueNameItemIdFilterPool" 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>

Cela doit évidemment faire quelque chose avec le filtrage et la recherche. Pour l'instant j'ai toujours utilisé les valeurs par défaut.

Maintenant, nous enregistrons notre source de données:

<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
    <arguments>
        <argument name="collections" xsi:type="array">
            <item name="listing_name_data_source" xsi:type="string">Company\Module\Model\Resource\Item\Grid\Collection</item>
        </argument>
    </arguments>
</type>

Dans ce cas, le nom du nœud doit correspondre à celui utilisé dans le <dataSource />nœud de la liste xml et il ne résout pas la collecte mais la classe GridCollection. Il devrait étendre la classe de collection régulière et l'implémenter en plus Magento\Framework\Api\Search\SearchResultInterface.

A la fin, nous configurons notre collection de grille (les noms d'arguments sont plutôt évidents)

<type name="Company\Module\Model\Resource\Item\Grid\Collection">
    <arguments>
        <argument name="mainTable" xsi:type="string">database_table_name</argument>
        <argument name="eventPrefix" xsi:type="string">name_for_events</argument>
        <argument name="eventObject" xsi:type="string">event_object_name</argument>
        <argument name="resourceModel" xsi:type="string">Company\Module\Model\Resource\Item</argument>
    </arguments>
</type>
Zefiryn
la source
1
avez-vous eu la chance de regarder sur mon fil
Bojjaiah
13
Cela bat encore les docs par un long chemin, autant que je peux voir.
Aaron Pollock
2) uiComponent est défini dans Company / Module / view / adminhtml / ui_component / listing_name.xml. Donc, fondamentalement, le composant de grille ne fonctionne pas sur le front-end?
Lachezar Raychev
ancien message que je connais - mais, je suis venu à ceci, je l'ai suivi (merci d'ailleurs, c'est certainement l'une des explications les plus détaillées sur ce sujet), mais j'ai une erreur inexploitée par rapport à la collectionFactory. en particulier la fonction argumentsResolver. Il dit que l'argument 2 devrait être un tableau mais que null est donné - j'ai fait tout ce qui précède - mais y a-t-il autre chose que j'aurais dû faire? :)
treyBake
1
@AshishViradiya les liens mis à jour sont ci-dessus, sous la section [EDIT 3 oct 2018]
Zefiryn
9

Pour la grille, nous avons besoin de deux fichiers principaux, l'un est ui_component xml et le second est di.xml

J'espère que vous savez dans le fichier XML de mise en page que vous devez ajouter la balise uiComponent, c'est-à-dire - 

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <update handle="styles"/>
    <body>
        <referenceContainer name="content">
            <uiComponent name="test_lists_listing"/>
        </referenceContainer>
    </body>
</page>

Maintenant, vous devez créer un test_lists_listing.xmldossier dans ui_component.

Par exemple, app \ code \ Sugarcode \ Test \ view \ adminhtml \ ui_component \ test_lists_listing.xml

Ce fichier a un nombre de balises

  1. <argument name="data" xsi:type="array"> : - faut mentionner arugemnt comme le bouton js etc ..

  2. <dataSource name="test_lists_listing_data_source">: - ce bloc est utilisé pour fournir des données pour des grilles dans celle-ci d'arguments <argument name="class" xsi:type="string">ListsGridDataProvider</argument>que nous devons mentionner dans di.xml(expliqué dans la partie di.xml )

  3. <container name="listing_top"> : - dans ce bloc, nous mentionnons les filtres, l'exportation, les signets (qui sauvegardent les données dans la table ui_bookmark), massaction, la pagination et le texte intégral (pour effectuer une recherche de texte intégral dans la configuration ou dans la table, cette colonne doit être un index de texte intégral)

  4. <columns name="test_lists_columns"> : - en cela il faut mentionner toute la colonne

Le dernier est en di.xml 

<virtualType name="TestGirdFilterPool" 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>  


<virtualType name="ListsGridDataProvider" type="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
    <arguments>
        <argument name="collection" xsi:type="object" shared="false">Sugarcode\Test\Model\ResourceModel\Test\Collection</argument>
        <argument name="filterPool" xsi:type="object" shared="false">TestGirdFilterPool</argument>
    </arguments>
</virtualType>  


<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
    <arguments>
        <argument name="collections" xsi:type="array">
            <item name="test_lists_listing_data_source" xsi:type="string">Sugarcode\Test\Model\ResourceModel\Test\Grid\Collection</item>
        </argument>
    </arguments>
</type>
<type name="Sugarcode\Test\Model\ResourceModel\Test\Grid\Collection">
    <arguments>
        <argument name="mainTable" xsi:type="string">testtable</argument>
        <argument name="eventPrefix" xsi:type="string">test_test_grid_collection</argument>
        <argument name="eventObject" xsi:type="string">test_grid_collection</argument>
        <argument name="resourceModel" xsi:type="string">Sugarcode\Test\Model\ResourceModel\Test</argument>
    </arguments>
</type>
  1. TestGirdFilterPool: - mention des filtres
  2. ListsGridDataProvider: - dont j'ai parlé dans l'interface utilisateur xml pour le fournisseur de données
  3. CollectionFactory: - besoin de mentionner la collection
  4. Grid / Collection: - en cela, nous devons passer tous les paramètres comme le nom de la table, la collection, etc.

app \ code \ Sugarcode \ Test \ view \ adminhtml \ ui_component \ test_lists_listing.xml

<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../Ui/etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing_data_source</item>
            <item name="deps" xsi:type="string">test_lists_listing.test_lists_listing_data_source</item>
        </item>
        <item name="spinner" xsi:type="string">test_lists_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 Info</item>
                <item name="class" xsi:type="string">primary</item>
                <item name="url" xsi:type="string">*/*/new</item>
            </item>
        </item>
    </argument>
    <dataSource name="test_lists_listing_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">ListsGridDataProvider</argument>
            <argument name="name" xsi:type="string">test_lists_listing_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="update_url" xsi:type="url" path="mui/index/render"/>
                </item>
            </argument>
        </argument>
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
            </item>
        </argument>
    </dataSource>
    <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>
        <bookmark name="bookmarks">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="storageConfig" xsi:type="array">
                        <item name="namespace" xsi:type="string">test_lists_listing</item>
                    </item>
                </item>
            </argument>
        </bookmark>
        <exportButton name="export_button">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="selectProvider" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns.ids</item>
                </item>
            </argument>
        </exportButton>
        <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">test_lists_listing.test_lists_listing.test_lists_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>
        <filterSearch name="fulltext">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/search/search</item>
                    <item name="displayArea" xsi:type="string">dataGridFilters</item>
                    <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing_data_source</item>
                    <item name="chipsProvider" xsi:type="string">test_lists_listing.test_lists_listing.listing_top.listing_filters_chips</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.search</item>
                    </item>
                </item>
            </argument>
        </filterSearch>
        <filters name="listing_filters">

            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="columnsProvider" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.filters</item>
                    </item>
                    <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 name="childDefaults" xsi:type="array">
                        <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.listing_top.listing_filters</item>
                        <item name="imports" xsi:type="array">
                            <item name="visible" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns.${ $.index }:visible</item>
                        </item>
                    </item>
                </item>
            </argument>


            <filterSelect name="status">
                <argument name="optionsProvider" xsi:type="configurableObject">
                    <argument name="class" xsi:type="string">Sugarcode\Test\Model\Status</argument>
                </argument>
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataScope" xsi:type="string">status</item>
                        <item name="caption" xsi:type="string" translate="true">Select...</item>
                        <item name="label" xsi:type="string" translate="true">Status</item>
                    </item>
                </argument>
            </filterSelect>

        </filters>

        <massaction name="listing_massaction">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="selectProvider" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns.ids</item>
                    <item name="indexField" xsi:type="string">id</item>
                </item>
            </argument>
            <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="test/lists/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 wan't to delete selected items?</item>
                        </item>
                    </item>
                </argument>
            </action>
            <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">test_lists_listing.test_lists_listing.test_lists_columns_editor</item>
                            <item name="target" xsi:type="string">editSelected</item>
                        </item>
                    </item>
                </argument>
            </action>
            <action name="disable">
                <argument name="data" xsi:type="array">
                    <item name="config" 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="test/lists/massDisable"/>
                    </item>
                </argument>
            </action>
            <action name="enable">
                <argument name="data" xsi:type="array">
                    <item name="config" 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="test/lists/massEnable"/>
                    </item>
                </argument>
            </action>
        </massaction>

        <paging name="listing_paging">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.paging</item>
                    </item>
                    <item name="selectProvider" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns.ids</item>
                    <item name="displayArea" xsi:type="string">bottom</item>
                    <item name="options" xsi:type="array">
                        <item name="20" xsi:type="array">
                            <item name="value" xsi:type="number">20</item>
                            <item name="label" xsi:type="string" translate="true">20</item>
                        </item>
                        <item name="30" xsi:type="array">
                            <item name="value" xsi:type="number">30</item>
                            <item name="label" xsi:type="string" translate="true">30</item>
                        </item>
                        <item name="50" xsi:type="array">
                            <item name="value" xsi:type="number">50</item>
                            <item name="label" xsi:type="string" translate="true">50</item>
                        </item>
                        <item name="100" xsi:type="array">
                            <item name="value" xsi:type="number">100</item>
                            <item name="label" xsi:type="string" translate="true">100</item>
                        </item>
                        <item name="200" xsi:type="array">
                            <item name="value" xsi:type="number">200</item>
                            <item name="label" xsi:type="string" translate="true">200</item>
                        </item>
                    </item>
                </item>
            </argument>
        </paging>
    </container>
    <columns name="test_lists_columns">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">current</item>
                </item>
                <item name="editorConfig" xsi:type="array">
                    <item name="selectProvider" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns.ids</item>
                    <item name="enabled" xsi:type="boolean">true</item>
                    <item name="indexField" xsi:type="string">id</item>
                    <item name="clientConfig" xsi:type="array">
                        <item name="saveUrl" xsi:type="url" path="test/lists/inlineEdit"/>
                        <item name="validateBeforeSave" xsi:type="boolean">false</item>
                    </item>
                </item>

                <item name="childDefaults" xsi:type="array">
                    <item name="fieldAction" xsi:type="array">
                        <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns.actions</item>
                        <item name="target" xsi:type="string">applyAction</item>
                        <item name="params" xsi:type="array">
                            <item name="0" xsi:type="string">edit</item>
                            <item name="1" xsi:type="string">${ $.$data.rowIndex }</item>
                        </item>
                    </item>
                    <item name="controlVisibility" xsi:type="boolean">true</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">test_lists_listing.test_lists_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>     
        <selectionsColumn name="ids">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="indexField" xsi:type="string">id</item>
                    <item name="sortOrder" xsi:type="number">0</item>
                </item>
            </argument>
        </selectionsColumn> 
        <column name="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 name="sortOrder" xsi:type="number">10</item>
                </item>
            </argument>
        </column>   
         <column name="order_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="filter_index" xsi:type="string">o.increment_id</item>
                    <item name="add_field" xsi:type="boolean">false</item>
                    <item name="label" xsi:type="string" translate="true">Order ID</item>
                    <item name="sortOrder" xsi:type="number">20</item>
                </item>
            </argument>
        </column>       
        <column name="title">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <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="filter" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Title</item>
                    <item name="sortOrder" xsi:type="number">30</item>
                </item>
            </argument>
        </column>

        <column name="status">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Sugarcode\Test\Model\Status</item>
                <item name="js_config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                </item>
                <item name="config" xsi:type="array">
                    <item name="filter" 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="dataType" xsi:type="string">select</item>
                    <item name="label" xsi:type="string" translate="true">Status</item>
                    <item name="sortOrder" xsi:type="number">40</item>
                </item>
            </argument>
        </column>   


        <column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">dateRange</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
                    <item name="dataType" xsi:type="string">date</item>
                    <item name="label" xsi:type="string" translate="true">Created</item>
                    <item name="sortOrder" xsi:type="number">50</item>
                </item>
            </argument>
        </column>

        <actionsColumn name="actions" class="Sugarcode\Test\Ui\Component\Listing\Column\TestActions">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="indexField" xsi:type="string">id</item>
                </item>
            </argument>
        </actionsColumn>
    </columns>
</listing>
Pradeep Kumar
la source
sortOrder ne fonctionne pas pour selectionsColumn. Ne pas pourquoi il arrive enfin
Bhupendra Jadeja
6

Le supplément de la meilleure réponse

La réponse est excellente, je la suis pour créer une page de liste. Mais, il y a un problème :

Lorsque vous appliquez un filtre, puis supprimez un filtre, le même contenu de ligne est répété dans toute la grille de la page .

Solution

Dans le <dataSource />nœud, ci <item name="update_url" xsi:type="url" path="mui/index/render"/>- dessous , ajoutez le contenu:

<item name="storageConfig" xsi:type="array">
    <item name="indexField" xsi:type="string">entity_id</item>
</item>

entity_id est la clé primaire pour la collection de listage.

Clé Shang
la source
4

J'ai trouvé la réponse de @ Zefiryn très utile et un excellent moyen de commencer sans lire la documentation complète de Magento.

Cela dit, je n’ai pas bien fonctionné après ces réponses. De plus, une fois qu'une page de liste fonctionne, vous souhaitez immédiatement disposer du reste de l'interface CRUD.

J'ai trouvé un exemple de module sur github . Commencer par ce fil d’orientation, puis porter / hacker le code du plug-in exemple s’est avéré le moyen le plus rapide d’obtenir une interface CRUD par rapport à une table personnalisée.

quickshiftin
la source