Open Pages and Forms in Modal Dialog For SharePoint 2013

Some times you need to open an internal or external pages inside an OOB modal dialog of SharePoint, such as New Task Form, Upload File Form. Or maybe you want to open external pages and sites.

I create a template functions to open pages in dialog, upload it to a central place, and use it any where I need it in my site collection.

In this post, I write how the JavaScript work and how to use it.

JavaScript File Overview

I have a JS file (SP15ModalDialog.js) that contains the modal dialog functions as following code:

1. OpenInDialog function:
   This function will be called in you links (onClick) or buttons (onClientClick). And it takes the following parameters:
   • dlgWidth: Dialog width (ex: 600)
   • dlgHeight: Dialog height (ex: 800)
   • dlgAllowMaximize: Show maximize button in Dialog (true or false)
   • dlgShowClose: Show close button in Dialog (true or false)
   • needCallbackFunction: determine if you want to register call back function or not for Dialog (true or false)
   • pageUrl: the URL of target page or site
2. CloseDialogCallback function:
   This function contains the logic of work to be done after you close, save, or cancel the dialog box, the main idea here is if you open a form in dialog and save data, you need to refresh the parent page to see changes that done. it contains 3 conditions
   • If user click on OK or SAVE button – if(dialogResult == SP.UI.DialogResult.OK):
     It will refresh the parent page (if needCallbackFunction is true)
   • If user click on CANCEL or CLOSE button – else if(dialogResult == SP.UI.DialogResult.cancel)
     Do nothing or add your custom code
   • If dialogResult return other value – else : Do nothing or add your custom code