[SalesForce] Showing Contacts of Accounts using lightning flow and lightning component

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:

  1. I pass the recordId to a screen that has a Lightning component.

enter image description here

enter image description here

  1. 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?

enter image description here

Best Answer

There are several issues here.

<lightning:select aura:id="contactId"
                  name="contactss"
                  label="Contact List"
                  value="{!v.contactRec}">

value should be bound to an attribute of the same type as the value attributes of the option components for this select list. Here, that would be an Id value. It's not sensical here to bind it to a value of type Contact[].

   <aura:iteration var="con" items="{!v.contactRec}">
     <option value="{!con.id}" text="{!con.name}"></option>
   </aura:iteration>

JavaScript is case-sensitive; Apex is not. These should be con.Id and con.Name respectively. However,

    for(Account acc : [select id,(select id from contacts) from Account where id =:accId]){

You aren't querying the Name field at all, so you'll get nulls here.

Related Topic