Magento 2.1 - Add category selector field in backend custom model form

Question

I'm creating my custom model form on a backend module. I need to allow the admins to select one category for my model, so I wanted to use the Magento standard category selector, like this example :

How can I do ?

FYI, I'm using form fieldset to add fields, like this example:

$fieldset->addField(
        'field_name',
        'text',
        [
            'name' => 'field_name',
            'label' => __('Field Label'),
            'title' => __('Field Title'),
            'required' => false
        ]
    );

There are similar questions, but none of them has a valid answer for the moment.

Answer 1

Well, I have achieved this through the UI Form. Actually I have not got the solution to add a category tree in block form. Then I used the UI form and it's worked.

Add this code in your custom UI form.

<field name="category_id">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Magento\Catalog\Ui\Component\Product\Form\Categories\Options</item>
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Select Category</item>
                    <item name="componentType" xsi:type="string">field</item>
                    <item name="formElement" xsi:type="string">select</item>
                    <item name="component" xsi:type="string">Magento_Catalog/js/components/new-category</item>
                    <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
                    <item name="dataScope" xsi:type="string">category_id</item>
                    <item name="filterOptions" xsi:type="boolean">true</item>
                    <item name="showCheckbox" xsi:type="boolean">false</item>
                    <item name="disableLabel" xsi:type="boolean">true</item>
                    <item name="multiple" xsi:type="boolean">false</item>
                    <item name="levelsVisibility" xsi:type="number">1</item>
                    <item name="sortOrder" xsi:type="number">20</item>
                    <item name="required" xsi:type="boolean">true</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>

                    <item name="additionalClasses" xsi:type="string">category_id</item>



                    <item name="listens" xsi:type="array">
                        <item name="${ $.namespace }.${ $.namespace }:responseData" xsi:type="string">setParsed</item>
                    </item>
                </item>
            </argument>
        </field>

Answer 2

There might be different approaches for this. But i didn't succeed so far.

1. In your form Elements method getElementHtml() you could instantiate the Block \Magento\Catalog\Block\Adminhtml\Category\Widget\Chooser and return its toHtml(). But then it lacks an JS-object of given uniqId.

2. Also Magento 2 : How to add category selector on admin form? mentions to use UI-Components, but I don't know of no way to use them to extend existing Forms as Element.

3. Then belvg builds its custom JS but without using a renderer template. For me the returned <script>-tag gets somehow stripped by either the browser or some core mage-js-magic.

For all of them i built my own CategoryChooser extending \Magento\Framework\Data\Form\Element\AbstractElement:

$elements['category_chooser'] = $fieldset->addField(
    'category_chooser',
    'Company\Mynamespace\Block\Adminhtml\Magento\Catalog\Widget\CategoryChooser',
    [
        'name' => 'category_chooser',
        'label' => __('Category'),
        'title' => __('Category'),
        'required' => false,
    ]
);

What is the Magento Way to go here?