Using a custom label inside a string throws "Field Integrity Exception"

Question

I want to use a custom label inside a list that I then bind to a multi picklist.

   <aura:attribute name="genderOptions" type="List"
                default="[
                         {'label': {!$Label.c.DM_Gender_Male},'Value': 
                                     'Male'},
                         {'label': {!$Label.c.DM_Gender_Female}, 'value': 
                                    'Female'}
                         ]"
                />

When I try to save the component, then I get the following exception (FIELD INTEGRITY EXCEPTION) Failed to save DMSegmentation.cmp: Cannot mix expression and literal string in attribute value, try rewriting like {!'foo' + v.bar}: Source

Can someone help me to resolve this ?

score 1 · Answer 1 · answered Aug 16 '18 at 11:48

I found the solution. The only solution is to access these list through the client side controller available in the bundle and then populate it with the custom labels. Otherwise, lightning does not allow you to use custom labels inside lists created in the component. Have to use the doInit method for this

 ({
     doInit: function(component, event, helper) {
      var values = [
        $A.get("$Label.c.DM_Gender_Male"),
         $A.get("$Label.c.DM_Gender_Female")            
      ];

      component.set('v.genderOptions', values);
   }
})

martin · Accepted Answer · 2018-08-17T06:43:00.653

Actually it is possible to create this inside the component. The two things you were missing are:

Quotes " need to be represented as XML escape entities.
Open and closing braces { } need to be represented as custom labels.

The component:

<aura:component >
    <aura:attribute 
     name="genderOptions"
     type="List"
     default="{! ' [ ' 
               + $Label.c.LEFT_CURLY_BRACKET 
                       + '&quot;' + 'label'                   + '&quot;' 
               + ' : ' + '&quot;' + $Label.c.DM_Gender_Male   + '&quot;' 
               + ' , ' + '&quot;' + 'value'                   + '&quot;'
               + ' : ' + '&quot;' + 'Male'                    + '&quot;'
               + $Label.c.RIGHT_CURLY_BRACKET 
               + ' , ' 
               + $Label.c.LEFT_CURLY_BRACKET 
                       + '&quot;' + 'label'                   + '&quot;' 
               + ' : ' + '&quot;' + $Label.c.DM_Gender_Female + '&quot;' 
               + ' , ' + '&quot;' + 'value'                   + '&quot;'
               + ' : ' + '&quot;' + 'Female'                  + '&quot;'
               + $Label.c.RIGHT_CURLY_BRACKET 
               + ' ] '
              }"
    />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
</aura:component>

The custom labels:

<?xml version="1.0" encoding="UTF-8"?>
<CustomLabels xmlns="http://soap.sforce.com/2006/04/metadata">
    <labels>
        <fullName>LEFT_CURLY_BRACKET</fullName>
        <language>en_US</language>
        <protected>false</protected>
        <shortDescription>LEFT CURLY BRACKET</shortDescription>
        <value>{</value>
    </labels>
    <labels>
        <fullName>RIGHT_CURLY_BRACKET</fullName>
        <language>en_US</language>
        <protected>false</protected>
        <shortDescription>RIGHT CURLY BRACKET</shortDescription>
        <value>}</value>
    </labels>
    <labels>
        <fullName>DM_Gender_Male</fullName>
        <language>en_US</language>
        <protected>false</protected>
        <shortDescription>DM_Gender_Male</shortDescription>
        <value>♂</value>
    </labels>
    <labels>
        <fullName>DM_Gender_Female</fullName>
        <language>zh_CN</language>
        <protected>false</protected>
        <shortDescription>DM_Gender_Female</shortDescription>
        <value>♀</value>
    </labels>
</CustomLabels>

A client-side controller to get the value of the attribute and log it in the console:

({
    doInit : 
    function( component , event , helper ){
        var list = component.get("v.genderOptions")
        console.log( list )
        console.log( JSON.parse( list ) ) 
    }

,   f :
    function(){

    }
})

The logged result:

Using a custom label inside a string throws "Field Integrity Exception"

2 Answers2