0

I have a lightning select on my component with two values - Leads and Accounts. When the option leads is selected ,I need to display all the Leads on map and if Accounts is selected then need to display Accounts on map. The issue is I am able to display leads on map when I select the leads option but when I choose Accounts, the component doesn't refreshes and display accounts. Here's the part of my code which does this job-

Component-

-->

<aura:attribute name="acc" type="Account[]" />
<aura:attribute name="lead" type="Lead[]" />
<div class="slds-align_absolute-right ">
      <lightning:select name="Select" label="Select the object" aura:id="Select" onchange="{!c.onChangeObject}"  >
          <option>--Select--</option>
          <option>Accounts</option>
          <option>Leads</option>
      </lightning:select>
  </div>

<aura:attribute name="mapOptions" type="Object" default='{"zoom": 2}' />
<aura:attribute name="mapOptionsCenter" type="Object" />
<aura:attribute name="mapData" type="Object[]" />


<aura:if isTrue="{!v.acc.length > 0}">
    <c:GoogleMap mapOptions="{!v.mapOptions}" mapOptionsCenter="{!v.mapOptionsCenter}" mapData="{!v.mapData}" />
</aura:if>

JS Controller-

onChangeObject : function(component,event,helper){

       helper.fetchrecords(component, event);

           }

JS Helper-

({
fetchrecords: function(component, event) {
    var selectedValue=component.find("Select").get("v.value");
    console.log('Selected value'+selectedValue);
    if (selectedValue =='Leads'){
        var action = component.get('c.getLeads');
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state == "SUCCESS") {
                var leadrec = response.getReturnValue();

                if(leadrec.length > 0){
                    console.log('Lead'+ leadrec[0].Id);

                    var mapOptionsCenter = {"lat":parseFloat(leadrec[0].Latitude), "lng":parseFloat(leadrec[0].Longitude)};
                    var mapData = Array();
                    //cmp.set("v.opportunities", response.getReturnValue());
                    for(var i=0; i<leadrec.length; i++){
                        mapData.push({"lat":parseFloat(leadrec[i].Latitude), "lng":parseFloat(leadrec[i].Longitude),"name":leadrec[i].Name, "markerText":leadrec[i].Id})
                    }

                    component.set('v.mapOptionsCenter', mapOptionsCenter);
                    component.set('v.mapData', mapData);
                    component.set('v.acc', leadrec);
                }
            }

        });
        $A.enqueueAction(action);
    }
    else{
        var action = component.get('c.getAccounts');
        action.setCallback(this, function(response){
            var state = response.getState();
            console.log('state:', state);
            if (state == "SUCCESS") {
                var acc = response.getReturnValue();
                console.log('acc:', acc);


                if(acc.length > 0){
                    console.log('acc'+ acc[0].Id);

                    var mapOptionsCenter = {"lat":parseFloat(acc[0].BillingLatitude), "lng":parseFloat(acc[0].BillingLongitude)};
                    var mapData = Array();
                    //cmp.set("v.opportunities", response.getReturnValue());
                    for(var i=0; i<acc.length; i++){
                        mapData.push({"lat":parseFloat(acc[i].BillingLatitude), "lng":parseFloat(acc[i].BillingLongitude),"name":acc[i].Name, "markerText":acc[i].Id})
                    }

                    component.set('v.mapOptionsCenter', mapOptionsCenter);
                    component.set('v.mapData', mapData);
                    component.set('v.acc', acc);
                }
            }

        });
        $A.enqueueAction(action);

    }

}    

})

Essentially I am not able to re-render the map. Any idea how can we achieve this. Thanks in advance

1

The behavior you mentioned is written in salesforce docs as:

enter image description here

You are not binding the selected value to an attribute, thus you won't get it when you use component.find("Select").get("v.value");

Solution: Bind it to an attribute

<aura:attribute type="selectedValue" type="String"/>

<div class="slds-align_absolute-right ">
          <lightning:select name="Select" label="Select the object" aura:id="Select" onchange="{!c.onChangeObject}" value="{!v.selectedValue}">
              <option>--Select--</option>
              <option>Accounts</option>
              <option>Leads</option>
          </lightning:select>
</div>

JS controller:

onChangeObject : function(component,event,helper){
    var selectedValue=component.get("v.selectedValue");
    console.log(selectedValue);
    helper.fetchrecords(component, event);

}

Source: https://developer.salesforce.com/docs/component-library/bundle/lightning:select/specification

Edit:

As per discussion, the problem is the Map component is not reacting to updated value, so why not have 2 instances of googleMaps components that would be dynamically rendered when selected picklist value is lead or Account

<aura:attribute name="acc" type="Account[]" />
<aura:attribute name="lead" type="Lead[]" />
<aura:attribute type="selectedValue" type="String"/>

<div class="slds-align_absolute-right ">
      <lightning:select name="Select" label="Select the object" aura:id="Select" onchange="{!c.onChangeObject}"  >
          <option>--Select--</option>
          <option>Accounts</option>
          <option>Leads</option>
      </lightning:select>
  </div>

<aura:attribute name="mapOptions" type="Object" default='{"zoom": 2}' />
<aura:attribute name="mapOptionsCenter" type="Object" />
<aura:attribute name="mapData" type="Object[]" />


<aura:if isTrue="{!v.selectedValue =='Leads'}">
    <aura:if isTrue="{!v.acc.length > 0}">
        <c:GoogleMap mapOptions="{!v.mapOptions}" mapOptionsCenter="{!v.mapOptionsCenter}" mapData="{!v.mapData}" />
    </aura:if>
</aura:if>

<aura:if isTrue="{!v.selectedValue == 'Accounts'}">
    <aura:if isTrue="{!v.acc.length > 0}">
        <c:GoogleMap mapOptions="{!v.mapOptions}" mapOptionsCenter="{!v.mapOptionsCenter}" mapData="{!v.mapData}" />
    </aura:if>
</aura:if>

From SF docs:

If the value of the isTrue expression changes and evaluates to false, all the components inside the tag are destroyed. The components are created again if the isTrue expression changes again and evaluates to true.

So when you select Leads the Account varient of googleMaps would be destroyed and lead's version would be created, which would solve your use case.

Source: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_conditional_markup.htm?search_text=aura:if

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.