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

How to use it

1. Upload JavaScript to style library
   • From Setting Icon, select Site Contents
     
   • From Site Content, Click on Style Library
     
   • From Ribbon, in Files Group, Click on Upload Document
     
   • Brows and select the JavaScript file, and click OK
     
   • Make sure to Check-In and Publish a major version for the file
2. You can use SharePoint Designer 2013 to Upload files to Style Library (Copy and Paste or using Import Files button)
   
3. Register JavaScript to your page (Team Site Page), you can register this file to master page or page layout if you are using publishing site template. In this sample I create a site page in team site template, and use my function inside the page directly.
   
4. Use OpenInDialog function in your links or buttons

Open External sites in dialog box

In this case, I only need to open external site (ex: http://www.SharePoint.com), so I don’t need CallBack handler logic, and I need to enable maximize and close button, So the anchor link will looks like this:

<a href="#" onclick="openInDialog(500,600,true,true
,false,'http://www.SharePoint.com');">MS SharePoint Site</a><br/>

and the result will be like this

Open Internal Page/Form in dialog box

In this scenario, I will open add new task form, and when click on save button, I need to refresh the parent page to see changes in parent list

1. Add a link in your page to open New Task Form in dialog

<a href="#" onclick="openInDialog(500,600,true,true,
true,'/sites/en/Lists/Tasks/NewForm.aspx?RootFolder=&IsDlg=1');">New Task</a>

• To get the link of any form, go to list and click on add new item (make sure you enable forms to be open in dialog from List Advanced Settings), then Right-Click on form and copy the URL
• Also, check if the (IsDlg=1) parameter is exists in the URL. If not, never forget to add it, this is to hide all DIVs or section not allowed to be shown in dialog (DIVs that use style class s4-notdlg and ms-dialogHidden)
• Add Tasks list to your page or Content Query Web Part
  
• Click on your “New Task” link, add task info. and see how the parent page will be refreshed to update changes (Ajax Refresh). 

  Notice the Refresh icon in page tab.
  

Click here to download JavaScript file, And I hope this post was useful for you