+ Start a Discussion
mahesh p 54mahesh 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;        
    }
}



 
Best Answer chosen by mahesh p 54
Sanjay Bhati 95Sanjay Bhati 95
Hi Mahesh,

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
public class selectModalClass{
    @AuraEnabled
    public static List<String>  selectedValues(){
        List<String> selectList = new List<String>();
        selectList.add('en');
        selectList.add('de');
        return selectList;
        
    }
	@AuraEnabled
    public static void setValues(List<String> valueSet){
        system.debug('Value Set'+valueSet);
    }
}

2. modelDual.cmp
<aura:component controller="selectModalClass"  implements="lightning:isUrlAddressable,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInIt}"></aura:handler>
    <aura:attribute name="isOpen" type="boolean" default="false"/>
    <aura:attribute name="selectedOptionList" type="List"></aura:attribute> 
    <aura:attribute name="options" type="List" default="[
        { label: 'English', value: 'en' },
        { label: 'German', value: 'de' },
        { label: 'Spanish', value: 'es' },
        { label: 'French', value: 'fr' },
        { label: 'Italian', value: 'it' },
        { label: 'Japanese', value: 'ja' }]"/>

    
    <lightning:button variant="brand"
                      label="Open Model"
                      onclick="{! c.openModel }" />   
    <aura:if isTrue="{!v.isOpen}">
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <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-text-heading_medium slds-hyphenate">Dual List</h2>
                </header>
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    <p>
                        <lightning:dualListbox name="languages"  
                           label= "Select Languages" 
                           sourceLabel="Available" 
                           selectedLabel="Selected" 
                           fieldLevelHelp="This is a dual listbox" 
                           options="{!v.options}" 
                           value="{!v.selectedOptionList}"
                           onchange="{! c.handleChange }"/>
                    </p>
                </div>
                <footer class="slds-modal__footer">
                    <lightning:button variant="neutral" 
                                      label="Cancel"
                                      title="Cancel"
                                      onclick="{! c.closeModel }"/>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </aura:if>
</aura:component>
3. modelDual.controller
({
    doInIt : function(component, event, helper) {
        var action = component.get("c.selectedValues");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                console.log(response.getReturnValue());
                var selected = new Array();
                selected = response.getReturnValue();
                component.set("v.selectedOptionList",selected);
                console.log(component.get("v.selectedOptionList"));
            }
        });
        $A.enqueueAction(action);
	},
	openModel : function(component, event, helper) {
        component.set("v.isOpen", true);
        //helper.getCookie(component, event, helper,"selectedOptions");
	},
    closeModel : function(component, event, helper) {
        component.set("v.isOpen", false);
	},
    handleChange: function (cmp, event) {
        var selectedOptionValue = event.getParam("value");
        var action = cmp.get("c.setValues");
        console.log(selectedOptionValue);
        action.setParams({ valueSet : selectedOptionValue });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                alert("From server: " + response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    }
})

All Answers

Sanjay Bhati 95Sanjay Bhati 95
Hi Mahesh,

Please look at this Lightning component code.

1. modelDual.cmp
<aura:component  implements="lightning:isUrlAddressable,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="isOpen" type="boolean" default="false"/>
    <aura:attribute name="options" type="List" default="[
        { label: 'English', value: 'en' },
        { label: 'German', value: 'de' },
        { label: 'Spanish', value: 'es' },
        { label: 'French', value: 'fr' },
        { label: 'Italian', value: 'it' },
        { label: 'Japanese', value: 'ja' }]"/>

    
    <lightning:button variant="brand"
                      label="Open Model"
                      onclick="{! c.openModel }" />   
    <aura:if isTrue="{!v.isOpen}">
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <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-text-heading_medium slds-hyphenate">Dual List</h2>
                </header>
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    <p>
                        <lightning:dualListbox name="languages"  
                           label= "Select Languages" 
                           sourceLabel="Available" 
                           selectedLabel="Selected" 
                           fieldLevelHelp="This is a dual listbox" 
                           options="{!v.options}" 
                           onchange="{! c.handleChange }"/>
                    </p>
                </div>
                <footer class="slds-modal__footer">
                    <lightning:button variant="neutral" 
                                      label="Cancel"
                                      title="Cancel"
                                      onclick="{! c.closeModel }"/>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </aura:if>
</aura:component>

2 modelDual.controller
({
	openModel : function(component, event, helper) {
        component.set("v.isOpen", true);
	},
    closeModel : function(component, event, helper) {
        component.set("v.isOpen", false);
	},
    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() + "'");
    }
})

Please give me your feedback after try this solution.
mahesh p 54mahesh p 54
Hi Sanjay,

Could you help me how to keep the values in selected list after moving them from available list even after refreshing.
Sanjay Bhati 95Sanjay Bhati 95
Hi Mahesh,

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
<aura:component  implements="lightning:isUrlAddressable,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="isOpen" type="boolean" default="false"/>
    <aura:attribute name="selectedOptionList" type="List"></aura:attribute> 
    <aura:attribute name="options" type="List" default="[
        { label: 'English', value: 'en' },
        { label: 'German', value: 'de' },
        { label: 'Spanish', value: 'es' },
        { label: 'French', value: 'fr' },
        { label: 'Italian', value: 'it' },
        { label: 'Japanese', value: 'ja' }]"/>

    
    <lightning:button variant="brand"
                      label="Open Model"
                      onclick="{! c.openModel }" />   
    <aura:if isTrue="{!v.isOpen}">
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <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-text-heading_medium slds-hyphenate">Dual List</h2>
                </header>
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    <p>
                        <lightning:dualListbox name="languages"  
                           label= "Select Languages" 
                           sourceLabel="Available" 
                           selectedLabel="Selected" 
                           fieldLevelHelp="This is a dual listbox" 
                           options="{!v.options}" 
                           value="{!v.selectedOptionList}"
                           onchange="{! c.handleChange }"/>
                    </p>
                </div>
                <footer class="slds-modal__footer">
                    <lightning:button variant="neutral" 
                                      label="Cancel"
                                      title="Cancel"
                                      onclick="{! c.closeModel }"/>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </aura:if>
</aura:component>

2. modelDual.controller
({
	openModel : function(component, event, helper) {
        component.set("v.isOpen", true);
        helper.getCookie(component, event, helper,"selectedOptions");
	},
    closeModel : function(component, event, helper) {
        component.set("v.isOpen", false);
	},
    handleChange: function (cmp, event) {
        // This will contain an array of the "value" attribute of the selected options
        var selectedOptionValue = event.getParam("value");
        document.cookie = "selectedOptions="+selectedOptionValue;
    }
})

3.modelDual.helper
({
	getCookie : function(component, event, helper,name) {
        var nameEQ = name + "=";
        //alert(document.cookie);
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1);
            if (c.indexOf(nameEQ) != -1) {
                var res = c.substring(nameEQ.length,c.length);
                var values = new Array();
                for(var i=0;i<res.split(",").length;i++){
                    values.push(res.split(",")[i]);
                }
                component.set("v.selectedOptionList",values);
                console.log(component.get("v.selectedOptionList"));
            }
                
        }
	}
})

Please try this code it will fullfill your requirenment and mark as correct if it works.
 
mahesh p 54mahesh p 54
Hi Sanjay,

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.
 
Sanjay Bhati 95Sanjay Bhati 95
Hi Mahesh,

Another way is to store selected data in database. Menas whenever you select some option then it will store it into database.

 
mahesh p 54mahesh p 54
Hi Sanjay,

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?
Sanjay Bhati 95Sanjay Bhati 95
Hi Mahesh,

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.
({
	openModel : function(component, event, helper) {
        component.set("v.isOpen", true);
        helper.getCookie(component, event, helper,"selectedOptions");
	},
    closeModel : function(component, event, helper) {
        component.set("v.isOpen", false);
	},
    handleChange: function (cmp, event) {
        // This will contain an array of the "value" attribute of the selected options
        var selectedOptionValue = event.getParam("value");
        document.cookie = "selectedOptions="+selectedOptionValue;
    }
})

 
mahesh p 54mahesh p 54
Hi Sanjay,

After Selecting Values can i pass those selected values from Controller to apex class ?
 
Sanjay Bhati 95Sanjay Bhati 95
HI Mahesh,

You can pass selected value to apex class.
 
mahesh p 54mahesh p 54
Hi Sanjay,

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.
({
    doInit: function(component, event, helper) { 
        var action1 = component.get('c.getTypeWiseDocuments');
        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);
            } else {
                console.log('Failed with state: ' + state);
            }
         });
        $A.enqueueAction(action1);
    },
	openMultiSelectModel : function(component, event, helper) {
        component.set("v.isMultiSelectOpen", true);
	},
    closeMultiSelectModel : function(component, event, helper) {
        component.set("v.isMultiSelectOpen", false);
	},
    handleChange: function (component, 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() + "'");
        var values=[];
        for(var i=0;i<selectedOptionValue.length;i++){
            var value = selectedOptionValue[i];
            values.push(value);
            alert(value);
        }
        var selvalues = component.get("v.values");
        alert('>>>>> '+JSON.stringify(selvalues));
    }
})
<aura:component  controller="VerificationFilesController"  implements="lightning:isUrlAddressable,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="isMultiSelectOpen" type="boolean" default="false"/>
    <aura:attribute name="options" type="List" default="[]"/>
     <aura:attribute name="values" type="List" default="[]"/>
    <aura:attribute name="selectedvalues" type="List"/>

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <lightning:button variant="brand"
                      label="Open Model"
                      onclick="{! c.openMultiSelectModel }" />   
    <aura:if isTrue="{!v.isMultiSelectOpen}">
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <header class="slds-modal__header">
                    <lightning:buttonIcon iconName="utility:close"
                                          onclick="{! c.closeMultiSelectModel }"
                                          alternativeText="close"
                                          variant="bare-inverse"
                                          class="slds-modal__close"/>
                    <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Dual List</h2>
                </header>
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    <p>
                        <lightning:dualListbox name="languages"  
                           label= "Select Documents" 
                           sourceLabel="Available" 
                           selectedLabel="Selected" 
                           fieldLevelHelp="This is a dual listbox" 
                           options="{!v.options}"
                           values="{!v.values}"
                           onchange="{! c.handleChange }"/>
                    </p>
                </div>
                <footer class="slds-modal__footer">
                    <lightning:button variant="neutral" 
                                          label="Save"
                                      title="Save"
                                      onclick="{! c.closeMultiSelectModel }"/>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </aura:if>
</aura:component>
Apex class:
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;        
    }
}

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.
 
Sanjay Bhati 95Sanjay Bhati 95
Hi Mahesh,

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
public class selectModalClass{
    @AuraEnabled
    public static List<String>  selectedValues(){
        List<String> selectList = new List<String>();
        selectList.add('en');
        selectList.add('de');
        return selectList;
        
    }
	@AuraEnabled
    public static void setValues(List<String> valueSet){
        system.debug('Value Set'+valueSet);
    }
}

2. modelDual.cmp
<aura:component controller="selectModalClass"  implements="lightning:isUrlAddressable,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInIt}"></aura:handler>
    <aura:attribute name="isOpen" type="boolean" default="false"/>
    <aura:attribute name="selectedOptionList" type="List"></aura:attribute> 
    <aura:attribute name="options" type="List" default="[
        { label: 'English', value: 'en' },
        { label: 'German', value: 'de' },
        { label: 'Spanish', value: 'es' },
        { label: 'French', value: 'fr' },
        { label: 'Italian', value: 'it' },
        { label: 'Japanese', value: 'ja' }]"/>

    
    <lightning:button variant="brand"
                      label="Open Model"
                      onclick="{! c.openModel }" />   
    <aura:if isTrue="{!v.isOpen}">
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <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-text-heading_medium slds-hyphenate">Dual List</h2>
                </header>
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    <p>
                        <lightning:dualListbox name="languages"  
                           label= "Select Languages" 
                           sourceLabel="Available" 
                           selectedLabel="Selected" 
                           fieldLevelHelp="This is a dual listbox" 
                           options="{!v.options}" 
                           value="{!v.selectedOptionList}"
                           onchange="{! c.handleChange }"/>
                    </p>
                </div>
                <footer class="slds-modal__footer">
                    <lightning:button variant="neutral" 
                                      label="Cancel"
                                      title="Cancel"
                                      onclick="{! c.closeModel }"/>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </aura:if>
</aura:component>
3. modelDual.controller
({
    doInIt : function(component, event, helper) {
        var action = component.get("c.selectedValues");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                console.log(response.getReturnValue());
                var selected = new Array();
                selected = response.getReturnValue();
                component.set("v.selectedOptionList",selected);
                console.log(component.get("v.selectedOptionList"));
            }
        });
        $A.enqueueAction(action);
	},
	openModel : function(component, event, helper) {
        component.set("v.isOpen", true);
        //helper.getCookie(component, event, helper,"selectedOptions");
	},
    closeModel : function(component, event, helper) {
        component.set("v.isOpen", false);
	},
    handleChange: function (cmp, event) {
        var selectedOptionValue = event.getParam("value");
        var action = cmp.get("c.setValues");
        console.log(selectedOptionValue);
        action.setParams({ valueSet : selectedOptionValue });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                alert("From server: " + response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    }
})
This was selected as the best answer