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 form in the dialog.

Dialog.open(url, 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.

  • arguments – an object that passes arguments to the form opened in 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.

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

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

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
var 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(function() {
    //if opened in dialog
    if (window.frameElement && Dialog.getArgs()){
        //set Status to passedStatus property
        fd.field('Status').value = Dialog.getArgs().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' },
function(hasSaved) {
    if(hasSaved){
        alert('Form in dialog has been saved. New Item ID: ' + returnedArgs.ID);
    }
    else{
        alert('Dialog form was closed without saving!');
    }
});

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