Using Dialog.close() when multiple Dialogs open

Forms
1

Use Case: We are using the Dialog.open functionality is lieu of basic JavaScript “alert”, “confirm” and “prompt”. Doing this allows us to have more control over error and prompt handling. Here are some examples:

image
image764×449 19.2 KB

image
image760×510 21.6 KB

The issue: When we open this “Chippy” Dialog in a normal form and the user clicks a button, we can use “Dialog.close();” to close the “Chippy” Dialog, execute the appropriate action. All is just fine.
When this “Chippy” Dialog is called from a Dialog, we have a Dialog within a Dialog and the “Dialog.close();” when called by the click, hangs, I guess not knowing what Dialog to close.

As a point of interest, Chippy represents our SharePoint embedded AI chatbot that we are extending into our error handling so that the users know no better and think that ‘Chippy” is the all-seeing eye. They actually love it.

2

Hello @vhancock ,
If I understand, try to pass some arguments to the dialog, but I am not exactly sure how the code looks like.
Could you please insert a piece of code that represents the dialog and inner dialog and how you close it?
Thank you

Stepan

3

Hey @vhancock,

Chippy is adorable! It's a shame more companies don't get cute AIs like it.

Could you go into more detail about the issue? Are you running the Dialog.close() function from the parent dialog or the child dialog?
Maybe you could share a screenshot of your browser's console? (Press F12 to open it)

4

Here is the code with some comments I put in to help clarify.

image
image1280×837 161 KB

// ================ CALL THE FIRST DIALOG TO OPEN A QADI

// CREATE THE BUTTONS FOR THE QADI (Questions, Actions, Issues, Decisions)

// Button one: Add a new QADI	
const addQADI = {
    icon: 'SunQuestionMark', 
    class: 'btn-outline-primary', 
    text: 'Add QADI',
    visible: true,
    click: function() {
            const url = fd.webUrl + '/Lists/QADI/NewForm.aspx';
            // BELOW IS A SAMPLE OF HOW WE SHOUILD FORMAT UP THE DIALOG OPEN CONTROL
            Dialog.open(url,{ RequirementId: fd.field('RequirementID').value, 
                          ProcessStepId: fd.field('ProcessStepID').value, 
                          RICEId: fd.field('RICEID').value, 
                          AssignedTo: fd.field("AssignedTo").value,  
                          Module: fd.field("Module").value, 
                          Project: fd.field("Project").value, 
                          Pillar: fd.field("Pillar").value
                        }, 
                        function(){} ,
                        { width: 1200, height: 800,
                          title: 'You are adding a Qestion, Action, Decision or Issue'
                        } 
                    ); 
        }
};

// Button Two: Edit the selected QADI
const editQADI = {
    icon: 'SunQuestionMark', 
    class: 'btn-outline-primary', 
    text: 'Edit QADI',
    visible: true,
    click: function() {
        const items = fd.control('ListQADI').selectedItems;
        const url = fd.webUrl + "/Lists/QADI/EditForm.aspx?ID=" + items[0].ID;
        Dialog.open(url,{}, function(){} ,{ width: 1200, height: 800, title: ''} ); 
    }
};

// REPLACE THE KENDO BUTTONS WITH OUR BUTTONS

fd.control('ListQADI').ready(function(dt) {
     dt.buttons[0].style = "display: none;";
     dt.buttons[1].style = "display: none;";
     dt.buttons[2].style = "display: none;";
     dt.buttons.push(addQADI);
     dt.buttons.push(editQADI);
});

// =============== WE ARE NOW IN THE EDIT QADI DIALOG which is calling the warning Dialog inside the QADI Dialog

function checkStartActualDate () {
if (fd.field('StartActual').value > new Date()) {

    Dialog.open({
        template: `<div class="Container">
                        <div class="image">
                            <img src="https://XXX.sharepoint.com/sites/PMO/Images1/chippy.png" alt="Chippy" style="width:50px;height:50px;>
                        </div>
                        <div class="text">
                            <br><br><div>Hey there, Chippy here. Looks like you set the Actual Start Date to some date in the distant future.<div><br> 
                            <div>Unless you're a time traveller, that is impossible.<div><br>
                            <div>I'm resetting the Actual Start Date to today.<div><br>
                        </div>
                    </div>    
                    <div class="d-flex mt-4 gap-3">
                        <button type="button" class="btn btn-outline-primary flex-fill" id="okButton">Thanks Chippy, my mistake</button>
                    </div>`
                
    }, null, null, {
        width: 600,
        height: 350,
        title: 'Chippy has something to say',
        open: (e) => {
            var dialogBody = e.sender.element;
            var okButton = dialogBody.find('#okButton');
            okButton.click(() => {
                fd.field('StartActual').value = new Date();
                // THIS IS THE CLOSE DIALOG OF THE SECONG DIALOG - THE PAGE FREEZES WHEN CLICKED
	    Dialog.close();
            });
        }    
    });
}

}

5

Much obliged.

Seems like it will take a little while to analyze the code. I'll get back to you tomorrow, does that work?
In the meantime, could you share a screenshot of the browser console after the page freezes? If there are any errors, that's a good sign.

6

Tomorrow's just fine. Here is an F12 output where I expanded some nodes (total guess on what to expand):

image
image910×1183 76.3 KB

7

Hey @vhancock,

If you're using Dialog.close in the "Ok" button, it's recognized as a reference to the parent dialog. The parent dialog closes while the child dialog hangs, and this causes the page to freeze.

You need to open the dialog like this:

const innerDialog = Dialog.open({ /*The code goes here*/})

So that in the "Ok" button you can close it like this:

innerDialog.close();
8

image

2 Likes
9

You're always welcome, Chippy!