You need to sign in to do that
Don't have an account?
Major1507
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.
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; } }