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

Comments (10)

Cancel reply

  1. Chalapathi says:

    Thanks Ahmed,

    I was looking for this solution, you saved my day.

    Thanks,

    Chala

  2. Linda Braun says:

    Great! I've implemented this for a Contact Us form and it works. I wonder if there is a way to have it link to a "Thank you" page after the user fills out the form?

  3. Felipe Mejia says:

    Not very well explained unfortunately. This is mean to be read by experts I guess.

    I wouldn't know where to type all the scripts you are giving.

    Thank you

  4. Kris says:

    Hi, can you explain too.. how to get the ID number of item of a list? I struggle to get it when i call List Edit Form, The form become empty without item ID information.

    Thks very much.

  5. Seema says:

    Hi, is there a way to make each list item in Share Point 2010 as hyperlink to other pages(Dashboard.aspx)

  6. Rob says:

    Niiiice one!! Works a treat, thanks heaps

  7. Vyacheslav says:

    Hello Ahmed,

    could you please assist me to do work this if i want to sent link via email to another person?

  8. Ahmed Farag says:

    @Vyacheslav, Can you explain more what you are trying to accomplish?

  9. Ashwani says:

    Hi Ahmed,

    I trued the same , it works till the page is not published after publishing the page my hyperlink is not working. Any ideas where I am gong wrong?

    I am using SharePoint 2013 and publishing site with Oslo master page.

    Thank you

  10. Ahmed Farag says:

    @Ashwani, are you using Office 365 or on-premises SharePoint farm deployment? Cause maybe running scripts is disabled

Skip to main content