Magento2.4.2: How to create a green Enabl/Disable button in custom admin form?

Question

**

• I want to create a custom Enable/Disable button in custom admin form just like that in this picture

** enter image description here

• and i want to add this kind of button in my this custom admin form, any idea?

enter image description here

**

• and these are my fields

**

<fieldset name="promotions_popup_box">
 <settings>
 <label translate="true">PopUpBox Form</label>
 </settings>
 <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</item>
 <item name="formElement" xsi:type="string">input</item>
 <item name="dataScope" xsi:type="string">title</item>
 </item>
 </argument>
 </field>
 <field name="description">
 <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">Description</item>
 <item name="formElement" xsi:type="string">textarea</item>
 <item name="dataScope" xsi:type="string">description</item>
 </item>
 </argument>
 </field>
 <field name="image">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="dataType" xsi:type="string">string</item>
 <item name="label" xsi:type="string" translate="true">Image</item>
 <item name="formElement" xsi:type="string">fileUploader</item>
 <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
 <item name="previewTmpl" xsi:type="string">ui/form/element/uploader/preview</item>
 <item name="sortOrder" xsi:type="number">10</item>
 <item name="required" xsi:type="boolean">true</item>
 <item name="allowedExtensions" xsi:type="string">jpg jpeg gif png svg</item>
 <item name="uploaderConfig" xsi:type="array">
 <item name="url" xsi:type="url" path="promotions/form/tempUpload"/>
 </item>
 <item name="notice" xsi:type="string"><![CDATA[Allowed file types:jpg, jpeg, png.]]></item>
 </item>
 </argument>
 </field>
 <field name="category_link">
 <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">Category Link</item>
 <item name="formElement" xsi:type="string">input</item>
 <item name="dataScope" xsi:type="string">category_link</item>
 </item>
 </argument>
 </field>
 <field name="timer" formElement="date">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="source" xsi:type="string">timer</item>
 </item>
 </argument>
 <settings>
 <validation>
 <rule name="validate-date" xsi:type="boolean">true</rule>
 </validation>
 <dataType>text</dataType>
 <label translate="true">Timer</label>
 <visible>true</visible>
 <dataScope>timer</dataScope>
 </settings>
 </field>
 </fieldset>

Answer 1

You need to add a field in the schema of the custom record that your screen saves

for instance:

 <column xsi:type="smallint" name="record_is_active" unsigned="false" nullable="false" identity="false"
 default="1" comment="Is Record Active"/>

The run setup:upgrade to get the column in your schema

Finally, in your form ui_component file (example: app/code/Namespace/Module/view/adminhtml/ui_component/custom_record_form.xml), add the following snippet:

<field name="record_is_active" sortOrder="10" formElement="checkbox">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="source" xsi:type="string">my_custom_record</item>
 <item name="default" xsi:type="number">1</item>
 </item>
 </argument>
 <settings>
 <dataType>boolean</dataType>
 <label translate="true">Enable Record</label>
 <dataScope>record_is_active</dataScope>
 </settings>
 <formElements>
 <checkbox>
 <settings>
 <valueMap>
 <map name="false" xsi:type="number">0</map>
 <map name="true" xsi:type="number">1</map>
 </valueMap>
 <prefer>toggle</prefer>
 </settings>
 </checkbox>
 </formElements>
 </field>

in the snippets above, the words my_custom_record and record_is_active needs to match the name of your environment.

then, flush cache and reload the form and you should see the enable field. Next step are to save the field in your controller.

• Afzel Arshad: thanks, can you kindly take a look here magento.stackexchange.com/questions/358904/…
• Herve Tribouilloy: of course, can you accept this answer first?
• Afzel Arshad: yes, Sorry i was testing this code