function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Major1507Major1507 

passing selected values from a dual list box from one component to another component

I am able to capture the selected values in the dual list box and able to show it in console but how do I show the selected value in my data table that is present in another component.
Below is the code.
<!-- MultiPicklist.cmp-->

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" controller="SampleAuraController">
	<!--Declare Event Handlers-->
    <aura:handler name="init" action="{!c.doInit}" value="{!this}" description="Call doInit function on component load to get picklist values"/>
     
    <!--Declare Attributes-->
    <aura:attribute name="GenreList" type="List" default="[]" description="Genre Picklist Values"/>
    <aura:attribute name="selectedGenreList" type="List" default="[]" description="Selected Genre Picklist Values"/>
    
    <aura:attribute name="GenreList1" type="List" default="[]" description="Genre Picklist Values"/>
    <aura:attribute name="selectedGenreList1" type="List" default="[]" description="Selected Genre Picklist Values"/>
    
     <aura:attribute name="isOpen" type="boolean" default="true"/>
    
    <aura:registerEvent name = "loadMyEvent" type = "c:Result"/>
    
    <aura:if isTrue="{!v.isOpen}">
    <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_small" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1">
  <div class="slds-modal__container">
    <header class="slds-modal__header">
        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{!c.closeModel }"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>
      <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Estimate Opportunity</h2>
    </header>
    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
         <div class="slds-section slds-is-open" aura:id="Section">
        <!--section header-->
        <h3 class="slds-section__title">
            <button aria-controls="List" class="slds-button slds-section__title-action">
                <span onclick="{!c.toggleSection}" data-auraId="Section">
                    <lightning:icon iconName="utility:switch"
                                    size="x-small"
                                    class="slds-section__title-action-icon slds-button__icon_left"
                                    alternativeText="button icon" 
                                    />
                </span>
                <span class="slds-truncate" title="Industry">Industry</span>
            </button>
        </h3>
        <!--section body-->
        <div class="slds-section__content" id="List">
     <lightning:dualListbox aura:id="selectGenre"
                               name="Genre"
                               sourceLabel="Available"
                               selectedLabel="Chosen"
                               options="{!v.GenreList}"
                               value="{!v.selectedGenreList}"
                               onchange="{!c.handleGenreChange}"/>
    </div>
        </div>
         
        
        
        
        
        
        <div class="slds-section slds-is-open" aura:id="Section1">
        <!--section header-->
        <h3 class="slds-section__title">
            <button aria-controls="List" class="slds-button slds-section__title-action">
                <span onclick="{!c.toggleSection1}" data-auraId="Section1">
                    <lightning:icon iconName="utility:switch"
                                    size="x-small"
                                    class="slds-section__title-action-icon slds-button__icon_left"
                                    alternativeText="button icon" 
                                    />
                </span>
                <span class="slds-truncate" title="Account Source">Account Source</span>
            </button>
        </h3>
        <!--section body-->
        <div class="slds-section__content" id="List">
     <lightning:dualListbox aura:id="selectGenre1"
                               name="Genre1"
                               sourceLabel="Available"
                               selectedLabel="Chosen"
                               options="{!v.GenreList1}"
                               value="{!v.selectedGenreList1}"
                               onchange="{!c.handleGenreChange1}"/>
    </div>
        </div>
        
      </div>
    <footer class="slds-modal__footer">
      <button class="slds-button slds-button_neutral" onclick="{!c.closeModel}">Cancel</button>
      <button class="slds-button slds-button_brand" onclick="{!c.Estimating}">Estimate</button>
    </footer>
  </div>
</section>
    </aura:if>
</aura:component>



<!-- Multipicklistcontroller.js-->
({
    doInit: function(component, event, helper) {
        var action = component.get("c.getPiklistValues");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS"){
                var result = response.getReturnValue();
                var plValues = [];
                for (var i = 0; i < result.length; i++) {
                    plValues.push({
                        label: result[i],
                        value: result[i]
                    });
                }
                component.set("v.GenreList", plValues);
            }
        });
        $A.enqueueAction(action);
        
        var action1 = component.get("c.getPiklistValues1");
        action1.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS"){
                var result = response.getReturnValue();
                var plValues1 = [];
                for (var i = 0; i < result.length; i++) {
                    plValues1.push({
                        label: result[i],
                        value: result[i]
                    });
                }
                component.set("v.GenreList1", plValues1);
            }
        });
        $A.enqueueAction(action1);
    },
    
    closeModel: function(component, event, helper) {
      // for Hide/Close Model,set the "isOpen" attribute to "Fasle"  
      component.set("v.isOpen", false);
   },
    
    handleGenreChange: function (component, event, helper) {
        //Get the Selected values   
        var selectedValues = event.getParam("value");
         
        //Update the Selected Values  
        component.set("v.selectedGenreList", selectedValues);
    },
    
    handleGenreChange1: function (component, event, helper) {
        //Get the Selected values   
        var selectedValues = event.getParam("value");
         
        //Update the Selected Values  
        component.set("v.selectedGenreList1", selectedValues);
    },
     
    getSelectedGenre : function(component, event, helper){
        //Get selected Genre List on button click 
        var selectedValues = component.get("v.selectedGenreList");
        console.log('Selectd Genre-' + selectedValues);
    },
    
    Estimating : function(component, event, helper){
        var navigateEvent = $A.get("e.force:navigateToComponent");
        var selectedValues = component.get("v.selectedGenreList");
        console.log('Selectd Genre-' + selectedValues);
        console.log("Navigate1"+navigateEvent);
        navigateEvent.setParams({
            componentDef: "c:Estimate",
            componentAttributes: {  
            }
            //You can pass attribute value from Component1 to Component2
            //componentAttributes :{ }
        });
        navigateEvent.fire();
    },
    
    toggleSection : function(component, event, helper) {
        // dynamically get aura:id name from 'data-auraId' attribute
        var sectionAuraId = event.target.getAttribute("data-auraId");
        // get section Div element using aura:id
        var sectionDiv = component.find(sectionAuraId).getElement();
        /* The search() method searches for 'slds-is-open' class, and returns the position of the match.
         * This method returns -1 if no match is found.
        */
        var sectionState = sectionDiv.getAttribute('class').search('slds-is-open'); 
        
        // -1 if 'slds-is-open' class is missing...then set 'slds-is-open' class else set slds-is-close class to element
        if(sectionState == -1){
            sectionDiv.setAttribute('class' , 'slds-section slds-is-open');
        }else{
            sectionDiv.setAttribute('class' , 'slds-section slds-is-close');
        }
    },
    
    toggleSection1 : function(component, event, helper) {
        // dynamically get aura:id name from 'data-auraId' attribute
        var sectionAuraId = event.target.getAttribute("data-auraId");
        // get section Div element using aura:id
        var sectionDiv = component.find(sectionAuraId).getElement();
        /* The search() method searches for 'slds-is-open' class, and returns the position of the match.
         * This method returns -1 if no match is found.
        */
        var sectionState = sectionDiv.getAttribute('class').search('slds-is-open'); 
        
        // -1 if 'slds-is-open' class is missing...then set 'slds-is-open' class else set slds-is-close class to element
        if(sectionState == -1){
            sectionDiv.setAttribute('class' , 'slds-section slds-is-open');
        }else{
            sectionDiv.setAttribute('class' , 'slds-section slds-is-close');
        }
    },
})


<!-- Estimate.cmp -->
<aura:component controller="tableWithManageCtrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
     <aura:handler name="init" value="this" action="{!c.doInit}"/>
     <aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/>
     <aura:attribute name="options"
                      type="List"
                      default="[
                               {'label': 'Type', 'value': 'Type'},
                               {'label': 'Industry', 'value': 'Industry'},
                               {'label': 'Account Source', 'value': 'AccountSource'}
                               ]"/>
    
    <aura:attribute name="selectedValues" type="List" default="Name"/>
    <aura:attribute name="isOpen" type="boolean" default="false"/>
        
  <!--Use aura:if tag to display Model Box, on the bese of conditions. [isOpen boolean attribute] -->   
    <aura:if isTrue="{!v.isOpen}">
   <!--###### MODAL BOX Start From Here ######--> 
      <div role="dialog" tabindex="-1" aria-labelledby="header99" class="slds-modal slds-fade-in-open ">
        <div class="slds-modal__container">
          <!-- ###### MODAL BOX HEADER Part Start From Here ######-->
          <div class="slds-modal__header">
            <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.closeModel}">
              X
            <span class="slds-assistive-text">Close</span>
            </button>
            <h2 id="header99" class="slds-text-heading--medium">Manage Table Columns</h2>
          </div>
          <!--###### MODAL BOX BODY Part Start From Here ######-->
          <div class="slds-modal__content slds-p-around--medium">
              <div class="slds-p-around_medium">
                  <lightning:checkboxGroup aura:id="mygroup"
                                           name="checkboxGroup"
                                           label="Manage Cloumn"
                                           options="{! v.options }"
                                           value="{! v.selectedValues }"
                                           />
              </div>  
            </div>
          <!--###### MODAL BOX FOOTER Part Start From Here ######-->
          <div class="slds-modal__footer">
             <button class="slds-button slds-button--neutral" onclick="{!c.closeModel}" >Done</button>
          </div>
        </div>
      </div>
      <div class="slds-backdrop slds-backdrop--open"></div>
      <!--###### MODAL BOX Part END Here ######-->
 </aura:if>
    
    <div class="slds-m-around--large">  
        <!--###### lightning button icon for show/hide columns popup ######-->	
        <div class="slds-clearfix">
            <div class="slds-float_right">
               <lightning:buttonIcon size="large" onclick="{!c.openModel}" iconName="utility:matrix" variant="bare" title="manage table columns" alternativeText="Settings" iconClass="dark"/>
            </div>
        </div>
     
        <br/><br/> 
	  <!--###### lightning data table start ######-->		
      <table class="slds-table slds-table_bordered slds-table_cell-buffer">
         <thead>
            <tr class="slds-text-title_caps">
                <!--<th scope="col">
                    <div class="slds-truncate" title="Account Name">Account Name</div>
                </th>  -->              
				<!--###### the value of element attribute in child component must be same as checkboxGroup value  ######-->		 
                <c:MainComp list="{!v.selectedValues}"  element="Type"> 
                    <th scope="col"><div class="slds-truncate" title="Type">Type</div></th>
                </c:MainComp>
                <c:MainComp list="{!v.selectedValues}"  element="Industry">
                    <th scope="col"><div class="slds-truncate" title="Industry">Industry</div></th>
                </c:MainComp>
                <c:MainComp list="{!v.selectedValues}"  element="AccountSource">
                    <th scope="col"><div class="slds-truncate" title="AccountSource">Account Source</div></th>
                </c:MainComp>
            </tr>
         </thead>
         <tbody>
        
            <!--### display all records of searchResult attribute by aura:iteration ###-->
            <aura:iteration items="{!v.searchResult}" var="acc">
               <tr>
                
                 <!--<td><div class="slds-truncate">{!acc.Name}</div></td>-->
                 <c:MainComp list="{!v.selectedValues}"  element="Type">  
                   <td><div class="slds-truncate">{!acc.Type}</div></td>
                 </c:MainComp>
                 <c:MainComp list="{!v.selectedValues}"  element="Industry"> 
                   <td><div class="slds-truncate">{!acc.Industry}</div></td>
                 </c:MainComp>
                 <c:MainComp list="{!v.selectedValues}"  element="AccountSource"> 
                   <td><div class="slds-truncate">{!acc.AccountSource}</div></td>
                 </c:MainComp>
               </tr>
            </aura:iteration>
         </tbody>
      </table>
   </div>
 
</aura:component>

<!-- EstimateController.js-->

({
    doInit: function(component, event, helper) {
        var action = component.get("c.fetchAccount");
        action.setCallback(this, function(response) {
            var state = response.getState(); 
            if (state === "SUCCESS") {
                var storeResponse = response.getReturnValue();
                // set searchResult list with return value from server.
                component.set("v.searchResult", storeResponse);
            }
            
        });
        $A.enqueueAction(action);
    },
    openModel: function(component, event, helper) {
        // for Display Model,set the "isOpen" attribute to "true"
        component.set("v.isOpen", true);
    },
    
    closeModel: function(component, event, helper) {
        // for Hide/Close Model,set the "isOpen" attribute to "Fasle"  
        component.set("v.isOpen", false);
    },
})


/* SampleAuraController*/
public class SampleAuraController {
     
    @AuraEnabled
    public static List <String> getPiklistValues() {
        List<String> plValues = new List<String>();
         
        //Get the object type from object name
        Schema.SObjectType objType = Schema.getGlobalDescribe().get('Account');
         
        //Describe the sObject using its object type.
        Schema.DescribeSObjectResult objDescribe = objType.getDescribe();
         
        //Get the specific field information from field name
        Schema.DescribeFieldResult objFieldInfo = objDescribe.fields.getMap().get('Industry').getDescribe();
         
        //Get the picklist field values.
        List<Schema.PicklistEntry> picklistvalues = objFieldInfo.getPicklistValues();
        //Add the picklist values to list.
        for(Schema.PicklistEntry plv: picklistvalues) {
            plValues.add(plv.getValue());
            
        }
        plValues.sort();
        return plValues;
    }
    
    @AuraEnabled
    public static List <String> getPiklistValues1() {
        List<String> plValues1 = new List<String>();
         
        //Get the object type from object name
        Schema.SObjectType objType = Schema.getGlobalDescribe().get('Account');
         
        //Describe the sObject using its object type.
        Schema.DescribeSObjectResult objDescribe = objType.getDescribe();
         
        //Get the specific field information from field name
        Schema.DescribeFieldResult objFieldInfo = objDescribe.fields.getMap().get('AccountSource').getDescribe();
         
        //Get the picklist field values.
        List<Schema.PicklistEntry> picklistvalues = objFieldInfo.getPicklistValues();
        //Add the picklist values to list.
        for(Schema.PicklistEntry plv: picklistvalues) {
            plValues1.add(plv.getValue());
            
        }
        plValues1.sort();
        return plValues1;
    }

}

/*tableWithManageCtrl*/

public class tableWithManageCtrl {
    @AuraEnabled
    public static List < account > fetchAccount() {
        
        List < Account > returnList = new List < Account > ();
        
        for (Account acc: [select id, Name, Type, Industry, Phone, Fax, AccountSource from account LIMIT 10]) {
            returnList.add(acc);
        }
        return returnList;
    }
}