function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Lalitha Pavani Rallabandi 9Lalitha Pavani Rallabandi 9 

Dual list box

Hi,
My requirement is, upon selection of the contacts from the Dual List Box, it should display the selected contacts related accounts and opportunities. But it is not showing the related accounts and opportunities. Kindly help me. Here is my code:
Component: 
<aura:component controller="ltngDualBox_Controller"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    
    <!-- Attributes Start -->
    <aura:attribute name="listContacts" type="List" />
    <aura:attribute name="selectedcontacts" type="List" />
    <aura:attribute name="contacts" type="contact" />
    <aura:attribute name="Accounts" type="Object" />
    <aura:attribute name="Accountcolumns" type="List" />
    <aura:attribute name="Opty" type="Object" />
    <aura:attribute name="optycolumns" type="List" />
    <!-- Attribute End -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <div class="c-container" >
        <lightning:layout>
            <lightning:layoutItem padding="around-small" size="6">
                <!-- List of contacts goes here -->
                <!-- Dual List Box Starts -->
                <lightning:dualListbox name="contacts"
                                       label="select a contact"
                                       fieldLevelHelp="Select your contact"
                                       options="{!v.listContacts}"
                                       onchange="{!c.handlechange}" />
            </lightning:layoutItem>
        </lightning:layout>
    </div>
    <div style="height: 300px">
        <lightning:layout>
            <lightning:layoutItem padding="around-small" size="6">
                <lightning:card iconName="standard:account" title=" Accounts of selected contact" >
                    <!-- Account List Goes Here -->
                    <lightning:datatable data="{!v.Accounts}" columns="{!v.Accountcolumns}" keyField="Id" hideCheckboxColumn="true"/>
                </lightning:card>
            </lightning:layoutItem>
        </lightning:layout>
        <lightning:layout>
            <lightning:layoutItem padding="around-small" size="6">
                <lightning:card iconName="standard:opportunity" title=" opportunities for selected contact" >
                    <!-- opportunity List Goes Here -->
                    <lightning:datatable data="{!v.Opty}" columns="{!v.optycolumns}" keyField="Id" hideCheckboxColumn="true"/>
                </lightning:card>
            </lightning:layoutItem>
        </lightning:layout>
        
    </div>
</aura:component>
Controller:
        
({
    doInit : function(component, event, helper) {
        helper.getListofcontacts(component, event, helper);
    },
    handlechange : function(component,event,helper){
        helper.getSelectedContacts(component,event,helper);
        component.set("v.Accountcolumns", [
            {label:"Name", fieldName:"Name", type:"text"},
            {label:"Industry", fieldName:"Industry", type:"text"},
            {label:"Phone", fieldName:"Phone", type:"phone"},
            {label:"Rating", fieldName:"Rating", type:"text"}
        ]);
        helper.getSelectedopty(component,event,helper);
        component.set("v.optycolumns", [
            {label:"Name", fieldName:"Name", type:"text"},
            {label:"Amount", fieldName:"Amount", type:"decimal"},
            {label:"LeadSource", fieldName:"LeadSource", type:"text"},
            {label:"StageName", fieldName:"StageName", type:"text"}
        ]);
        
    }
})

Helper: 
({
    getListofcontacts : function(component, event, helper) {
        //calling server side method to get contacts
        var action = component.get("c.getcontacts");
        action.setParams({
            
        })
        action.setCallback(this,function(response){
            var state=response.getState();
            console.log('state:::',state);
            if(state === 'SUCCESS'){
                var resultList=response.getReturnValue();
                console.log('resultList:::',resultList);
                var contacts = [];
                resultList.forEach(function(result){
                    console.log('result:::',result);
                    contacts.push({ label:result.Name, value:result.Id});
                });
                console.log('contacts::',contacts);
                component.set("v.listContacts",contacts);
                console.log('listContacts',component.get("v.listContacts"));
            }
        });
        $A.enqueueAction(action);
    },
    getSelectedContacts : function(component,event,helper){
        
        var selectedcontact = event.getParam("value");
        component.set("v.selectedcontacts",selectedcontact);
        console.log('selectedcontacts::',selectedcontact);
        
        var action=component.get("c.getaccounts");
        action.setParams({
            "Ids":component.get("v.selectedcontacts")
        })
        action.setCallback(this,function(response){
            var state= response.getState();
            console.log('state:::'+state);
            if(state === 'SUCCESS'){
                var accountresult = response.getReturnValue();
                console.log('accountresult:::',accountresult);
                component.set("v.Accounts",accountresult);
                console.log('Accounts:::',component.get("v.Accounts"));
            }
        });
        $A.enqueueAction(action);
    },
    getSelectedopty : function(component,event,helper){
        
        var selectedcontact = event.getParam("value");
        component.set("v.selectedcontacts",selectedcontact);
        console.log('selectedcontacts::',selectedcontact);
        
        var action=component.get("c.getopty");
        action.setParams({
            "conId":component.get("v.selectedcontacts")
        })
        action.setCallback(this,function(response){
            var state= response.getState();
            console.log('state:::'+state);
            if(state === 'SUCCESS'){
                var optyresult = response.getReturnValue();
                console.log('optyresult:::',optyresult);
                component.set("v.Opty",optyresult);
                console.log('oppo:::',component.get("v.Opty"));
            }
            
        });
        $A.enqueueAction(action);
    }
})

Please help me out on this.
ShirishaShirisha (Salesforce Developers) 
Hi Lalitha,

Greetings!

It is very difficult for us to debug the code from our end as it is huge.However,You can debug the lightning components using the lightning inspector easily.The below document and video will guide you on the same.

https://www.youtube.com/watch?v=YgL0UNVoqQ8

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/debug_intro.htm

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future.

Warm Regards,
Shirisha Pathuri
Lalitha Pavani Rallabandi 9Lalitha Pavani Rallabandi 9
Hi Shirisha,
I got the output. There is an error in my Apex class which is stoping to display the related Accounts and Opportunities. I am posting my code here so that it can help others in future.... 
Apex Class:

public class ContactDualBox {
   @AuraEnabled
    public static list<contact> listofcon()
    {
        list<contact> conlist=[select id,name from contact ];
        return conlist;
    }
    @AuraEnabled
    public static list<Opportunity> listofopp(list<ID> conidtogetopp)
    {
        //system.debug(conidtogetopp);
        list<Opportunity> idrelatedopp=[select Id,name,Amount,	Description from  Opportunity where contactID in:conidtogetopp];
        // system.debug(idrelatedopp);
        return idrelatedopp;
    }
    @AuraEnabled
    public static list<account> listofacc(list<Id> conidtogetacc)
    { 
       system.debug('Line Number 21:' +conidtogetacc);  
      //  conidtogetacc = new  list<Id>();
        system.debug('Line Number 21:' +conidtogetacc);
        list<account> idrelatedacc = new  list<account>();
        //if(!conidtogetacc.isempty()){
        idrelatedacc=[SELECT ID,Name, Industry 
                      FROM Account 
                      WHERE ID IN (SELECT AccountID 
                                   FROM Contact 
                                   WHERE AccountID !=NULL 
                                   AND ID IN:conidtogetacc) ];
        // }
        
        system.debug(idrelatedacc);
        return idrelatedacc;
    }
}
  
Component: 

<aura:component controller="ContactDualBox"  implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="alloptions" type="List" default="[]"/>
    <aura:attribute name="selectedvalue" type="List" />
    <aura:attribute name="selectedlist" type="List" default="[]"/>
    <aura:attribute name="Opportunity" type="Opportunity[]" />
    <aura:attribute name="oppcolumns" type="List" default="[]"/>
    <aura:attribute name="account" type="account[]" />
    <aura:attribute name="acccolumns" type="List" default="[]"/>
    <aura:handler name="init" value="{! this }" action="{! c.show }"/>
    <lightning:dualListbox  name="contactList"  label="contact list" 
                           sourceLabel="All Contact" 
                           selectedLabel="selected contacts" 
                           options="{! v.alloptions }"
                           value="{! v.selectedvalue }"
                           onchange="{! c.handleChange }" />
    <div class="c-container">
        <lightning:layout >
            <lightning:layoutItem size="6" padding="around-small">
                <lightning:datatable
                                     keyField="id"
                                     data="{! v.account }"
                                     columns="{! v.acccolumns }"
                                     hideCheckboxColumn="true"/>
            </lightning:layoutItem>
            <lightning:layoutItem size="6" padding="around-small">
                <lightning:datatable
                                     keyField="id"
                                     data="{! v.Opportunity }"
                                     columns="{! v.oppcolumns }"
                                     hideCheckboxColumn="true"/>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</aura:component>
  
Controller:

({
   show: function (component, event, helper) {
        var action=component.get("c.listofcon");
        action.setCallback(this,function(response){
             var state=response.getState();
            if(state==='SUCCESS')
            {
                var resultlist=response.getReturnValue();
                var options = [];
                resultlist.forEach(function(result){ 
                    options.push({ value: result.Id, label: result.Name});
                });
                component.set("v.alloptions",options);
            }      
        });
        $A.enqueueAction(action);
    },
    handleChange: function (component, event, helper) {
        var eachSelected=event.getParam('value');
        component.set("v.selectedlist",eachSelected);
        helper.showrelated(component, event, helper);
        helper.showaccounts(component, event, helper);
        
        
    }
})
  
Helper:

({
 showrelated : function (component, event, helper) {
        component.set('v.oppcolumns', [
            {label: 'Opportunity Name', fieldName: 'Name', type: 'text'},
            {label: 'Amount', fieldName: 'Amount', type: 'number'},
            {label: 'Description', fieldName: 'Description', type: 'phone'},
        ]);   
            var action=component.get("c.listofopp");
            action.setParams({conidtogetopp:component.get("v.selectedlist")})
            action.setCallback(this,function(response){
            var state=response.getState();          
            if(state==='SUCCESS')
            {
            var listofoppfromapex=response.getReturnValue();
            console.log(listofoppfromapex);
            component.set("v.Opportunity",listofoppfromapex);
            }            
            });
            $A.enqueueAction(action);
            },
            showaccounts : function (component, event, helper) {
            component.set('v.acccolumns', [
            {label: 'Account Name', fieldName: 'Name', type: 'text'},
            {label: 'Rating', fieldName: 'Rating', type: 'text'},
            {label: 'Industry', fieldName: 'Industry', type: 'text'},
        ]);
        var action=component.get("c.listofacc");
        action.setParams({conidtogetacc:component.get("v.selectedlist")});
        action.setCallback(this,function(response){
            var state=response.getState();
            if(state==='SUCCESS')
            {
                var listofaccountfromapex=response.getReturnValue();
                component.set("v.account",listofaccountfromapex);
            }
        });
        $A.enqueueAction(action);
    }
})
  
Application:

<aura:application extends="force:slds">
    <c:DualListBox_Contacts/>
</aura:application>

 
Lalitha Pavani Rallabandi 9Lalitha Pavani Rallabandi 9
If my code is helpful, please mark it as Best. That will be my 1st best answer..HaHa