Create a link to display, edit and create new items from a dialog (layover) in SharePoint


Some times when you design your page in SharePoint whether you use the publishing framework (Pages) or just regular wiki pages (Site Pages), you want to create a link that will allow you to display and manipulate lists items in a layover dialog as oppose to move away from the current page to do that.


This can be accomplished using the SharePoint dialog framework. There are a lot of resources on MSDN and blogs that talks in details how you can use the dialog framework. Here are some:

I’m going to focus on how you can create links in SharePoint to display, modify or create a list item.

If you are using SharePoint 2013 you will need to use a Script Editor, Embed Code or content editor webpart.



Please note if you try to add javascript code within the HTML code of of a Wiki page (page under SitePages library) SharePoint will remove your JS code after you save your page.

The script is simple, we will create a generic function to call that will display the dialog as follows:


 <script type="text/javascript">
 function displayLayover(url) {
 var options = SP.UI.$create_DialogOptions();
 options.url = url;
 options.dialogReturnValueCallback = Function.createDelegate(
 null, null);


Now you can use the created function to display a SharePoint dialog for any list. Here is an example of how you can create a link to open the display form for an item:


 <a href='javascript:displayLayover("/Lists/Contacts/DispForm.aspx?ID=4&IsDlg=1")'>Display Item </a>



List URL


Display form


Item ID number to display


Here is how you display and edit form for a certain item:


 <a href='javascript:displayLayover("/Lists/Contacts/EditForm.aspx?ID=4&IsDlg=1")'>Display Item </a>



List URL


Edit form


Item ID number to edit




 And finally this is how you create a link for displaying the new item form for a list in a dialog:


 <a href='javascript:displayLayover("/Lists/Contacts/NewForm.aspx?IsDlg=1")'>Display Item </a>



List URL


New form



Hope this helps