TransWikia.com

Dependent picklist field is not getting displayed in the lightning component

Salesforce Asked by SK_112 on February 4, 2021

I have a requirement to display dependent picklist called Interaction_Reason__c when controlling field called Call_Result__c is selected. These fields are from Task object.

I could able to display Call_Result__c but Interaction_Reason__c is not getting displayed.

Below is my lightning component code

Component:

<aura:component controller="closeTaskWithoutActionController" implements="lightning:ActionOverride,force:lightningQuickAction,force:hasRecordId,c:ITimelineAction">
    <lightning:overlayLibrary aura:id="overlayLibrary" />

    <!-- Initialization Handler -->
    <!-- <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> -->
    <aura:handler name="change" value="{!v.modalLoaded}" action="{!c.doInit}" />

    <!-- Attribute Variables -->
    <aura:attribute name="recordId" type="String" access="global" />
    <aura:attribute name="taskFields" type="Task" />
    <aura:attribute name="callResultOptions" type="List" />
    <aura:attribute name="InteractionReasonOptions" type="List" />
    <!-- Registered Events -->
    <aura:registerEvent name="CancelCloseTaskWithoutAction" type="c:CancelCloseTaskWithoutAction" />
    <aura:registerEvent name="SaveCloseTaskWithoutAction" type="c:SaveCloseTaskWithoutAction" />


    <!-- Spinner -->
    <aura:if isTrue="{!v.modalLoaded}">
        <div class="slds-spinner_container" aura:id="spinner">
            <lightning:spinner title="Loading task close quick action" />
        </div>
        <aura:if isTrue="{!v.isAutoSave == false}">
           
                    <div class="slds-size_1-of-2 slds-max-small-size_1-of-1 slds-p-around_small">
                        <lightning:layoutitem>
                            <lightning:input aura:Id="taskform" disabled="true" label="Type" value="{!v.taskFields[0].Type__c}" />
                        </lightning:layoutitem>
                    </div>
                    <div class="slds-size_1-of-2 slds-max-small-size_1-of-1 slds-p-around_small">
                        <lightning:layoutitem>
                            <lightning:select aura:Id="taskform" required="true" class="dynamic" onchange="{!c.handleFilesChange}"
                                label="Interaction Result" name="callresult" value="{!v.taskFields[0].Call_Result__c}">
                                <aura:iteration items="{!v.callResultOptions}" var="item">
                                    <option text="{!item.label}" value="{!item.value}" />
                                </aura:iteration>
                            </lightning:select>
                        </lightning:layoutitem>
                    </div>
                    
                    <div class="slds-size_1-of-2 slds-max-small-size_1-of-1 slds-p-around_small">
                        <lightning:layoutitem>
                            <lightning:select aura:Id="taskform" required="true" class="dynamic" onchange="{!c.handleFilesChange}"
                                label="Interaction Reason" name="interactionreason" value="{!v.taskFields[0].Interaction_Reason__c}">
                                <aura:iteration items="{!v.InteractionReasonOptions}" var="item">
                                    <option text="{!item.label}" value="{!item.value}" />
                                </aura:iteration>
                            </lightning:select>
                        </lightning:layoutitem>
                    </div>

                </div>

            </lightning:layout>
            <div class="slds-align_absolute-center">
                <lightning:button label="Cancel" onclick="{!c.cancel}" />
                <lightning:button label="Save" onclick="{!c.onSave}" variant="brand" />
            </div>
        </aura:if>
    </aura:if>
</aura:component>

Controller.JS:

({
  doInit: function(component, event, helper) {
    if (!component.get("v.modalLoaded")) {
      return;
    }

    helper
      .executeAction(action)
      .then(function(response) {
        helper.hideSpinner(component);
        console.log("response.getReturnValue() : " + JSON.stringify(response));
        component.set("v.taskFields", response);
        console.log(
          "v.taskFields.Type : " + component.get("v.taskFields[0].Type")
        );
        helper.populatetask(component, event, helper);
        helper.getCallResult(component, event, helper);
        helper.getInteractionReason(component,event,helper);
        var cmpTask = component.get("v.taskFields")[0];

        if (cmpTask.Type == "Phone") {
          component.set("v.taskFields[0].Status", "Completed");
          console.log("I am in 1");
          component.set("v.isAutoSave", false);
        } else {
          console.log("cmpTask.What.Type : " + JSON.stringify(cmpTask));
          if ($A.util.isEmpty(cmpTask.Type)) {
            component.set("v.taskFields[0].Type__c", "Other");
          }
          if ($A.util.isUndefined(cmpTask.What)) {
            if (
              !$A.util.isUndefined(cmpTask.Who) &&
              cmpTask.Who.Type == "CaseIssue__c"
            ) {
              component.set("v.taskFields[0].Call_Result__c", "N/A");
              component.set("v.taskFileds[0].Interaction_Reason__c");  
            } else {
              component.set("v.taskFields[0].Call_Result__c", "N/A");
                component.set("v.taskFileds[0].Interaction_Reason__c");
              $A.get("e.force:closeQuickAction").fire();
            }
          } else {
            console.log("cmpTask.What.Type : " + cmpTask.What.Type);
            if (cmpTask.What.Type == "CaseIssue__c") {
              component.set("v.taskFields[0].Call_Result__c", "N/A");
                component.set("v.taskFileds[0].Interaction_Reason__c");
            } else {
              component.set("v.taskFields[0].Call_Result__c", "N/A");
                component.set("v.taskFileds[0].Interaction_Reason__c");
              $A.get("e.force:closeQuickAction").fire();
            }
          }
        }
      })
  },
  cancel: function(component, event, helper) {
    var cancelClose = component.getEvent("CancelCloseTaskWithoutAction");
    cancelClose.fire();
    $A.get("e.force:closeQuickAction").fire();
    component.get("v.overlay").close();
  },
  onSave: function(component, event, helper) {
    console.log("I have fired the onchange");

    helper.createItem(component, event, helper);
  }
});

Helper.js:

({
  isValidFor: function(validFor, index) {
    var decoded = atob(validFor);
    var bits = decoded.charCodeAt(index >> 3);
    var isValid = (bits & (0x80 >> index % 8)) != 0;
    return isValid;
  },
  getCallResult: function(component, event, helper) {
    var cmpTask = component.get("v.taskFields")[0];
    console.log(cmpTask);
    var recordTypeId = cmpTask.RecordTypeId;
    console.log("recordTypeId : " + recordTypeId);

    var action = component.get("c.getCallResultOther");
    var opts = [];
    action.setParams({
      recordTypeId: recordTypeId
    });
    var helper = this;
    action.setStorable();
    this.executeAction(action).then(function(response) {
      response = JSON.parse(response);
      console.log(response);
      if (
        response != undefined &&
        response.Call_Result__c.picklistValues != undefined &&
        response.Call_Result__c.picklistValues.length > 0
      ) {
        opts.push({
          class: "optionClass",
          label: "--- None ---",
          value: ""
        });
        for (var i = 0; i < response.Type__c.picklistValues.length; i++) {
          var val = component.get("v.taskFields[0].Type__c");
          var picklistVal = response.Type__c.picklistValues[i].value;
          if (val == picklistVal) {
            for (
              var j = 0;
              j < response.Call_Result__c.picklistValues.length;
              j++
            ) {
              var depVal = response.Call_Result__c.picklistValues[j];
              if (helper.isValidFor(depVal.validFor, i)) {
                opts.push({
                  class: "optionClass",
                  label: depVal.label,
                  value: depVal.value
                });
              }
            }
          }
        }
      }
      component.set("v.callResultOptions", opts);
    });
  },
    getInteractionReason: function(component, event, helper) {
    var cmpTask = component.get("v.taskFields")[0];
    console.log(cmpTask);
    var recordTypeId = cmpTask.RecordTypeId;
    console.log("recordTypeId : " + recordTypeId);

    var action = component.get("c.getCallResultOther");
    var opts = [];
    action.setParams({
      recordTypeId: recordTypeId
    });
    var helper = this;
    action.setStorable();
    this.executeAction(action).then(function(response) {
      response = JSON.parse(response);
      console.log(response);
      if (
        response != undefined &&
        response.Interaction_Reason__c.picklistValues != undefined &&
        response.Interaction_Reason__c.picklistValues.length > 0
      ) {
        opts.push({
          class: "optionClass",
          label: "--- None ---",
          value: ""
        });
        for (var i = 0; i < response.Call_Result__c.picklistValues.length; i++) {
          var val = component.get("v.taskFields[0].Call_Result__c");
          var picklistVal = response.Call_Result__c.picklistValues[i].value;
          if (val == picklistVal) {
            for (
              var j = 0;
              j < response.Interaction_Reason__c.picklistValues.length;
              j++
            ) {
              var childVal = response.Interaction_Reason__c.picklistValues[j];
              if (helper.isValidFor(childVal.validFor, i)) {
                opts.push({
                  class: "optionClass",
                  label: childVal.label,
                  value: childVal.value
                });
              }
            }
          }
        }
      }
      component.set("v.InteractionReasonOptions", opts);
    });
  }
});

Below is the screenshot of my output:

Output

Instead of picklist values, empty list is getting displayed.

Can anyone please suggest the changes from the above code so that the dependent picklist values can be displayed in the page

Thanks!

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP