I am using salesforce's dual list box aura component and controller.


<aura:attribute name="displayUserSettings" type="boolean" default="false" />
    <aura:attribute name="displayUserSettingsWarning" type="boolean" default="false" />
    <aura:attribute name="displayRevertMsg" type="boolean" default="false" />
    <aura:handler name="change" value="{!v.options}" action="{!c.valueChanged}"/>

    <aura:attribute name="selectedOptionList" type="List" />

    <aura:handler  name="init" value="{!this}" action="{!c.doinit}"/>

    <aura:attribute name="options" type="List" default="[
                                                        { label: 'English', value: 'en' },
                                                        { label: 'German', value: 'de' },
                                                        { label: 'divish', value: 'es' },
                                                        { label: 'French', value: 'fr' },
                                                        { label: 'Italian', value: 'it' },
                                                        { label: 'Japanese', value: 'ja' }]"/>

     <aura:if isTrue="{!v.displayUserSettings}">
        <!--<div aura:id="UserSettingsModal">-->
            <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.clickX}"
                            alternativeText="close" variant="bare-inverse" class="slds-modal__close" />
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <lightning:dualListbox name="languages" label="User Settings" sourceLabel="List View"
                            selectedLabel="Additional Details" fieldLevelHelp="This is a dual listbox"
                            options="{!v.options}" onchange="{! c.handleChange }" />

                    <footer class="slds-modal__footer">
                        <button class="slds-button slds-button_brand"

                        <button class="slds-button slds-button_brand" onclick="{!c.save }">Save

                        <button class="slds-button slds-button_neutral" onclick="{!c.hideSettings}">Cancel
                    </footer> -->
                    <lightning:unsavedChanges aura:id="unsaved"
                                              ondiscard="{!c.handleDiscard}" />
                      <lightning:button label="{!$Label.c.MTX_Revert_to_Default}" onclick="{!c.doRevert}" />

                    <lightning:button label="Save" onclick="{!c.makeUnsavedChanges}" />
                    <lightning:button label="Cancel" onclick="{!c.clearUnsavedChanges}"/>

            <div class="slds-backdrop slds-backdrop_open"></div>


makeUnsavedChanges: function(component, event, helper) {
         var unsaved = component.find("unsaved");
         unsaved.setUnsavedChanges(true, { label: 'Settings' });
     clearUnsavedChanges: function(component, event, helper) {
         var unsaved = component.find("unsaved");
     handleSave: function(component, event, helper) {
         //... my custom save logic
         // When the custom save logic has completed the setUnsavedChanges method
         // must be called again to return control to the lightning UI
         var unsaved = component.find("unsaved");
         //if (something went wrong) {
           // return control to the lightning UI while indicating that the content is still unsaved, preventing it from being dismissed
          // unsaved.setUnsavedChanges(true);

         //else {
           // return control to the lightning UI while indicating that the content is saved


I incorporated the lightning:unsavedChanges, but I still don't reveive my alert after I try to exit out of my modal. Can lightning:unsavedChanges be used for dual listbox?


One solution (in case anyone runs into this) is to create a boolean attribute <aura:attribute name="listChanged" type="Boolean" default="false" /> And in the .js add

        component.set("v.listChanged", true);

Set the attribute to true or false where needed. For instance in my doCancel method, if my list hasn't changed, I can close the tab

doCancel: function (component, event, helper) {
        if (component.get("v.listChanged") == false) {
        else {
            component.set("v.displayUserSettings", component.get("v.displayUserSettings"));


Consider having a separate previousValues aura attribute that you maintain as the changes happen (i.e. only set previousValues at the end of your handleChange method), so you can reference against them.

Also, try event.getParam("oldValue") to see if it gives you the old values (this works on the change aura:handler but not sure if it works here)

  • Can you help the OP by providing samples of what you are suggesting? Apr 22 '19 at 19:48
  • @SebastianKessel I found this developer.salesforce.com/docs/component-library/bundle/…, So it helps access the old value, I was just trying to identify if there has been a change and IF theres a change I would display a warning if the user tries to close this modal without saving the change.
    – Deja Bond
    Apr 22 '19 at 19:50
  • @DejaBond In Spring 19 they introduced lightning:unsavedChanges - start there and see if you can use it to pop up that warning message Apr 23 '19 at 7:17
  • You can see a full example of lightning:unsavedChanges here Apr 23 '19 at 7:19
  • I am using lightning:unsavedChanges, but I am still not getting the notification, am I incorporating it wrong? @BrianMiller
    – Deja Bond
    Apr 24 '19 at 0:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.