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

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 ?

Answer 1

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
+ '"' + 'label' + '"'
+ ' : ' + '"' + $Label.c.DM_Gender_Male + '"'
+ ' , ' + '"' + 'value' + '"'
+ ' : ' + '"' + 'Male' + '"'
+ $Label.c.RIGHT_CURLY_BRACKET
+ ' , '
+ $Label.c.LEFT_CURLY_BRACKET
+ '"' + 'label' + '"'
+ ' : ' + '"' + $Label.c.DM_Gender_Female + '"'
+ ' , ' + '"' + 'value' + '"'
+ ' : ' + '"' + 'Female' + '"'
+ $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:

Answer 2

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);
}
})