Come posso aggiungere un campo personalizzato a un modulo di amministrazione in Magento 2?

9

Ho creato un modulo nell'amministratore utilizzando i componenti dell'interfaccia utente, quindi nel mio view/adminhtml/ui_component/[module]_[entity]_form.xmlho il seguente:

<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>

Ora non voglio che questo valore sia un textarea, ma voglio creare la mia magia HTML nel backend per questo valore. Questo 'HTML Magic' alla fine sarà un sacco di JS / KnockOut che sott'acqua invia ancora alcuni dati nascosti quando si pubblica il modulo, quindi deve essere parte del modulo. Ho provato ad aggiungere un rendering aggiungendo:

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

Ma questo rende ancora l'area di testo. Quindi ho provato a sostituire il formElementcon una classe personalizzata in questo modo:

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

Ma poi ricevo l'errore:

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

Quindi 2 domande qui:

È questo il modo giusto per aggiungere un elemento di modulo personalizzato a un modulo di amministrazione? (e in tal caso: come?)
Indipendentemente da nulla: come posso aggiungere l'implementazione? Sto scavando attraverso il modulo UI per vedere come hanno fatto, ma non riesco a trovare nulla.

— Giel Berkers
fonte

10

Puoi controllare il modulo di esempio magento che hanno fornito

<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
fonte

Grazie! esattamente la risposta che stavo cercando! Stavo già cercando \Magento\Framework\View\Element\UiComponent\Config\Provider\Component\Definition::setComponentData()di aggiungere un componente personalizzato utilizzando un evento, ma questo è molto, molto più conveniente! Dovrei davvero guardare di più in quegli esempi di Magento 2.

— Giel Berkers,

3

Non ne sono sicuro, ma penso che shopping cart price ruleti darà qualche suggerimento al riguardo, ecco l'esempio

<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>

Per maggiori dettagli puoi visitare questo file

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

— Keyur Shah
fonte

Grazie per il consiglio! Questo sembra solo aggiungere un blocco di contenuto HTML. Ma ho bisogno di creare un elemento form complesso che abbia molta logica KnockOut in esso caricato con XHR.

— Giel Berkers,

come aggiungere un campo personalizzato al modulo di modifica del prodotto in admin?

— jafar pinjar,