I am building a lightning flow to display a list of contacts related an account using lightning flow. My issue is that I am using lightning select aura component to show the contact related to the account. However the contacts are not visible in the UI ( when running debug mode in lightning flow). Here is what my lightning flow looks like:
- I pass the recordId to a screen that has a Lightning component.
- The GetContactRecordsFromAccount lightning component:
Component:
<aura:component implements="lightning:availableForFlowScreens,force:hasRecordId" controller="GetContactForAccountRecords">
<aura:attribute name="accountId" type="String"/>
<aura:attribute name="contactRec" type="Contact[]"/>
<aura:attribute name="configName" type="String"/>
<!--
<aura:attribute name="accountRecord" type="Object[]" description="Acc Records"/>
HANDLERS -->
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<lightning:select aura:id="contactId"
name="contactss"
label="Contact List"
value="{!v.contactRec}">
<aura:iteration var="con" items="{!v.contactRec}">
<option value="{!con.id}" text="{!con.name}"></option>
</aura:iteration>
</lightning:select>
</aura:component>
Controller:
({
doInit : function (component, event, helper) {
console.log(' accountId#### ' + component.get('v.accountId'));
helper.getContactRecords(component);
}
})
Helper:
({
getContactRecords : function(component) {
console.log('Call the helper+++');
const accId = component.get('v.accountId');
const action = component.get('c.getContactrecordsList');
action.setParams({
accId: accId
});
action.setCallback(this, function(response) {
const state = response.getState();
//console.log('response.getState() ===== ' + Json.stringify(response.getReturnValue()));
if (state === 'SUCCESS') {
component.set('v.contactRec', response.getReturnValue());
console.log('Inside success');
}
console.log('after inside success');
const contactRecIds = component.get('v.contactRec');
console.log('contactIdd is ===== ' + JSON.stringify(component.get('v.contactRec')));
});
$A.enqueueAction(action);
}
})
AuraController:
public class GetContactForAccountRecords {
@AuraEnabled
public static List<Contact> getContactrecordsList(Id accId){
List<Contact> newConList = new List<Contact>();
for(Account acc : [select id,(select id from contacts) from Account where id =:accId]){
for(Contact c : acc.Contacts){
newConList.add(c);
}
}
return newConList;
}
}
I am getting the contact list after the call back function is executed. You can see that in the console log below. But the picklist values does not show the values. However it seems that it is hidden. Is this because I am running the flow in debug mode? Is there a fix for this?
Best Answer
There are several issues here.
value
should be bound to an attribute of the same type as thevalue
attributes of theoption
components for this select list. Here, that would be anId
value. It's not sensical here to bind it to a value of typeContact[]
.JavaScript is case-sensitive; Apex is not. These should be
con.Id
andcon.Name
respectively. However,You aren't querying the
Name
field at all, so you'll get nulls here.