Documentation › JavaScript framework of SharePoint Forms › Managing dialog with JS

Managing dialogs in SharePoint form with JavaScript in SharePoint Forms

Dialog can be used to open other forms in dialog from a parent form. Can open multiple dialogs at the same time, but only the last one will be active. Can also open forms in dialog from other forms opened in dialog.


Dialog.open()

Method that opens a dialog.

// opens a form in a dialog
Dialog.open(url, arguments, callback(bool, args), options);

// opens a custom html content
Dialog.open({template: '<h1>Hello!</h1>'}, arguments, callback(bool, args), options);

The method has the following parameters:

  • url – the url of the form to open in the dialog window. Learn how to build form URLs here.

  • template – an object that holds a custom HTML template.

  • arguments – an object that passes arguments to the dialog window.

  • callback(bool, args) – a function that is called when the dialog is closed.

    The function has two parameters:

    • bool – returns true if the form in the dialog was saved.

    • args – an object that can be used to pass arguments from the closing form (need to use Dialog.close(bool, args) method).

  • options – an object that specifies dialog window options: width, height, window title.

Open a form in a dialog:

const listId = 'fc0bff2b-b78c-4aad-956d-b58af48b45fd';

Dialog.open('https://contoso.sharepoint.com/sites/mysite/_layouts/15/listform.aspx?PageType=8&ListId=' + listId, {
    passedStatus: 'New'
}, result => {
    if (result) {
        alert('Form in dialog was saved and closed.');
    } else {
        alert('Dialog form was closed without saving!');
    }
}, {
    width: 600,
    height: 600,
    title: 'New Task'
});

Open a dialog with the custom HTML content:

Dialog.open({
    template: `<div>Do you confirm the change of status?<div>
                    <div class="d-flex mt-4 gap-3">
                        <button type="button" class="btn btn-primary flex-fill" id="okButton">OK</button>
                        <button type="button" class="btn btn-outline-primary flex-fill" id="cancelButton">Cancel</button>
                    </div>`
}, null, null, {
    width: 500,
    height: 200,
    title: 'Confirm',
    open: e => {
        const dialogBody = e.sender.element;
        const okButton = dialogBody.find('#okButton');
        okButton.click(() => {
            // code to process OK result
            fd.field('Status').value = 'Approved';
            Dialog.close();
        });
        const cancelButton = dialogBody.find('#cancelButton');
        cancelButton.click(() => {
            // code to process CANCEL result
            Dialog.close();
        });
    }
});

Dialog.getArgs()

The method returns arguments passed to the dialog.

Can be called from both parent and child form, but generally more useful on child form. On parent form, returns arguments passed to the last opened dialog form. On child form, returns arguments passed to this dialog form.

// code for Parent Form to pass Status
const listId = 'fc0bff2b-b78c-4aad-956d-b58af48b45fd';

Dialog.open('https://contoso.sharepoint.com/sites/mysite/_layouts/15/listform.aspx?PageType=8&ListId=' + listId, {
    passedStatus: 'New'
});

// code for Child Form to retrieve Status
fd.spRendered(() => {
    // if opened in dialog
    if (Dialog.getHost() !== window) {
        const args = Dialog.getArgs();
        // set Status to passedStatus property
        fd.field('Status').value = args?.passedStatus;
    }
});

Dialog.close()

Method that closes the dialog window.

Dialog.close(bool, args);

The method has the following parameters:

  • bool – returns true if the form in dialog was saved.

  • args – an object that can be used to pass arguments from the closing form.

The method can be called from both parent and child form. On parent form, closes the last active dialog form. On child form, closes this specific dialog form.

// code for Parent Form to show created Item ID in alert
Dialog.open('https://contoso.sharepoint.com/sites/mysite/_layouts/15/listform.aspx?PageType=8&ListId=' + listId, {
    passedStatus: 'New'
}, (result, args) => {
    if (result) {
        alert('Form in dialog has been saved. New Item ID: ' + args?.ID);
    } else {
        alert('Dialog form was closed without saving!');
    }
});

// code for Child Form to pass ID after save
fd.spSaved(result => {
    // if opened in dialog
    if (Dialog.getHost() !== window) {
        // pass created item ID as an argument
        Dialog.close(true, { ID: result.Id });
    }
});