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:
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!
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP