Share and Enjoy !

Recently I was on a project for a client where we were converting their custom SharePoint 2010 app to SharePoint 2013. This application was based on a fairly complicated InfoPath form with lots of supporting event receivers that we were taking to an Angular 2 application, leaving InfoPath behind forever (we hope!).

In an effort to minimize the disruption to the users due to the completely new UI, we decided to keep it as similar as possible to the old InfoPath form, which meant serving it up in a SharePoint modal dialog.

This worked just fine by making a call to SP.UI.ModalDialog.showModalDialog(). Where I got hung up was on how to close the form. Should be simple, right? But since a modal dialog is loaded into an iFrame and has its own container, we lose the reference to the SP object. This meant that I couldn’t just call the SP.UI.commonModalDialogClose function from the form and be done.

No, problem, I thought. A quick google search should turn up the proper command to use in order to close the dialog. No such luck though – apparently my google juju was all used up for the week. I did pick up a few things to try, but none of them got the job done.

On my own, I got as far as knowing I needed to get a reference to the parent container using Window.parent but still couldn’t figure out how to get to the SP functions I needed. After consulting with a co-worker (thanks, Kirk!) we were able to take what I had and finally get a very simple solution working. From within the iFrame we got a reference to the ‘SP’ object by treating it as a property of the parent window, which itself is an object. Duh. Sometimes the simplest things …

The call to close the dialog ended up looking like this:

Window.parent["SP"].UI.ModalDialog.commonModalDialogClose(closeStatus, null)

Here is the full function, which handles closing the form from within a dialog or closing it from a non-modal form, such as opening the page directly in the browser.

closeForm(closeStatus) {

// closeStatus: 1 ==> UI.DialogResult.OK

// closeStatus: 0 ==> UI.DialogResult.cancel

if (window.parent["SP"] !== undefined) {

window.parent["SP"].UI.ModalDialog.commonModalDialogClose(closeStatus, null);

}

else {

//assumes we are not in a dialog

window.location.href = this.requestService.GetHref();

}

}

Doesn’t get much simpler than this. I hope this can help save someone else some of the growing pains I went through on this one.

Share and Enjoy !

Related Content: