How to set column as clickable in UI Column Component Listing Magento 2?

Ui component grid with Column Component implements the basic column in the listing.

Listing use column to display a list of different entities for the specific entity collection.

If you want to clickable link column from the available columns in the grid, You can do it using applied bodyTmpl options.

You have created a custom listing for the admin panel and one of the columns is Order Id and you want to clickable this column, Its possible using a UI Listing. Continue reading “How to set column as clickable in UI Column Component Listing Magento 2?”

How to remove input field from ui component form Magento 2?

You can remove any input field or components using <visible>false</visible> in the <settings> node of the fieldset in ui component form.

Let’s assume you have created a custom form component in the admin panel UI or want to remove an existing field from the UI component, create a form XML file with the given code snippet. Continue reading “How to remove input field from ui component form Magento 2?”

How to add wysiwyg in ui component form Magento 2?

You can add a WYSIWYG text field area using UI Component form in Magento 2 backend. With Wysiwyg, you can also add a page builder option to edit content using the page builder.

Use formElement as wysiwyg in XML file with field like <field name=”description” template=”ui/form/field” sortOrder=”10″ formElement=”wysiwyg”>

Add below XML code snippet to use Wysiwyg in custom form UI component,

<?xml version="1.0" encoding="UTF-8"?>
 * Rakesh Jesadiya
<form xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="general" sortOrder="5">
        <field name="content" sortOrder="10" formElement="wysiwyg" template="ui/form/field">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">page</item>
                    <item name="wysiwygConfigData" xsi:type="array">
                        <item name="is_pagebuilder_enabled" xsi:type="boolean">false</item>
                        <item name="toggle_button" xsi:type="boolean">true</item>
                        <item name="height" xsi:type="string">200px</item>
                        <item name="add_variables" xsi:type="boolean">true</item>
                        <item name="add_widgets" xsi:type="boolean">true</item>
                        <item name="add_images" xsi:type="boolean">true</item>
                        <item name="add_directives" xsi:type="boolean">true</item>
                <label translate="true">Contents</label>

template=”ui/form/field” Default template used for Wysiwyg.
is_pagebuilder_enabled value is boolean if you set yes, page builder will be displayed instead of Wysiwyg.
toggle_button — Add toggle button with text Show/Hide editor button.
add_variables — Add Button with text insert variable.
add_widgets — Add Button with text Insert widget button
add_images — Add Button with text insert image button
<rows> indicates the no. of rows for the Wysiwyg.