You need to sign in to do that
Don't have an account?
mahesh p 54
how to show lightning:dualListbox in modal box after clicking on a button
<aura:component controller="VerificationFilesController" Implements="flexipage:availableForRecordHome,force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickAction" access="global" > <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> <aura:handler event="force:refreshView" action="{!c.doInit}" /> <aura:attribute name="recordError" type="String" access="private"/> <aura:attribute name="isMultiSelectOpen" type="boolean" /> <aura:attribute name="options" type="List" default="[]"/> <aura:attribute name="values" type="List" default="[]"/> <lightning:button variant="brand" label="Request for Additional Documents" title="Request for Additional Documents" onclick="{!c.openMultiSelectModel}"/> <aura:if isTrue="{!v.isMultiSelectOpen}"> <!--###### 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.closeReviewer}"> X <span class="slds-assistive-text">Close</span> </button> <h2 id="header99" class="slds-text-heading--medium">Review Document</h2> </div> <!--###### MODAL BOX BODY Part Start From Here ######--> <div class="slds-modal__content slds-p-around--medium slds-is-relative slds-scrollable"> <aura:if isTrue="{!v.showSpinner}"> <div class="demo-only" style="height:6rem;"> <div role="status" class="slds-spinner slds-spinner_medium slds-spinner_brand"> <span class="slds-assistive-text">Loading</span> <div class="slds-spinner__dot-a"></div> <div class="slds-spinner__dot-b"></div> </div> </div> <aura:set attribute="else"> <div class="slds-form-element slds-p-around--medium"> <lightning:dualListbox aura:id="selectOptions" name="multipleOptions" label= "Select Options" sourceLabel="Available Options" selectedLabel="Selected Options" options="{!v.options}" value="{!v.values}" onchange="{!c.handleChange}"/> </div> </aura:set> </aura:if> </div> <button class="slds-button slds-button--neutral" onclick="{!c.closeReviewer}" >Cancel</button> </div> </div> </div> <div class="slds-backdrop slds-backdrop--open"></div> <!--###### MODAL BOX Part END Here ######--> </aura:if>
({ doInit: function(component, event, helper) { var action1 = component.get('c.getTypeWiseDocuments'); //var typewisedocument = component.find("selectOptions"); action1.setCallback(this, function(response1) { var state = response1.getState(); if (component.isValid() && state == 'SUCCESS') { var documents = response1.getReturnValue(); var options = []; documents.forEach(function(document) { console.log(document); options.push({ value: document.Document_Name__c, label: document.Document_Name__c}); }); component.set("v.options", options); component.get("v.values"); alert(JSON.stringify(component.get("v.options"))); } else { console.log('Failed with state: ' + state); } }); $A.enqueueAction(action1); }, handleChange: function (cmp, event) { // This will contain an array of the "value" attribute of the selected options var selectedOptionValue =event.getParam("value"); alert("Option selected with value: '" + selectedOptionValue.toString() + "'"); }, openMultiSelectModel: function(component, event, helper) { // for Hide/Close Model,set the "isOpen" attribute to "Fasle" component.set("v.isMultiSelectOpen", true); alert(component.get("v.isMultiSelectOpen")); }, closeMultiSelectModel : function(component, event, helper) { component.set("v.isMultiSelectOpen", false); } })
public class VerificationFilesController { @AuraEnabled public static List<TypeWiseDocument__c> getTypeWiseDocuments(){ system.debug('getTypeWiseDocuments Controller'); List<TypeWiseDocument__c> twList = [SELECT ID,Document_Name__c FROM TypeWiseDocument__c where DocumentType__c = 'Additional']; return twList; } }
Here is your requirement code that will display pre selected option on load of component and when you select any option from multipicklist on model then it will send the selected data on apex server controller.
Please understand below code it will fullfill your requirement.
1. selectModalClass.apxc
2. modelDual.cmp 3. modelDual.controller
All Answers
Please look at this Lightning component code.
1. modelDual.cmp
2 modelDual.controller
Please give me your feedback after try this solution.
Could you help me how to keep the values in selected list after moving them from available list even after refreshing.
Here is your answer.
We stored the selected data in cookies and get when we load the component and set it in dual list .
1. modelDual.cmp
2. modelDual.controller
3.modelDual.helper
Please try this code it will fullfill your requirenment and mark as correct if it works.
Could You please let me know if there are any other chances to display selected values in modal popup of dual list box without cookies.
Another way is to store selected data in database. Menas whenever you select some option then it will store it into database.
On click of a button i am opening a modal popup which has lightning:duallist box and i wanted to show selected values even after closing and again opening the modal popup is that possible?
It is possible if you open model and select some data and close it. When you open model again without refresh the page it will show you selected data. you just need to update the controller code with below logic and don't use helper logic that is set using data from cookies.
After Selecting Values can i pass those selected values from Controller to apex class ?
You can pass selected value to apex class.
My Requirement :
When i click on a button i am opening a modal popup which consists of lightning dual list box in which i am showing the available values from the query in apex class.Now when i select few values from available list to selected list and click save in modal popup footer i need to send those selected values to my apex class and again when i open modal popup i need to show selected values in selected list rather than in available list.
Please let me know if it is possible without cookies and could you provide code for sending values from controller to apex class in my above code.
Here is your requirement code that will display pre selected option on load of component and when you select any option from multipicklist on model then it will send the selected data on apex server controller.
Please understand below code it will fullfill your requirement.
1. selectModalClass.apxc
2. modelDual.cmp 3. modelDual.controller
This forum post was very informative and useful. You people are doing a great job here by solving the problems. https://upgradecard.one/upgradecard-com-reservation-number/