11

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']"/>

enter image description here

However, as soon as I try to replace these values with Custom Labels (for translation purposes), my attributes aren't displayed as expected anymore:

enter image description here

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:

enter image description here

Oblviously I would like to avoid using the JS Controller just for this.
Any idea ?

  • Not sure if you can pass it as an array of Strings like that. Haven't succeeded in something similar so far. What you could try is to split up your component into multiple. In that case you have a radioGroup component and a radioGroupItem component. Instead of passing the labels as an array of string you will be able to pass it as a string to a single item. – Lieven Juwet Jan 30 '17 at 12:56
  • I tried this but it feels more painful to manage, needs a common "name" attribute on the inputs to avoid conflits in case the component appears twice on a page, needs events to manage the default checked value and changes of this selected values. Seems a lot of plumbery and events handling (possibly performances for a small thing). – Fabien Taillon Jan 30 '17 at 13:28
  • 1
    FWIW, I got pretty close by way of this: <c:radioGroup><aura:set attribute="values">{!$Label.c.yes} {!$Label.c.no}</aura:set></c:radioGroup>, but even though they appear to be labels (they have attributes value, name, and Id), I can't seem to get those attributes populated (they're undefined when I try). I don't know if this will help you or not, maybe you can see what I missed. – sfdcfox Jan 30 '17 at 13:56
  • 1
    Thanks @sfdcfox I tried and couldn't get the attributes values too. I think I'll pass a json object as string and parse it in the controller. I'll keep this open until there is a "real" answer. – Fabien Taillon Feb 3 '17 at 13:25
9

// 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 }" />
  • Hi @Nordine Thanks for this solution, When we access labels in this way, Translations seems not working. Do you have any idea about it? – Dinesh Wickramasinghe Aug 17 '18 at 5:43
  • Hi @Nordine, Please ignore my previous comment, Translations works. I've chosen language incorrectly. – Dinesh Wickramasinghe Aug 17 '18 at 6:07
3

I have done this with checkboxes in this github repo.

It seems the best way to populate the radio button group and keep track of what is clicked is to populate the options via javascript.

<aura:component >

<aura:attribute name="values" 
                type="String[]" 
                default="['All',
                        'Nike',
                        'Puma',
                        'Adidas',
                        'Under Armor',
                        'Diadora',
                        'Reebok']"
                description=""
                />    

<aura:attribute name="fieldOptions" type="Object[]" default="[]" />

<aura:handler name="init" 
              value="{!this}" 
              action="{!c.doInit}"
              description=""
              />

<fieldset class="slds-form-element">
    <legend class="slds-form-element__legend slds-form-element__label">Radio Group Label</legend>
    <div class="slds-form-element__control">
    <aura:iteration items="{!v.fieldOptions}" var="fld">
        <span class="slds-radio">
            <input type="radio" id="{!fld.valueId}" name="options" checked="{! fld.value }" />
            <label class="slds-radio__label" for="{!fld.valueId}">
                <span class="slds-radio--faux"></span>
                <span class="slds-form-element__label">{! fld.label }</span>
            </label>
        </span>        
    </aura:iteration>
    </div>
</fieldset>

The controller code is as follows:

({
doInit : function(component, event, helper) {
    // Populate Checkboxes
    var labelList = component.get("v.values");
    var optsList = [];
    for(var j=0; j<labelList.length; j=j+1) {
        optsList.push(
            {
                label:labelList[j],
                valueId:'plans'+j,
                value:false,
                disabled:false
            }
        );
    }
    component.set("v.fieldOptions", optsList);
}})
2

If you would like to add labels in the radioGroup for each option, you can also do this one

component file :

<aura:attribute type="List" name="options" default="[]" />
<aura:attribute type="String" name="value" />
<lightning:radioGroup name="sampleRadioGroup" label="Select a radio button" options="{! v.options }" value="{! v.value}"/>

controller file :

({
  doInit: function(component, event, helper) {
    const values = [
      {'label': $A.get("$Label.c.MyLabel"), 'value': $A.get("$Label.c.MyLabel") },                                           
      {'label': $A.get("$Label.c.MyLabel2"), 'value': $A.get("$Label.c.MyLabel2") },                                          
      {'label': $A.get("$Label.c.MyLabel3"), 'value': $A.get("$Label.c.MyLabel3") }

        /* ... */
    ];

    component.set('v.values', values);
 }
})
  • Yeah I've seen that. I'm still not happy to need to write JavaScript just for that, should be easier. – Fabien Taillon Dec 12 '17 at 10:08

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.