Ajout d'un bouton dans Magento 2

Question

J'essaie d'ajouter un bouton dans le formulaire d'adresse client.Mais je ne sais pas comment faire depuis customer_form.xml déposer.Si quelqu'un sait, merci de me le suggérer.

J'ai enregistré le contrôle des boutons sur ui_definition.xsd et ui_components.xsd fichier mais il s'affiche toujours comme textbox au lieu du bouton.

Mon code est

Magento/Ui/etc/ui_definition.xsd

<xs:complexType name="definition">
        <xs:annotation>
            <xs:appinfo>Registering components in the system and basic setup</xs:appinfo>
            <xs:documentation>Registering components in the system and basic setup</xs:documentation>
        </xs:annotation>
        <xs:all>
            <!-- Components list -->
            <xs:element type="tab" name="tab"/>
            <xs:element type="dataSource" name="dataSource"/>
            <xs:element type="paging" name="paging"/>
            <xs:element type="massaction" name="massaction"/>
            ..... etc
            <!--Custom Button Start-->
            <xs:element type="button" name="button"/>
            <!--Custom Button End-->
        </xs:all>
    </xs:complexType>

Magento/Ui/etc/ui_components.xsd

<!--Custom Button Start-->
    <xs:complexType name="button">
        <xs:complexContent>
            <xs:extension base="ui_element">
                <xs:choice minOccurs="0" maxOccurs="unbounded">
                    <xs:group ref="configurable"/>
                </xs:choice>
            </xs:extension>
        </xs:complexContent>
    </xs:complexType>
    <!--Custom Button End-->

et j'ai créé la classe Button.php depuis Magento/Ui/Component/Form/Element

<?php

namespace Magento\Ui\Component\Form\Element;

/**
 * Class Button
 */
class Button extends AbstractElement
{
    const NAME = 'button';

    /**
     * Get component name
     *
     * @return string
     */
    public function getComponentName()
    {
        return static::NAME;
    }
}

et enfin j'ai créé un champ à partir de customer_form.xml déposer

<field name="button">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">button</item>
                    <item name="formElement" xsi:type="string">input</item>
                </item>
            </argument>
        </field>

Fonctionne sans erreur mais affiche une zone de texte au lieu d'un bouton.Pourriez-vous s'il vous plaît me suggérer où je me suis trompé ?

Answer 1

Je ne suis pas sûr que ce soit la bonne méthode, mais cela a fonctionné pour moi

app/code/Magento/Ui/view/base/web/templates/form/components/collection.html

<li class="address-list-item" data-bind="css: { 'ui-state-active': element.active }, click: activate">
          // put your code here

mais le meilleur moyen n'est pas de changer directement ici, vous pouvez remplacer ce fichier dans votre module personnalisé.

n'oubliez pas de vider le dossier de cache ainsi que le contenu statique et d'exécuter grunt exec:backend commande après avoir modifié ce fichier.

Answer 2

Désolé, ce n'est pas une réponse complète mais plutôt une indication dans la "bonne" direction.

Il existe un ensemble d'éléments qui peuvent être appelés à l'intérieur du Magento/Ui système.Ceux-ci peuvent être trouvés sous app/code/Magento/Ui/Component/Form/Element/.

Ici, par défaut, vous verrez :

1. Checkbox.php
2. Entrée.php
3. Multiligne.php
4. MultiSelect.php
5. Radio.php
6. Gamme.php
7. Sélectionner.php
8. Zone de texte.php

Ces éléments sont paramétrés dans le fichier de définition app/code/Magento/Ui/view/base/ui_component/etc/definition.xml.Par exemple, la case à cocher ressemble à ceci :

<checkbox class="Magento\Ui\Component\Form\Element\Checkbox">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
            <item name="config" xsi:type="array">
                <item name="template" xsi:type="string">ui/form/field</item>
                <item name="elementTmpl" xsi:type="string">ui/form/element/checkbox</item>
            </item>
        </item>
    </argument>
</checkbox>

D'après ce que je peux voir en regardant rapidement, il devrait être possible d'ajouter votre propre type via ce type de définition, même si je ne suis pas sûr du fonctionnement.Vous devrez ajouter votre propre modèle d'élément ici, les valeurs par défaut se trouvent sous app/code/Magento/Ui/view/base/web/templates/form/element/*.html

Vous pouvez voir que le fichier definition.xml est ajouté via di comme suit :

<virtualType name="uiDefinitionFileCollector" type="Magento\Framework\View\Element\UiComponent\Config\FileCollector\AggregatedFileCollector">
    <arguments>
        <argument name="searchPattern" xsi:type="string">etc/definition.xml</argument>
    </arguments>
</virtualType>

Vous devriez donc pouvoir ajouter votre propre fichier definition.xml à votre module et il sera récupéré.

Désolé, ce n'est pas une réponse complète mais cela devrait être un bon début dans la « bonne » direction.

Answer 3

J'ai écrit aujourd'hui un moyen simple de mettre en œuvre vos besoins à l'aide de mixins.

pour configurer le mixin, créez un fichier requirejs-config.js dans votre dossier view/base d'un module qui hébergera le mixin

var config = {
    config: {
        mixins: {
            'Magento_Ui/js/form/components/collection': {              
            'Mbs_AddButtonInCustomerAddressForm/js/address/collection':true
            }
        }
    }
}

puis dans le fichier js défini dans le mixin ci-dessus :vous pouvez écraser le modèle afin qu'il utilise un modèle dans votre module

un exemple du fichier js est ci-dessous :

define([], function () {
    'use strict';

    return function (addressCollection) {
        const orig = addressCollection.defaults;
        orig.template = 'Mbs_AddButtonInCustomerAddressForm/collection';
        orig.buttonExtraLabel = 'Click Me';

        return addressCollection;
    }
});

enfin dans le modèle personnalisé, vous pouvez ajouter le bouton.

Cette solution ne touchera pas le fichier principal de Magento et vous resterez donc conforme aux versions ultérieures de Magento.

J'ai un référentiel de code complet montrant comment effectuer les clés d'URL et la réécriture d'URL à l'adresse : https://bitbucket.org/magstaging/addbuttonincustomeraddressform