9

I've created a form in the admin using UI components, so in my view/adminhtml/ui_component/[module]_[entity]_form.xml I have the following:

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

Now I don't want this value to be a textarea, but I want to create my own HTML magic in the backend for this value. This 'HTML Magic' will eventually be a lot of JS/KnockOut that under water still sends some hidden data when posting the form, so it needs to be part of the form. I tried adding a rendered by adding:

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

But this still renders the textarea. Then I tried replacing the formElement with a custom class like so:

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

But then I get the error:

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

So 2 questions here:

  1. Is this the right way to add a custom form element to an admin form? (and if so: how?)
  2. Regardless of anything: how can I add the implementation? I'm digging through the UI-module to see how they did it, but I can't find anything.
10

You can check the magento sample module they have provided

<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>
  • Thanks! exactly the answer I was looking for! I was already looking into \Magento\Framework\View\Element\UiComponent\Config\Provider\Component\Definition::setComponentData() to add a custom component by using an event, but this is much, much more convenient! I really should look more into those Magento 2 examples. – Giel Berkers Dec 23 '16 at 13:56
3

I am not sure, but I think shopping cart price rule will give you some hint about this, here is the example

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

For more detail you can visit this file

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

  • Thanks for the tip! This seems to just add a block of HTML content. But I need to create a complex form element that has a lot of KnockOut logic in it that's loaded with XHR. – Giel Berkers Dec 23 '16 at 13:14
  • how to add custom field to product edit form in admin? – jafar pinjar Nov 8 '18 at 9:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.