¿Cómo puedo agregar un campo personalizado a un formulario de administrador en Magento 2?

9

He creado un formulario en el administrador usando componentes de la interfaz de usuario, así que en mi view/adminhtml/ui_component/[module]_[entity]_form.xmltengo lo siguiente:

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

Ahora no quiero que este valor sea un textarea, pero quiero crear mi propia magia HTML en el back-end para este valor. Este 'HTML Magic' eventualmente será una gran cantidad de JS / KnockOut que bajo el agua aún envía algunos datos ocultos al publicar el formulario, por lo que debe ser parte del formulario. Intenté agregar un renderizado agregando:

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

Pero esto todavía representa el área de texto. Luego intenté reemplazarlo formElementcon una clase personalizada como esta:

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

Pero luego me sale el error:

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

Entonces 2 preguntas aquí:

¿Es esta la forma correcta de agregar un elemento de formulario personalizado a un formulario de administrador? (y si es así: ¿cómo?)
Independientemente de cualquier cosa: ¿cómo puedo agregar la implementación? Estoy investigando el módulo UI para ver cómo lo hicieron, pero no puedo encontrar nada.

— Giel Berkers
fuente

10

Puede consultar el módulo de muestra de magento que han proporcionado

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

¡Gracias! ¡exactamente la respuesta que estaba buscando! Ya estaba buscando \Magento\Framework\View\Element\UiComponent\Config\Provider\Component\Definition::setComponentData()agregar un componente personalizado usando un evento, ¡pero esto es mucho, mucho más conveniente! Realmente debería analizar más esos ejemplos de Magento 2.

— Giel Berkers

3

No estoy seguro, pero creo que shopping cart price rulele daré una pista sobre esto, aquí está el ejemplo

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

Para más detalles puedes visitar este archivo

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

— Keyur Shah
fuente

¡Gracias por el consejo! Esto parece solo agregar un bloque de contenido HTML. Pero necesito crear un elemento de formulario complejo que tenga mucha lógica KnockOut que esté cargado con XHR.

— Giel Berkers

¿Cómo agregar un campo personalizado al formulario de edición del producto en admin?

— jafar pinjar