How to implement Visual UI Select – Adobe Commerce

In this Article, We will learn how to implement visual UI Select in UI Form component Magento 2.

To create a visual UI Select first of all, we have to define a virtual type of class Magento/PageBuilder/Model/Source/VisualSelect in the di.xml file, present in app/code/Webkul/Hello.

Virtual Type

A virtual type allows us to change the arguments of a specific injectable dependency and also allows us to change the behavior of a particular class. This allows us to use a customized class without affecting the original class. this customized class has a dependency on the original.

Here we are making a virtual type of the class VisualSelect that is preset Magento\PageBuilder\Model\Source and the new class created by the virtual type is AppearanceSourceMenu.

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <virtualType name="AppearanceSourceMenu" type="Magento\PageBuilder\Model\Source\VisualSelect">
        <arguments>
            <argument name="optionsSize" xsi:type="string">large</argument>
            <argument name="optionsData" xsi:type="array">
                <item name="10" xsi:type="array">
                    <item name="value" xsi:type="string">list</item>
                    <item name="title" xsi:type="string" translate="true">List</item>
                    <item name="icon" xsi:type="string">Webkul_Hello::images/appearance/list.png</item>
                </item>
                <item name="30" xsi:type="array">
                    <item name="value" xsi:type="string">grid</item>
                    <item name="title" xsi:type="string" translate="true">Grid</item>
                    <item name="icon" xsi:type="string">Webkul_Hello::images/appearance/grid.png</item>
                </item>
            </argument>
        </arguments>
    </virtualType>
</config>

Now, we have to create a UI component XML file named menu_form.xml in app/code/Webkul/Hello/view/adminhtml/ui_component.

In Magento2 UI component is used to render UI elements on the screen, like buttons and tables.

UI components are designed for simple and flexible user interface rendering.

That enables a connection between the UI’s visual elements and the processing of related data that users submitted.

In this blog, we are creating a UI Form in Magento. Here we are using UI Components in the admin area to configure UI components in the admin area.

We have to create a ui_component folder under the adminhtml folder for example – (view/adminhtml/ui_component/[ui_component_name.xml]).

So we have created our ui_component folder under the adminhtml folder.

<?xml version="1.0" encoding="UTF-8"?>
<form 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">menu_form.menu_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Manage Menu</item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
    </argument>
    <settings>
        <buttons>
            <button name="save" class="Webkul\Hello\Block\Adminhtml\Menu\SaveButton"/>
            <button name="back" class="Webkul\Hello\Block\Adminhtml\Menu\BackButton"/>
            <button name="save_and_continue" class="Webkul\Hello\Block\Adminhtml\Menu\SaveAndContinueButton"/>
        </buttons>
        <namespace>Webkul_Hello</namespace>
        <dataScope>data</dataScope>
        <deps>
            <dep>menu_form.menu_form_data_source</dep>
        </deps>
    </settings>
    <dataSource name="menu_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Webkul\Hello\Ui\DataProvider\Menu</argument>
            <argument name="name" xsi:type="string">menu_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">menu_id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="submit_url" xsi:type="url" path="*/*/save" />
                </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/form/provider</item>
            </item>
        </argument>
    </dataSource>
    <fieldset name="appearance_fieldset" sortOrder="10" component="Magento_PageBuilder/js/form/element/dependent-fieldset">
        <settings>
            <label translate="true">Appearance</label>
            <additionalClasses>
                <class name="admin__fieldset-visual-select-large">true</class>
            </additionalClasses>
            <collapsible>false</collapsible>
            <opened>true</opened>
            <imports>
                <link name="hideLabel">${$.name}.appearance:options</link>
            </imports>
        </settings>
        <field name="appearance" formElement="select" sortOrder="10" component="Magento_PageBuilder/js/form/element/dependent-visual-select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">list</item>
                </item>
            </argument>
            <settings>
                <additionalClasses>
                    <class name="admin__field-wide">true</class>
                    <class name="admin__field-visual-select-container">true</class>
                </additionalClasses>
                <dataType>text</dataType>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
            </settings>
            <formElements>
                <select>
                    <settings>
                        <options class="AppearanceSourceMenu" />
                    </settings>
                </select>
            </formElements>
        </field>
    </fieldset>
    <fieldset name="menu_form">
        <settings>
            <label/>
        </settings>
        <field name="menu_id" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">menu_form</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <visible>false</visible>
                <dataScope>menu_id</dataScope>
            </settings>
        </field>
        <field name="label">
            <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">Label</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="dataScope" xsi:type="string">label</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="title">
            <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">Title (Left Section)</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="dataScope" xsi:type="string">title</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
       
        <field name="sub_content">
            <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">Sub Content</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="dataScope" xsi:type="string">sub_content</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="sort_order">
            <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">Sort Order</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="dataScope" xsi:type="string">sort_order</item>
                    <item name="validation" xsi:type="array">
                        <item name="validate-digits" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
            <settings>
                <additionalClasses>
                    <class name="admin__field-small">true</class>
                </additionalClasses>
            </settings>
        </field>

    </fieldset>
  
</form>

Now go to Magento’s Admin end and open your form Our Visual UI Select is ready. We can change our layout dependent on Visual UI Options using switcherConfig.

That’s all in this article, hope it will help you to add a Visual UI-Select in your form.

Try the above code and if you have any issues just comment below.

Happy Coding 🙂