0

Appreciate some guidance. I have a component which has a checkbox component and a calendar component. enter image description here

I would like to fire an event when a checkbox is selected and render the 2nd component(calendar) When i click the checkbox ,from the console i can see that it goes inside this if condition, but does nothing after that.

if (checked == true) { var evt = $A.get("e.c:ProgramTypeChange"); evt.setParams({ "attrKey": "Program__c", "attrValue": evt.target.value }); evt.fire(); }

What I have done till now:

  1. Created a component comprising comp 1 and comp 2

<aura:handler event="c:ProgramTypeChange" action="{!c.ProgramTypeChange}"/>

<div class="slds slds-grid">
    <div class="slds-col slds-size--1-of-4">
        <c:Picklistcal/>   
    </div>
    <div class="slds-col slds-size--3-of-4">
        <c:EventCalendar objectLabel="{!v.sObjectLabel}"
                                   events="{!v.eventsMap}" 
                                   sObjectName="{!v.sObjectName}" 
                                   titleField="{!v.titleField}"
                                   startDateTimeField="{!v.startDateTimeField}"
                                   endDateTimeField="{!v.endDateTimeField}"
                                   descriptionField="{!v.descriptionField}"
                                   userField="{!v.userField}"
                                   calendarButtons="{!v.calendarButtons}"
                                   weekends="{!v.weekends}"
                                   eventBackgroundColor="{!v.eventBackgroundColor}"
                                   eventBorderColor="{!v.eventBorderColor}"
                                   eventTextColor="{!v.eventTextColor}"/>
    </div>
</div>

please note I have excluded some of my code , just to highlight the things that is important:

  1. Created an APPLICATION EVENT with two attributes attrKey and attrValue. And in Component 1 , I have applied the onchange event, which fires the event from the JS controller.

<lightning:layout horizontalAlign="start">
    <lightning:layoutItem padding="around-large">
        <div class="slds-theme_default slds-box">
            <h1 class="slds-text-heading_medium">ProgramType:</h1>
            <span class="slds-text-heading_large">
                <aura:iteration items="{!v.ProgramTypePicklist}" var="val" >
                    <lightning:input type="checkbox" label="{!val}" name="{!val}"  value="{!val}" onchange="{!c.ProgramTypeChange}"/>
                </aura:iteration>                    
            </span>
        </div>
    </lightning:layoutItem>
</lightning:layout>

JS controller:

doInit: function(component, event, helper) {
    helper.fetchTypePicklist(component); // fetches PickList Values of Type Field
},
ProgramTypeChange : function(component, event, helper) {
    var name = event.getSource().get("v.name");
    var checked = event.getSource().get("v.checked");
    alert(checked);

    if (checked == true)
    { 
        var evt = $A.get("e.c:ProgramTypeChange");
        evt.setParams({ "attrKey": "Program__c", "attrValue": evt.target.value });
        evt.fire();
    }


}

3.Handled the event in the main component.

In the JS controller:

scriptsLoaded : function(component, event, helper) {
    helper.getEvents(component, event);
},
ProgramTypeChange : function(component, event, helper) {
    helper.findbyProgram(component,event);

}

In the Helper JS code :

 findbyProgram : function(component, event){
    var attrKey = event.getParam("attrKey");
    var attrValue = event.getParam("attrValue");
    var action = component.get("c.getEventsbyProgram");
    action.setParams({
        "attrKey": attrKey,
        "attrValue" : attrValue
    }); 
    action.setCallback(this, function(a) {
        component.set("v.eventsMap", a.getReturnValue());
    });
    $A.enqueueAction(action);  
  • Please share the code of application event. – Tushar Sharma Feb 26 at 7:30
  • Hi @TusharSharma, please find below:<aura:event type="APPLICATION"> <aura:attribute name="attrKey" type="String"/> <aura:attribute name="attrValue" type="String"/> </aura:event> – Hara Prasad Sahoo Feb 26 at 12:48
  • Can you edit your question and provide these details with more clarity -- 1. Where is the event registered? 2. Which component is firing the event? 3. Which component is handling the event. In its current form, it's difficult to go through the code and relate the pieces to a particular component. – Jayant Das Feb 26 at 14:14
  • thank you guys, I could achieve the solution by going through the Salesforce documentation of handling an Application event. Appreciate your guidance. – Hara Prasad Sahoo Mar 3 at 23:39
  • And apologies for the long email and inadequate information the first time. – Hara Prasad Sahoo Mar 3 at 23:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.