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)

| improve this question | | | | |
  • yes,it can be done. – Learing_Coder Aug 8 '18 at 18:28
  • Please check the edit of my answer, it is working! – Vivek Kumar Aug 8 '18 at 19:01
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>
| improve this answer | | | | |
  • he has asked using Ui-component section may be but you have given with js – Learing_Coder Aug 8 '18 at 18:38
  • @Learing_Coder , I have added uiComponent code in edit. – Vivek Kumar Aug 8 '18 at 19:05
  • Thanks @VivekKumar! using toggleLabels in the UI Component xml worked – dbcn Aug 9 '18 at 20:35
  • Np @NathanBennett , consider +1 the answer if you think it addressed all your issues. – Vivek Kumar Aug 10 '18 at 17:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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