Comment puis-je ajouter un champ personnalisé à un formulaire d'administration dans Magento 2?

9

J'ai créé un formulaire dans l'administrateur en utilisant des composants d'interface utilisateur, donc dans mon view/adminhtml/ui_component/[module]_[entity]_form.xmlj'ai les éléments suivants:

<field name="configuration">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Configuration</item>
            <item name="formElement" xsi:type="string">textarea</item>
            <item name="source" xsi:type="string">form</item>
            <item name="sortOrder" xsi:type="number">30</item>
            <item name="dataScope" xsi:type="string">configuration</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

Maintenant, je ne veux pas que cette valeur soit un textarea, mais je veux créer ma propre magie HTML dans le backend pour cette valeur. Ce «HTML Magic» sera finalement beaucoup de JS / KnockOut qui sous l'eau envoie toujours des données cachées lors de la publication du formulaire, il doit donc faire partie du formulaire. J'ai essayé d'ajouter un rendu en ajoutant:

<item name="renderer" xsi:type="object">Vendor\Module\Block\Adminhtml\Renderer\Configurator</item>

Mais cela rend toujours la zone de texte. Ensuite, j'ai essayé de remplacer le formElementpar une classe personnalisée comme ceci:

<item name="formElement" xsi:type="object">Vendor\Module\Component\Form\Element\Configurator</item>

Mais alors je reçois l'erreur:

The requested component ("Vendor\Module\Component\Form\Element\Configurator") is not found. Before using, you must add the implementation.

Donc 2 questions ici:

  1. Est-ce la bonne façon d'ajouter un élément de formulaire personnalisé à un formulaire d'administration? (et si oui: comment?)
  2. Indépendamment de quoi que ce soit: comment ajouter l'implémentation? Je fouille dans le module d'interface utilisateur pour voir comment ils l'ont fait, mais je ne trouve rien.
magento2 adminhtml uicomponent ui-form Giel Berkers
la source

Réponses:

10

Vous pouvez vérifier l' exemple de module magento qu'ils ont fourni

<field name="color">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <!--component constructor-->
            <item name="component" xsi:type="string">Magento_SampleForm/js/form/element/color-select</item>
            <!--main template for form field that renders elementTmpl as a child template-->
            <item name="template" xsi:type="string">ui/form/field</item>
            <!--customized form element template that will show colors-->
            <item name="elementTmpl" xsi:type="string">Magento_SampleForm/form/element/color-select</item>
            <item name="label" xsi:type="string">Autumn colors</item>
            <item name="visible" xsi:type="boolean">true</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">sampleform</item>
        </item>
    </argument>
</field>
Priyank
la source
Merci! exactement la réponse que je cherchais! Je cherchais déjà \Magento\Framework\View\Element\UiComponent\Config\Provider\Component\Definition::setComponentData()à ajouter un composant personnalisé en utilisant un événement, mais c'est beaucoup, beaucoup plus pratique! Je devrais vraiment approfondir ces exemples de Magento 2.
Giel Berkers
3

Je ne suis pas sûr, mais je pense que je shopping cart price rulevais vous donner un indice à ce sujet, voici l'exemple

<field name="stop_rules_processing">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">boolean</item>
                    <item name="formElement" xsi:type="string">checkbox</item>
                    <item name="source" xsi:type="string">sales_rule</item>
                    <item name="prefer" xsi:type="string">toggle</item>
                    <item name="valueMap" xsi:type="array">
                        <item name="true" xsi:type="number">1</item>
                        <item name="false" xsi:type="number">0</item>
                    </item>
                    <item name="default" xsi:type="number">0</item>
                    <item name="label" xsi:type="string" translate="true">Discard subsequent rules</item>
                </item>
            </argument>
        </field>
        <container name="actions_apply_to" >
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="sortOrder" xsi:type="number">40</item>
                </item>
            </argument>
            <htmlContent name="html_content">
                <argument name="block" xsi:type="object">Magento\SalesRule\Block\Adminhtml\Promo\Quote\Edit\Tab\Actions</argument>
            </htmlContent>
        </container>

Pour plus de détails, vous pouvez visiter ce fichier

\vendor\magento\module-sales-rule\view\adminhtml\ui_component\sales_rule_form.xml

Keyur Shah
la source
Merci pour le conseil! Cela semble simplement ajouter un bloc de contenu HTML. Mais je dois créer un élément de formulaire complexe contenant beaucoup de logique KnockOut et chargé avec XHR.
Giel Berkers
comment ajouter un champ personnalisé au formulaire de modification du produit dans admin?
jafar pinjar