I want to build a component that looks like the Radio Group Alternate one of the Design System.
I want it pretty basic, so I just created 2 attributes, one String for the label and one String[] for the list of values. This works fine with static values like this:
<c:radioGroup label="Question" values="['Yes','No']"/>
However, as soon as I try to replace these values with Custom Labels (for translation purposes), my attributes aren’t displayed as expected anymore:
I tried several ways to write it, things like that:
<c:radioGroup label="Question" values="{!'[\''+$Label.c.Yes+'\',\''+$Label.c.No+'\']'}"/>
Whatever I tried, it seems that using expressions just end up as a String and I can’t make it behave like an Array of String or a List.
In console.log, I can see the first one being an Array, and second one just a static String:Oblviously I would like to avoid using the JS Controller just for this.
Any idea ?
Answer
// Top component .cmp file
<aura:attribute type="String[]" name="values" default="[]" access="private" />
//Top component controller
({
doInit: function(component, event, helper) {
const values = [
$A.get("$Label.c.MyLabel"),
$A.get("$Label.c.MyLabel2"),
$A.get("$Label.c.MyLabel3"),
$A.get("$Label.c.MyLabel4"),
/* ... */
];
component.set('v.values', values);
}
})
// Give columns to subcomponent
<c:radioGroup label="Question" values="{! v.values }" />
Attribution
Source : Link , Question Author : Fabien Taillon , Answer Author : Nordine Hammache