Retrieving Data from an Apex Controller - Salesforce Globe For You

Retrieving Data from an Apex Controller

To retrieve the string array from an Apex controller, bind the component to the controller. This component retrieves the string array when a button is clicked.

<aura:component controller="namespace.AttributeTypes">
    <aura:attribute name="countries" type="String[]" default="India, USA,Singapore, Germany"/>
    <aura:iteration items="{!v.countries}" var="s">
        {!s}
    </aura:iteration>
    <lightning:button onclick="{!c.getString}" label="Update"/>
</aura:component>

Set the Apex controller to return a List<String> object.

public class AttributeTypes {
    private final String[] arrayItems;
    
 @AuraEnabled
    public static List<String> getStringArray() {
        String[] arrayItems = new String[]{ 'Canada', 'Mexico', 'Austarlia' };
        return arrayItems;
    }

}


This client-side controller retrieves the string array from the Apex controller and displays it using the {!v.countries} expression.


({
    getString : function(component, event) {
    var action = component.get("c.getStringArray");
     action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var stringItems = response.getReturnValue();
                component.set("v.countries", stringItems);
            }
        });
        $A.enqueueAction(action);
    }
})

To retrieve data from an object that’s returned by an Apex controller, create an attribute with a type corresponding to a standard or custom object.


<aura:attribute name="accounts" type="Account[]"/>

Build a Chevron Process View Using Salesforce Lightning Framework

Build a Chevron Process View Using Salesforce Lightning Framework

Output :

1) Survey.cmp

<aura:component >

    <aura:attribute name="selectedStep" type="string" default="stage1"/>

    <aura:attribute name="options" type="List" default="[

    {'label': 'Yes', 'value': 'option1'},

    {'label': 'No', 'value': 'option2'}

    ]"/>

    <aura:attribute name="value" type="String" default="option1"/>

    <div class="slds-m-around_xx-large">

         

        <lightning:progressIndicator currentStep="{!v.selectedStep}" type="path">

            <lightning:progressStep label="2019" value="stage1" onclick="{!c.selectstage1}" class="slds-progress-bar__value slds-progress-bar__value_success"/>

            <lightning:progressStep label="2020" value="stage2" onclick="{!c.selectstage2}"/>

            <lightning:progressStep label="2021" value="stage3" onclick="{!c.selectstage3}"/>

            <lightning:progressStep label="2022" value="stage4" onclick="{!c.selectstage4}"/>

        </lightning:progressIndicator>

         

        <div class="slds-p-around--medium">

            <div class="{!v.selectedStep == 'stage1' ? 'slds-show' : 'slds-hide'}">

             

    

    <lightning:radioGroup name="radioGroup"

                          label="1) Do You Live in USA ?"

                          options="{! v.options }"

                          value="{! v.value }"

                          type="radio"/>

            </div>

            <div class="{!v.selectedStep == 'stage2' ? 'slds-show' : 'slds-hide'}">

                <p><b>Step 2</b></p>

            </div>

            <div class="{!v.selectedStep == 'stage3' ? 'slds-show' : 'slds-hide'}">

                <p><b>Step 3</b></p>

            </div>

            <div class="{!v.selectedStep == 'stage4' ? 'slds-show' : 'slds-hide'}">

                <p><b>Step 4</b></p>

            </div>

        </div>

         

        <div>

            <button disabled="{!v.selectedStep != 'stage1' ? '' : 'disabled'}" class="slds-button slds-button--neutral" onclick="{!c.handlePrev}">Back</button>  

            <aura:if isTrue="{!v.selectedStep != 'stage4'}">

                <button class="slds-button slds-button--brand" onclick="{!c.handleNext}">Next</button>

            </aura:if>

            <aura:if isTrue="{!v.selectedStep == 'stage4'}">   

                <button class="slds-button slds-button--brand" onclick="{!c.handleFinish}">Finish</button>  

            </aura:if>

        </div>

    </div>

</aura:component>

---------------------

2) SurveyController.js

({

    handleNext : function(component,event,helper){

        var getselectedStep = component.get("v.selectedStep");

        if(getselectedStep == "stage1"){

            component.set("v.selectedStep", "stage2");

        }

        else if(getselectedStep == "stage2"){

            component.set("v.selectedStep", "stage3");

        }

         else if(getselectedStep == "stage3"){

            component.set("v.selectedStep", "stage4");

        }

    },

     

    handlePrev : function(component,event,helper){

        var getselectedStep = component.get("v.selectedStep");

        if(getselectedStep == "stage2"){

            component.set("v.selectedStep", "stage1");

        }

        else if(getselectedStep == "stage3"){

            component.set("v.selectedStep", "stage2");

        }

        else if(getselectedStep == "stage4"){

            component.set("v.selectedStep", "stage3");

        }

    },

     

    handleFinish : function(component,event,helper){

        alert('Finished...');

        component.set("v.selectedStep", "stage1");

    },

     

    selectstage1 : function(component,event,helper){

        component.set("v.selectedStep", "stage1");

    },

    selectstage2 : function(component,event,helper){

        component.set("v.selectedStep", "stage2");

    },

    selectstage3 : function(component,event,helper){

        component.set("v.selectedStep", "stage3");

    },

    selectstage4 : function(component,event,helper){

        component.set("v.selectedStep", "stage4");

    },

})

3) Launch the App

<aura:application extends="force:slds">

    <c:Survey />

</aura:application>