Open SharePoint 2010/2013 Display, Edit, New Forms in Modal Dialogs

If you want to open a SP 2010 or in SP 2013 list item in a modal dialog you have two choices. Using the standard JavaScript functions or creating own functions.

How to find which item URL is called

If the dialog box appears you don't have an address bar to pick up the called URL. To see which URL is called when you edit or open a list item use the Internet Explorer Developer Tools.

Open your source list in the Internet Explorer. Press F12 to open the developer tools.

Click on the "Network" tab and then on "Start Capturing"

Now click the link you want to track.
You'll see the requests listed and you can also copy the urls for your need.

SharePoint usually calls the /_layout/listform.aspx with the list parameter. The form then redirects to the appropriate list form.

Method 1: Using core functions

When using SharePoint 2010 core javascript functions to open elements in dialogs mostly you'll need to know :

• the ID of the list
• the ID of the Content Type
• the ID of the list item
• the Page Type

If you don't enter the ContentTypeID parameter the default content type is selected. This does not matter if your list has only one content type.

Display Item Dialog

PageType = 4 (Display Form)

<a target="_self" href="javascript:EditItem2(null, 'http://sharepoint/yoursite/_layouts/listform.aspx?PageType=4&amp;ListId={60EDAB82-D9EF-4F89-BCEB-D9B287BDCC96}&amp;ID=1&amp;ContentTypeID=0x01020004D023775B015F43930EAF26E5B8AD35')">Urlaub in Jamaica</a>

Edit Item Dialog

PageType = 6 (Edit Form)

<a target="_self" href="javascript:EditItem2(null, 'http://sharepoint/yoursite/_layouts/listform.aspx?PageType=6&amp;ListId={60EDAB82-D9EF-4F89-BCEB-D9B287BDCC96}&amp;ID=1&amp;ContentTypeID=0x01020004D023775B015F43930EAF26E5B8AD35')">Urlaub in Jamaica</a>

New Item Dialog

PageType = 8 (New  Form)

<a href="javascript:NewItem2(null, ''http://sharepoint/yoursite/_layouts/listform.aspx?PageType=8&amp;ListId={xxxxxxxxxx}&amp;RootFolder=')">New Item</a>

Method 2: Using custom functions

You can use the SharePoint Dialog Framework to create your own dialog. You can also use the standard form template links:

• Display Form: http://sharepoint/sites/test/Lists/Kalender/DispForm.aspx?ID=1
• Edit Form: http://sharepoint/sites/test/Lists/Kalender/EditForm.aspx?ID=1
• New Form: http://sharepoint/sites/test/Lists/Kalender/NewForm.aspx

Create a small javascript function which takes the url as parameter and place it somewhere in your file

 function openDialog( pUrl ) {  
   SP.UI.ModalDialog.showModalDialog(   
     {  
       url: pUrl,
       width: 500,  
       height: 500,  
       title: "My Dialog"  
     }  
   );  
 }  

Now you can call one of the forms with:

<a href="javascript:openDialog('http://sharepoint/sites/test/List/Kalender/DispForm.aspx?ID=1')">
  Open Item
</a>

You can certainly adapt the function with e.g. the ID parameter of the item and so on...

 function openCalendarDialog( pID ) {  
   SP.UI.ModalDialog.showModalDialog(   
     {  
       url: 'http://sharepoint/sites/test/List/Calendar/DispForm.aspx?ID='+pID,
       width: 500,  
       height: 500,  
       title: "My Dialog"  
     }  
   );  
 }  

The HTML to call the function would be:

<a href="javascript:openCalendarDialog(1)">
  Open Event
</a>