Friday, 2 July 2010

Open list item modal dialog (lightbox) with a hyperlink in SharePoint 2010

The modal dialog appears by default in SharePoint 2010 when you add, edit or view a list item from the List View Web Part. It’s the lightbox style look and feel where the background turns dark and a new dialog opens up on top, allowing you to view and edit items without having to leave the current page.

You may want to use this functionality with a hyperlink – for example in a Content Editor Web Part on a landing page. You can do this by using the code below:

<script type="text/javascript">
var options = {
url: "/Lists/Announcements/NewForm.aspx",
        title: "Add New Announcement",
        allowMaximize: true,
        showClose: true,
        width: 625,
        height: 525,
        dialogReturnValueCallback: silentCallback};
function open() {SP.UI.ModalDialog.showModalDialog(options);}
function silentCallback(dialogResult, returnValue) {
}
function refreshCallback(dialogResult, returnValue) {
    SP.UI.Notify.addNotification('Operation Successful!');
    SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
}
</script>
<a href="javascript:open()">Click Here</a>
When you click on the “Click Here” link, it shows a dialog similar to the one pictured below:
Modal
A couple of things to note here – the “options” variable allows you to set the properties of the dialog, one of which is the dialogReturnValueCallback property. Setting this with the silentCallback function (used in the example above) returns to your landing page without a refresh. You can replace this with the refreshCallback function, which will refresh the page and show a pop-up message when an action is configured in the dialog. The best thing to do is play about with it and check out the difference.

29 comments:

  1. I have the problem that Sharepoint removes the javascript:open from the href property. How can I call the javascript inside of the href without be removed by Sharepoint??

    ReplyDelete
  2. You could try writing the HTML in a file and linking to it from the Content Editor Web Part instead of using it in the Web Part directly

    ReplyDelete
  3. Thanks Phil! Great article. Helped a lot.

    ReplyDelete
  4. I have a custom list with some hyperlinks in it using a concat function, can i also just display those? Or do i need to add everything as above and modify it?

    Cant i just give a property or something to the link to let it open in this kind of lightbox?

    ReplyDelete
  5. Thanks so much this worked great!

    ReplyDelete
  6. Is there a way to have the callback property go to another page? I have a page with text information for the end user and a link using the above code. After the dialog box is submitted, I want to direct them to a specific view of the library so that they see their submitted item. Thanks!

    ReplyDelete
  7. Use a source parameter in the URL? See examples shown in this blog article: http://www.sharepoint911.com/blogs/laura/Lists/Posts/Post.aspx?ID=91

    ReplyDelete
  8. This works well, as do a couple other methods I've tried. I like this one because I can set some options for the dialogue. However, I cannot get the source parameter to work no matter what I try. It works if I am not using a modal dialogue, but not if I am. Any suggestions?

    ReplyDelete
  9. Great works like a charm

    ReplyDelete
  10. Thanks .....
    This will work fine............

    ReplyDelete
  11. Thanks for this -- it works as expected. What if I wanted to call the open function with a string argument that specifies the url? Can I invoke a modal dialog using a tweaked open function that accepts a string argument and passes that string along with the options variables defined above? If so, can you help me with the syntax? Thanks.

    ReplyDelete
  12. I have developed custom webpart(not visual web part). Where can I insert this code? Please help me. Thanks

    ReplyDelete
  13. Great, thanks - very helpful. Only change you need to make is to check the value of dialogResult when showing a notification etc. - the user could click cancel, etc. Thanks.

    ReplyDelete
  14. I've two queries below.

    1-When i used your script it's showing me 404 error in the dialog box,even though i gave the axact url as you mentioned (/Lists/list name/NewForm.aspx).
    Can you please let me know what i am doing wrong
    My script is as below.


    var options = {
    url: '/Lists/Room Booking/NewForm.aspx',
    title: "Book New Room",
    allowMaximize: true,
    showClose: true,
    width: 625,
    height: 525,
    dialogReturnValueCallback: silentCallback
    };
    function open()
    {SP.UI.ModalDialog.showModalDialog(options);}


    function silentCallback(dialogResult, returnValue)
    {
    }
    function refreshCallback(dialogResult, returnValue) {
    SP.UI.Notify.addNotification('Operation Successful!');
    SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
    }


    2-i have a scenario where my site is being extended for an extranet environment so now i've two sites and i've to use the same script for these two sites but not changing anything in the script.

    So can you please let me know what i need to set in the url so it can get the url of the current site.

    ReplyDelete
  15. Hi I am new to SharePoint and Coding. I have a link in the content editor that needs to open as a lightbox. So what i did was replaced your href with the address of my link and added it to the content link section of my content editor. But on running it just displays my code. Anyway to achieve this. Please help.

    ReplyDelete
  16. i need open all pictures of my gallery on lightbox. its possible?

    ReplyDelete
  17. i can open a image of gallery with this code?

    ReplyDelete
  18. How can i upload more than just one lightbox in SP2013?

    ReplyDelete