+ Start a Discussion
Raj R.Raj R. 

What is the recommended way to setup a Lightning page so that it takes user input and passes it off to an apex class?

Hi,

We have to create a lightning page that has a set of checkboxes that a user is allowed to set to true or false. There is also a button that based on the checkboxes that are selected, it will perform some action through an apex classes. A sample scenario is below. What is the recommended way to accomplish this as i am trying to optimize and keep things simple?

Example scenario (assume 20 checkboxes exists)
  1. checkbox1=true
  2. checkbox2=true
  3. checkbox3=true
  4. checkbox10=true
  5. all other checkboxes are false
  6. On click of a button, the input should be passed to an apex class which will take the input and run some action based on what is selected as true
Best Answer chosen by Raj R.
GarryPGarryP
here is example/Sample code (as per your example scenario) which works -

//lightning component controller and JS
<aura:component controller="LightningExample">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="data" type="WrapperPagedata"/>
    <div>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th><b>Checkbox Value</b></th>
                </tr> <tr>
                <th><b>Checkbox Value</b></th>
                </tr> <tr>
                <th><b>Checkbox Value</b></th>
                </tr>              
            </thead>
            <tbody>                               
                <tr>
                    <td>
                        <ui:inputCheckbox aura:id="checkbox1" 
                                          label="Select?" value="{!v.data.checkbox1}"/>
                    </td>
                </tr> <tr>
                <td>
                    <ui:inputCheckbox aura:id="checkbox2" 
                                      label="Select?" value="{!v.data.checkbox2}"/>
                </td>
                </tr> <tr>
                <td>
                    <ui:inputCheckbox aura:id="checkbox3" 
                                      label="Select?" value="{!v.data.checkbox3}"/>
                </td>
                </tr> 
            </tbody>
        </table>
        <ui:button aura:id="button" 
                   buttonTitle="Click to see what you put into the field" 
                   class="button" label="Click me" press="{!c.getData}"/>
    </div>
</aura:component>

//Component controller
({
    //initialize the apex controller class and bind the data to iterator in lightning component
    doInit : function(component, event, helper) {
        helper.doInit(component, event);
    },
    //collect the data using this function and send to Apex class
    getData: function(component, event, helper) {
       helper.sendDataToController(component, event); 
    }
})

//Helper jS
({
    doInit : function(cmp, ev) {
        var action = cmp.get("c.getWrapperData");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                console.log('Data from Controller**');
                console.log(response.getReturnValue());
               cmp.set('v.data', response.getReturnValue());
            }
            else if (state === "ERROR") {
                alert('Error : ' + JSON.stringify(response.getReturnValue()));
            }
        });
        $A.enqueueAction(action);
    },
    sendDataToController : function(cmp, ev) {
        var action = cmp.get("c.collectWrapperData");
         var data = cmp.get("v.data");
        console.log('data to sent');
        //see how data loooks like in console
        console.log(data);
        action.setParams({
            "data":JSON.stringify(data)
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                console.log('Response from Controller**');
                console.log(response.getReturnValue());
               //cmp.set('v.data', response.getReturnValue());
            }
            else if (state === "ERROR") {
                alert('Error : ' + JSON.stringify(response.getReturnValue()));
            }
        });
        $A.enqueueAction(action);
    }
    
})

//Wrapper class which you will have to modify as per your need. Add all the required data field in this wrapper class
/*wrapper class for the Page Data*/
public class WrapperPageData {
    /*Crerate class variables to capture the data from the page*/
    @AuraEnabled
    public Boolean checkbox1 {get;set;}
    @AuraEnabled
    public Boolean checkbox2 {get;set;}
    @AuraEnabled
    public Boolean checkbox3 {get;set;}
    //Initialize the controller
    public WrapperPageData(){
        checkbox1=false;
        checkbox2=false;
        checkbox3=false;
    }
}

//Main Apex controller which will receive your data from the lghtning page
 
public with sharing class LightningExample {
    public LightningExample(){
    }
    @AuraEnabled
    public static WrapperPageData getWrapperData(){
        wrapperPageData wrapperPageData = new WrapperPageData();
        System.debug('pageData****'+wrapperPageData);
        return wrapperPageData  ;
    } 
    @AuraEnabled
    public static String collectWrapperData(String data){
        System.debug('Process your data and send response back. data collected pageData****'+data);
        //parse the JSON string and do neccessary processing
        return 'Data successfully cpatured at Controller'  ;
    }
}

 

All Answers

GarryPGarryP
You might have to build the custom logic to process the lightning page`s input . All the logic would inside lightning helper/controller class.
For all this you will have to look at the tarilhead how to create lightning components.

Collect all the values from the page and assign back to APEX controller that is asscoiated with lightning page component.
GarryPGarryP
here is example/Sample code (as per your example scenario) which works -

//lightning component controller and JS
<aura:component controller="LightningExample">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="data" type="WrapperPagedata"/>
    <div>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th><b>Checkbox Value</b></th>
                </tr> <tr>
                <th><b>Checkbox Value</b></th>
                </tr> <tr>
                <th><b>Checkbox Value</b></th>
                </tr>              
            </thead>
            <tbody>                               
                <tr>
                    <td>
                        <ui:inputCheckbox aura:id="checkbox1" 
                                          label="Select?" value="{!v.data.checkbox1}"/>
                    </td>
                </tr> <tr>
                <td>
                    <ui:inputCheckbox aura:id="checkbox2" 
                                      label="Select?" value="{!v.data.checkbox2}"/>
                </td>
                </tr> <tr>
                <td>
                    <ui:inputCheckbox aura:id="checkbox3" 
                                      label="Select?" value="{!v.data.checkbox3}"/>
                </td>
                </tr> 
            </tbody>
        </table>
        <ui:button aura:id="button" 
                   buttonTitle="Click to see what you put into the field" 
                   class="button" label="Click me" press="{!c.getData}"/>
    </div>
</aura:component>

//Component controller
({
    //initialize the apex controller class and bind the data to iterator in lightning component
    doInit : function(component, event, helper) {
        helper.doInit(component, event);
    },
    //collect the data using this function and send to Apex class
    getData: function(component, event, helper) {
       helper.sendDataToController(component, event); 
    }
})

//Helper jS
({
    doInit : function(cmp, ev) {
        var action = cmp.get("c.getWrapperData");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                console.log('Data from Controller**');
                console.log(response.getReturnValue());
               cmp.set('v.data', response.getReturnValue());
            }
            else if (state === "ERROR") {
                alert('Error : ' + JSON.stringify(response.getReturnValue()));
            }
        });
        $A.enqueueAction(action);
    },
    sendDataToController : function(cmp, ev) {
        var action = cmp.get("c.collectWrapperData");
         var data = cmp.get("v.data");
        console.log('data to sent');
        //see how data loooks like in console
        console.log(data);
        action.setParams({
            "data":JSON.stringify(data)
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                console.log('Response from Controller**');
                console.log(response.getReturnValue());
               //cmp.set('v.data', response.getReturnValue());
            }
            else if (state === "ERROR") {
                alert('Error : ' + JSON.stringify(response.getReturnValue()));
            }
        });
        $A.enqueueAction(action);
    }
    
})

//Wrapper class which you will have to modify as per your need. Add all the required data field in this wrapper class
/*wrapper class for the Page Data*/
public class WrapperPageData {
    /*Crerate class variables to capture the data from the page*/
    @AuraEnabled
    public Boolean checkbox1 {get;set;}
    @AuraEnabled
    public Boolean checkbox2 {get;set;}
    @AuraEnabled
    public Boolean checkbox3 {get;set;}
    //Initialize the controller
    public WrapperPageData(){
        checkbox1=false;
        checkbox2=false;
        checkbox3=false;
    }
}

//Main Apex controller which will receive your data from the lghtning page
 
public with sharing class LightningExample {
    public LightningExample(){
    }
    @AuraEnabled
    public static WrapperPageData getWrapperData(){
        wrapperPageData wrapperPageData = new WrapperPageData();
        System.debug('pageData****'+wrapperPageData);
        return wrapperPageData  ;
    } 
    @AuraEnabled
    public static String collectWrapperData(String data){
        System.debug('Process your data and send response back. data collected pageData****'+data);
        //parse the JSON string and do neccessary processing
        return 'Data successfully cpatured at Controller'  ;
    }
}

 
This was selected as the best answer
Raj R.Raj R.
Thank Girish P. All those tips worked as expected, we were able to take the input and perform the same actions as before but using lightning.