Sunday 25 March 2018

lightning:radioGroup values preparation from Apex Class

Hi ,

Here in the following i am preparing the values from Apex class for lightning:radioGroup.

Lightniong:radiogroup:
-----------------------------

Apex Controller:
-------------------
public class LightningRadioGroup {
   @Auraenabled
    public static Map<string,String> retrieveValues(){
        Map<String,String> dummyValuesMap = new Map<String,String>();
        dummyValuesMap.put('balaji','balaji');
        dummyValuesMap.put('Sree Valli','Sree Valli');
        return dummyValuesMap;
    }
     @Auraenabled
    public static String retrieValuesinJSON(){
        JSONGenerator gen = JSON.createGenerator(true);
        gen.writeStartArray();
        gen.writeStartObject();
            gen.writeStringField('class','optionClass');
            gen.writeStringField('label','Balaji');
            gen.writeStringField('value','Balaji');
        gen.writeEndObject();
         gen.writeStartObject();
            gen.writeStringField('class','optionClass');
            gen.writeStringField('label','Alivelimanga');
            gen.writeStringField('value','Alivelimanga');
        gen.writeEndObject();
        gen.writeEndArray();
        String jsonString= gen.getAsString();
        System.debug('jsonString:'+jsonString);
        return jsonString;
    }
}
---------------
RadioGroup.cmp: (preparation of values using Map)

<aura:component controller="LightningRadioGroup">
    <aura:handler name="init" value="{!this}" action="{!c.usingMap}"/>
    <aura:attribute name="optionsList" type="List" /> 
    <aura:attribute name="value" type="String" default="option1"/>
    <div class="slds-form slds-form_stacked">
        <h1>Lightning Radio Group Example</h1>
    <lightning:radioGroup aura:id="mygroup"
                name="radioButtonGroup"
                label="Radio Button Group Usin Map"
                options="{!v.optionsList}"
                value="{!v.value}"       
                required="true" />
   
    </div>
</aura:component>

RadioGroupController.js:
----------------------------
({
usingMap : function(component, event, helper) {       
var action = component.get("c.retrieveValues");
        action.setCallback(this,function(response){
            var values = [];
            var result = response.getReturnValue();
            for(var key in result){
                values.push({
                    class:'optionClass',
                    label:key,
                    value:result[key]});     
            }
            component.set("v.optionsList",values);
        });
        $A.enqueueAction(action);
}
})



RadioGroupusinJSON.cmp: (Displaying values using JSON string)

<aura:component controller="LightningRadioGroup">
    <aura:handler name="init" value="{!this}" action="{!c.usingJSON}"/>
    <aura:attribute name="optionsJSON" type="String" /> 
    <aura:attribute name="value" type="String" default="option1"/>
    <div class="slds-form slds-form_stacked">
    <lightning:radioGroup aura:id="mygroup"
                name="radioButtonGroup"
                label="Radio Button Group Usin JSON"
                options="{!v.optionsJSON}"
                value="{!v.value}"       
                required="true" />
   
    </div>
</aura:component>

RadioGroupusinJSONController.js:
({
usingJSON : function(component, event, helper) {       
var action = component.get("c.retrieValuesinJSON");
        action.setCallback(this,function(response){         
            var result = response.getReturnValue();
            component.set("v.optionsJSON",JSON.parse(result));         
        });
        $A.enqueueAction(action);
}
})


Output:
---------



References:
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_radioGroup.htm

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_ui_inputRadio.htm

No comments:

Post a Comment

How to include a screen flow in a Lightning Web Component

 Hi, Assume  you have a flow called "Quick Contact Creation" and API Name for the same is "Quick_Contact_Creation". To i...