How can I add a custom field to an admin form in Magento 2?

Question

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.

Answer 1

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>

• Giel Berkers: 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.

Answer 2

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

• Giel Berkers: 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.
• Jafar Pinjar: how to add custom field to product edit form in admin?