Magento 2: Add UI Multiselect Dropdown

How can I add categories multiselect (same as one used on product page – screen) to my custom module?

Magento2 categories multiselect

Edit: Following @PrincePatel suggestion I have rewritten part of my code to use ui_component. The following code is working (though not doing what I am looking for) and displays grid with one column:

app/code/Patryk/Test/view/adminhtml/ui_component/patryk_test_config_categories.xml

<?xml version="1.0"?> <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">   <argument name="data" xsi:type="array">     <item name="js_config" xsi:type="array">       <item name="provider" xsi:type="string">patryk_test_config_categories.patryk_test_config_listing_data_source</item>       <item name="deps" xsi:type="string">patryk_test_config_categories.patryk_test_config_listing_data_source</item>     </item>     <item name="spinner" xsi:type="string">patryk_test_config_columns</item>   </argument>   <dataSource name="patryk_test_config_listing_data_source">     <argument name="dataProvider" xsi:type="configurableObject">       <argument name="class" xsi:type="string">PatrykTestConfigGridDataProvider</argument>       <argument name="name" xsi:type="string">patryk_test_config_listing_data_source</argument>       <argument name="data" xsi:type="array">         <item name="config" xsi:type="array">           <item name="update_url" xsi:type="url" path="mui/index/render"/>         </item>       </argument>     </argument>     <argument name="data" xsi:type="array">       <item name="js_config" xsi:type="array">         <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>       </item>     </argument>   </dataSource>   <columns name="patryk_test_config_columns">     <column name="status">       <argument name="data" xsi:type="array">         <item name="config" xsi:type="array">           <item name="label" xsi:type="string" translate="true">status</item>         </item>       </argument>     </column>   </columns> </listing> 

I have tried to change listing to form and insert inside (like here), but it doesn’t work (form is not showing and spinner keeps spinning forever). How to change the code to display categories selector? I don’t need it to connect with any data, just display all categories and allow selection like on screen, because I am planning to handle this with JavaScript.

Edit2: I have created empty data provider

namespace Patryk\Test\Model\ResourceModel\Config\Grid;  class Emptycollection extends \Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider {     public function getData(){         return [];     } } 

And custom_ui form

<?xml version="1.0" encoding="UTF-8"?> <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/Ui/etc/ui_configuration.xsd">   <argument name="data" xsi:type="array">     <item name="js_config" xsi:type="array">       <item name="provider" xsi:type="string">patryk_test_config_categories2.patryk_test_config_categories2_data_source</item>       <item name="deps" xsi:type="string">patryk_test_config_categories2.patryk_test_config_categories2_data_source</item>     </item>   </argument>   <dataSource name="patryk_test_config_categories2_data_source">     <argument name="dataProvider" xsi:type="configurableObject">       <argument name="class" xsi:type="string">Patryk\Test\Model\ResourceModel\Config\Grid\Emptycollection</argument>       <argument name="name" xsi:type="string">patryk_test_config_categories2_data_source</argument>       <argument name="data" xsi:type="array">         <item name="js_config" xsi:type="array">           <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>         </item>       </argument>     </argument>     <argument name="data" xsi:type="array">       <item name="js_config" xsi:type="array">         <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>       </item>     </argument>   </dataSource>   <fieldset name="sample_fieldset">     <argument name="data" xsi:type="array">       <item name="config" xsi:type="array">         <item name="label" xsi:type="string" translate="true">Sample Fieldset</item>       </item>     </argument>     <field name="status">       <argument name="data" xsi:type="array">         <item name="config" xsi:type="array">           <item name="sortOrder" xsi:type="number">10</item>           <item name="dataType" xsi:type="string">boolean</item>           <item name="formElement" xsi:type="string">checkbox</item>           <item name="source" xsi:type="string">category</item>           <item name="prefer" xsi:type="string">toggle</item>           <item name="label" xsi:type="string" translate="true">Enable</item>           <item name="valueMap" xsi:type="array">             <item name="true" xsi:type="string">1</item>             <item name="false" xsi:type="string">0</item>           </item>           <item name="validation" xsi:type="array">             <item name="required-entry" xsi:type="boolean">false</item>           </item>           <item name="default" xsi:type="string">1</item>         </item>       </argument>     </field>   </fieldset> </form> 

But it returns an error (simple pop-up alert saying Attention – Something went wrong.) without any further info in logs.

What am I doing wrong?