Como posso adicionar um campo personalizado a um formulário de administração no Magento 2?

9

Eu criei um formulário no administrador usando componentes da interface do usuário, então no meu view/adminhtml/ui_component/[module]_[entity]_form.xmleu tenho o seguinte:

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

Agora não quero que esse valor seja um textarea, mas quero criar minha própria mágica HTML no back-end para esse valor. Esse 'HTML Magic' acabará sendo um monte de JS / KnockOut que, debaixo d'água, ainda envia alguns dados ocultos ao postar o formulário, portanto, ele precisa fazer parte do formulário. Tentei adicionar um renderizado adicionando:

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

Mas isso ainda renderiza a área de texto. Então tentei substituir o formElementpor uma classe personalizada da seguinte maneira:

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

Mas então eu recebo o erro:

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

Então, 2 perguntas aqui:

  1. É o caminho certo para adicionar um elemento de formulário personalizado a um formulário de administrador? (e se sim: como?)
  2. Independentemente de qualquer coisa: como posso adicionar a implementação? Estou pesquisando o módulo da interface do usuário para ver como eles fizeram isso, mas não consigo encontrar nada.
magento2 adminhtml uicomponent ui-form Giel Berkers
fonte

Respostas:

10

Você pode verificar o módulo de amostra magento que eles forneceram

<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
Obrigado! exatamente a resposta que eu estava procurando! Eu já estava procurando \Magento\Framework\View\Element\UiComponent\Config\Provider\Component\Definition::setComponentData()adicionar um componente personalizado usando um evento, mas isso é muito, muito mais conveniente! Eu realmente deveria olhar mais para esses exemplos do Magento 2.
Giel Berkers
3

Não tenho certeza, mas acho que shopping cart price rulevou dar uma dica sobre isso, aqui está o exemplo

<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 mais detalhes, você pode visitar este arquivo

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

Keyur Shah
fonte
Obrigado pela dica! Parece apenas adicionar um bloco de conteúdo HTML. Mas preciso criar um elemento de formulário complexo que tenha muita lógica do KnockOut carregada com o XHR.
Giel Berkers
como adicionar um campo personalizado ao formulário de edição do produto no admin?
Jafar pinjar