Thursday, September 20, 2012

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>

15 comments:

Dave said...

Do you happen to know how to dynamically set the Title of the modal?

I tried using xslt but it breaks the script.

Dave said...

Further testing shows that removing the title from the script gives me what I want.

Carlos said...

Sweet! Now I can edit and add without having the user get lost. Thanks!

Clem said...

I haven't been able to get this to work from a script or HTML page. I know if its in a content editor web part, it will likely work. Can you give instructions on how to make it work from a html or js file?

Baris Bikmaz said...

Hi Clem,
Why do you want this to work in an html file ? Can you specify where do you want to use the js or html file. To use the SP modal dialog you have to reference all the SP JavaScript files.

Roger said...

How do you pass the item ID parameter using this function?
Thanks

Baris Bikmaz said...

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

Vincent Gerhard Blasl said...

Great help!
Thanks for the blog post.

Anonymous said...

Hi,

Any tweak we need to do with this to work on Sharepoint 2013?

Thanks!

SPbb

Baris Bikmaz said...

Sorry haven't installed SP 2013 until now. Therefore can't help here.

Anonymous said...

i have a list a webapp A and i want to open the dispform of this list at webapp B in modal popup.

My list has Enhanced rich text column . when i try to edit this column in modal popup the Enhanced rich text ribbon controls eg. Insert hyperlink, upload images etc. throws page not found error.

Any idea..

Baris Bikmaz said...

Sorry I did a quick check in my environment but couldn't reproduce your problem. What are your ULS logs on WebApp B saying ?

Anonymous said...

Hi Baris

it seems that your post is closely related to an issue I am having
Can you please give more insight about the following :


I have a sharepoint calendar whose display form I have added a jquery script to using the CEWP. When I click on an item on the calendar for display I get different behaviors

if I click the item within the same page, the script doesn't get executed and I get directed to this URL:

https://microsoft.sharepoint.com/teams/mysite123/_layouts/15/start.aspx#/Lists/ORB/DispForm.aspx?ID=15&Source=https%3A%2F%2Fmicrosoft%2Esharepoint%2Ecom%2Fteams%2FORBMEA%2FSitePages%2FORB%2520Request%2Easpx

When I right click and choose open in a new tab the script works and I get directly here: https://microsoft.sharepoint.com/teams/mysite123/Lists/ORB/DispForm.aspx?ID=15

The script also works great when I double click the cell and it opens in a dialog form

Any pointers will be much appreciated

Baris Bikmaz said...

Hi can you send me the script so I can reproduce the behaviour. I know that in SharePoint 2010 the calendar entries were loaded asynchronosly so it can be that the elements are loaded after your script is called and therefore you can't attach events.

Anonymous said...

THANKS! :D