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,

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.

How to Manage Checkbox field in ui component form Magento 2?

You can Manage/add the checkbox component field in admin panel Ui Component form Magento. You can add Checkbox type field with toggle, radio and regular checkbox option.

Use formElement as checkbox in XML file with field tag. <field name=”my_field” sortOrder=”10″ formElement=”checkbox”> Continue reading “How to Manage Checkbox field in ui component form Magento 2?”

How to add Color picker field in ui component form Magento 2?

You can add the color picker field in the Ui Component form in the admin panel of the Magento. Using color picker you can choose a color from predefined color tree structure, add your custom color hash code or create specific color using adjusting color slider.

I have added color picker field in category form to show a demo of color picker in UI Component form XML. Continue reading “How to add Color picker field in ui component form Magento 2?”