2

For admin form UI checkbox components that use the 'toggle' (like Catalog > Product > [product record] > Enabled) - I can see a few references to the UI component configuration using:

<field name="my_field">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
             <item name="sortOrder" xsi:type="number">15</item>
             <item name="dataType" xsi:type="string">boolean</item>
             <item name="formElement" xsi:type="string">checkbox</item>
             <item name="prefer" xsi:type="string">toggle</item>
             <item name="label" xsi:type="string" translate="true">Enabled</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="default" xsi:type="string">1</item>
        </argument>
     </field>

That'll give me the little toggle with the 'Yes / No' labels - is it possible to change the 'Yes / No' to something else? (Active / Inactive)

2
  • yes,it can be done. Commented Aug 8, 2018 at 18:28
  • Please check the edit of my answer, it is working! Commented Aug 8, 2018 at 19:01

1 Answer 1

3

The labels cannot be changed within the uiComponent options but if you want to override the core functionality , you will have to override

It can be done, check edit.

vendor/magento/module-ui/view/base/web/js/form/element/single-checkbox.js

The yes/no value is returned by following block of code @line 57 of above file

if (this.prefer === 'toggle' && _.isEmpty(this.toggleLabels)) {
                this.toggleLabels = {
                    'on': $t('Yes'),
                    'off': $t('No')
                };
            }

EDIT :

So, I was not able to find example for toggleLabels in core but managed to figure it out by code above .

Just add this node to your component ;

<item name="toggleLabels" xsi:type="array">
           <item name="on" xsi:type="string">Active</item>
           <item name="off" xsi:type="string">Inactive</item>
</item>

You can replace Active and Inactive to whatever desired string .

Resultant xml will be ;

<field name="my_field">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
             <item name="sortOrder" xsi:type="number">15</item>
             <item name="dataType" xsi:type="string">boolean</item>
             <item name="formElement" xsi:type="string">checkbox</item>
             <item name="prefer" xsi:type="string">toggle</item>
             <item name="toggleLabels" xsi:type="array">
               <item name="on" xsi:type="string">Active</item>
               <item name="off" xsi:type="string">Inactive</item>
             </item>
             <item name="label" xsi:type="string" translate="true">Enabled</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="default" xsi:type="string">1</item>
        </argument>
     </field>
5
  • he has asked using Ui-component section may be but you have given with js Commented Aug 8, 2018 at 18:38
  • @Learing_Coder , I have added uiComponent code in edit. Commented Aug 8, 2018 at 19:05
  • Thanks @VivekKumar! using toggleLabels in the UI Component xml worked
    – dbcn
    Commented Aug 9, 2018 at 20:35
  • Np @NathanBennett , consider +1 the answer if you think it addressed all your issues. Commented Aug 10, 2018 at 17:51
  • how can i override/change the default label which is coming from vendor ui component files
    – S.Venky
    Commented Nov 12, 2021 at 15:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.