+ Start a Discussion
golugolu 

code to display the lighting output from the controller:

Hi,

i have created a component having three checkboxes - course 1 , course 2 and course 3.
also i have a button to select all courses.
My requirement is running a soql query and displaying the count of records for each course type ( the ones which are selected)

So far i have written this code:
<aura:component access="global">
    <aura:attribute name="selected" type="List" default="[]"/>
    <aura:attribute name="options" type="List" default="[{'label': 'Course 1', 'value': 'option1'}, {'label': 'Course 2', 'value': 'option2'},{'label': 'Course 3', 'value': 'option3'}]"/>
    <lightning:checkboxGroup
        aura:id="mygroup"
        name="checkboxGroup"
        label="Checkbox Group"
        options="{!v.options}"
        value="{!v.selected}"
        onchange="{!c.handleChange}"
        required="true" />

    <br/><br/>
    <lightning:button variant="brand" label="Select All" onclick="{!c.selectAll}"/> 
</aura:component>

SelectCheckBox.js
({
    selectAll : function(component, event, helper) {
        component.set("v.selected",['option1','option2','option3']);
    },

    handleChange : function(component, event, helper) {

    },
})


Can you all please give a sample code to proceed forward for the requirement?

Thanks​
SKSANJAYSKSANJAY
Hi Golu,

If you are looking for fetching course data on just selection of checkbox or all the checkbox then follow below code for your reference:
 
<!-- Set the apex controller name where your fetch course method written (myCompController as an example)-->
<aura:component access="global" controller="myCompController">
    <aura:attribute name="selected" type="List" default="[]"/>
    <aura:attribute name="options" type="List" default="[{'label': 'Course 1', 'value': 'option1'}, {'label': 'Course 2', 'value': 'option2'},{'label': 'Course 3', 'value': 'option3'}]"/>
    <lightning:checkboxGroup
        aura:id="mygroup"
        name="checkboxGroup"
        label="Checkbox Group"
        options="{!v.options}"
        value="{!v.selected}"
        onchange="{!c.handleChange}"
        required="true" />

    <br/><br/>
    <lightning:button variant="brand" label="Select All" onclick="{!c.selectAll}"/> 
</aura:component>
 
MyCompController.js
({
    selectAll : function(component, event, helper) {		
        component.set("v.selected",['option1','option2','option3']);
		
		//In case of selecting all --> fetch course data for call
		helper.fecthCourseDetails(component);
    },
    handleChange : function(component, event, helper) {
		//Get all selected courses
		var selectedCourses = component.get("v.selected");
		
		//if any of the course is selected..make call to apex method
		if(selectedCourses != undefined && selectedCourses != null && selectedCourses.length > 0){
			helper.fecthCourseDetails(component, selectedCourses);
		}		
    }
})
 
MyCompHelper.js
({
	fecthCourseDetails : function(component, selectedCourses) {
		try{
			//Make the selected course comma seperated
			var selectedCourseStr = "";
			for(var index = 0; index < selectedCourses.length; index++){
				selectedCourseStr += selectedCourseStr != "" ? "," + selectedCourses[index] : selectedCourses[index];
			}
			
			//call the apex method
			var action = component.get("c.getCourseDetails");			
			
			//Set parameter values
			action.setParams({
				"selectedOptions" : selectedCourseStr
			});
			
            action.setCallback(this, function(response) {
				var state = response.getState();				
				if (component.isValid() && state === "SUCCESS") {
					var courseDetails = response.getReturnValue();
					
					//use courseDetails variable to present data onto lightning component...
				}else{
					alert("Failed to fetch courses....");
				}
			});
		}catch(err){
			console.log("Exception in MyComp fecthCourseDetails method : " + err.stack);
		}
	}
})
 
//Apex class for fetching course data
myCompController.apex
public class myCompController{

	//AuraEnabled annotation is required to make this method available to be called from lightning controller ot helper.
	@AuraEnabled
	public Map<String, String> getCourseDetails(String selectedOptions){
		Map<String, String> courseDetailMap = new Map<String, String>();
		try{
			//get all the selected courses
			List<String> selectedCourseList = selectedOptions.split(',');
			
			//make query to your object to get course details...lets say 
			List<MyCourseObject> courseList = [My QUery...];
			
			for(MyCourseObject courseObj : courseList){
				courseDetailMap.put(courseObj.Id, JSON.serialize(courseObj));
			}
		}catch(Exception ex){
			courseDetailMap.put('Exception', 'Exception Message : ' + ex.getMessage() + ', Stack : ' + ex.getStackTraceString());
		}
		
		return courseDetailMap;
	}
}

Hope this will help you...

Thanks,
Sanjay​
Shubham saini 14Shubham saini 14

Hi Golu,

.cmp

<aura:component access="global" controller="courseController">
    <aura:attribute name="selected" type="List" default="[]"/>
    <aura:attribute name="options" type="List" default="[{'label': 'Course 1', 'value': 'option1'}, {'label': 'Course 2', 'value': 'option2'},{'label': 'Course 3', 'value': 'option3'}]"/>
    <lightning:checkboxGroup aura:id="mygroup"
        name="checkboxGroup"
        label="Checkbox Group"
        options="{!v.options}"
        value="{!v.selected}"
        onchange="{!c.handleChange}"
        required="true" />

    <br/><br/>
    <lightning:button variant="brand" label="Select All" onclick="{!c.selectAll}"/> 
</aura:component>
JsController
({
    selectAll : function(cmp, event, helper) {
        var action = cmp.get("c.getAllCourse");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                alert("From server: " + response.getReturnValue());
            }
        });$A.enqueueAction(action);
    },
    
    handleChange : function(cmp, event, helper) {
        var action = cmp.get("c.getAllCourse");
        action.setParams({ courses : cmp.get("v.selected") });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                alert("From server: " + response.getReturnValue());
            }
        });$A.enqueueAction(action);
    },
})
courseController .apxc
public class courseController {
    public static List<YourObject> getAllCourse(){
        return [select id from YourObject];
    }
    public static List<YourObject> getCourse(List<String> courses){
        return [select id from YourObject where course IN : courses ];
    }
}

Hope, this will help you

Thanks