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);
 
 SP.UI.ModalDialog.showModalDialog(options);
 
 }
 
 </script>

 

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>

 

/Lists/Contacts/

List URL

DispForm.aspx

Display form

ID=4

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>

 

/Lists/Contacts/

List URL

EditForm.aspx

Edit form

ID=4

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>

 

/Lists/Contacts/

List URL

NewForm.aspx

New form

 

 

Hope this helps