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:
- How to Open a List Form in a Modal Dialog Box
- How to Display a SharePoint Dialog from Ribbon Button and Get Selected Item Context
- How to: Display a Page as a Modal Dialog Box
- SharePoint 2010: Using JavaScript to Show Dialog Boxes
- Opening a SharePoint 2010 Modal Dialog Box from an InfoPath Form
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