RSS

Open Pages and Forms in Modal Dialog For SharePoint 2013

25 Feb

Some times you need to open an internal or external pages inside an OOB modal dialog of SharePoint, such as New Task Form, Upload File Form. Or maybe you want to open external pages and sites.

I create a template functions to open pages in dialog, upload it to a central place, and use it any where I need it in my site collection.

In this post, I write how the JavaScript work and how to use it.

JavaScript File Overview

I have a JS file (SP15ModalDialog.js) that contains the modal dialog functions as following code:

image

  1. OpenInDialog function:
    This function will be called in you links (onClick) or buttons (onClientClick). And it takes the following parameters:

    • dlgWidth: Dialog width (ex: 600)
    • dlgHeight: Dialog height (ex: 800)
    • dlgAllowMaximize: Show maximize button in Dialog (true or false)
    • dlgShowClose: Show close button in Dialog (true or false)
    • needCallbackFunction: determine if you want to register call back function or not for Dialog (true or false)
    • pageUrl: the URL of target page or site
  2. CloseDialogCallback function:
    This function contains the logic of work to be done after you close, save, or cancel the dialog box, the main idea here is if you open a form in dialog and save data, you need to refresh the parent page to see changes that done. it contains 3 conditions

    • If user click on OK or SAVE button – if(dialogResult == SP.UI.DialogResult.OK):
      It will refresh the parent page (if needCallbackFunction is true)
    • If user click on CANCEL or CLOSE button – else if(dialogResult == SP.UI.DialogResult.cancel)
      Do nothing or add your custom code
    • If dialogResult return other value – else : Do nothing or add your custom code


How to use it

  1. Upload JavaScript to style library
    • From Setting Icon, select Site Contents
      image
    • From Site Content, Click on Style Library
      image
    • From Ribbon, in Files Group, Click on Upload Document
      image
    • Brows and select the JavaScript file, and click OK
      image
    • Make sure to Check-In and Publish a major version for the file
  2. You can use SharePoint Designer 2013 to Upload files to Style Library (Copy and Paste or using Import Files button)
    image
  3. Register JavaScript to your page (Team Site Page), you can register this file to master page or page layout if you are using publishing site template. In this sample I create a site page in team site template, and use my function inside the page directly.
    image
  4. Use OpenInDialog function in your links or buttons

Open External sites in dialog box

In this case, I only need to open external site (ex: http://www.SharePoint.com), so I don’t need CallBack handler logic, and I need to enable maximize and close button, So the anchor link will looks like this:

<a href="#" onclick="openInDialog(500,600,true,true
,false,'http://www.SharePoint.com');">MS SharePoint Site</a><br/>

and the result will be like this

image

Open Internal Page/Form in dialog box

In this scenario, I will open add new task form, and when click on save button, I need to refresh the parent page to see changes in parent list

  1. Add a link in your page to open New Task Form in dialog
<a href="#" onclick="openInDialog(500,600,true,true,
true,'/sites/en/Lists/Tasks/NewForm.aspx?RootFolder=&IsDlg=1');">New Task</a>
  • To get the link of any form, go to list and click on add new item (make sure you enable forms to be open in dialog from List Advanced Settings), then Right-Click on form and copy the URLimageimage
  • Also, check if the (IsDlg=1) parameter is exists in the URL. If not, never forget to add it, this is to hide all DIVs or section not allowed to be shown in dialog (DIVs that use style class s4-notdlg and ms-dialogHidden)
  • Add Tasks list to your page or Content Query Web Part
    image
  • Click on your “New Task” link, add task info. and see how the parent page will be refreshed to update changes (Ajax Refresh).image 

    Notice the Refresh icon in page tab.
    image

Click here to download JavaScript file, And I hope this post was useful for you Smile

 
74 Comments

Posted by on February 25, 2013 in CSOM, SharePoint 2013, Tips

 

Tags: , , , , , , , , , ,

74 responses to “Open Pages and Forms in Modal Dialog For SharePoint 2013

  1. SutoCom

    March 1, 2013 at 8:47 pm

     
    • Avi

      September 15, 2016 at 9:04 pm

      Thanks for sharing, this js code is a big help.

       
  2. Hemil

    March 28, 2013 at 9:06 am

    Hi Ali,

    This is really a helpful article. Though I am unable to open any external site(e.g., http://www.google.com) or site in other site collection in the modal dialogue. It throws below mentioned message.

    “This content cannot be displayed in a frame

    To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame.

    What you can try:

    Open this content in a new window ”

    I checked a few articles and all suggest to add the sites in trusted site of the browser. I have tried that but it doesnt work for me. Please let me know if you have faced similar issue and if you can suggest a solution.

    Thanks & Regards,
    Hemil

     
  3. Raphael Köppel

    April 4, 2013 at 12:24 pm

    Hello cool Post.

    here is my modified Version for a quick insert…
    In this example a modal newForm
    Just paste the following script in a content editor webpart:

    //function to open pages in a dialog
    function openInDialog(dlgWidth, dlgHeight, dlgAllowMaximize,dlgShowClose, pageUrl)
    {
    var options = { url: pageUrl, width: dlgWidth, height: dlgHeight, allowMaximize: dlgAllowMaximize,
    showClose: dlgShowClose
    };
    SP.SOD.execute(‘sp.ui.dialog.js’, ‘SP.UI.ModalDialog.showModalDialog’, options);
    }

    Neu

    Cheers Raphael

     
  4. Srikanta

    May 15, 2013 at 11:01 am

    nice article… any idea how to open the modal dialog from inside the SP 2013 client web part(app part)

     
  5. wasim bahader

    May 21, 2013 at 3:57 pm

    Very nice article, but how to populate the modal window with automatic width and height, depending on the content in the window, right now I have set it manually and get scrollbars if I set width under 1030px.

    thanks in forhand.

    Kind regards,
    /Waz

     
  6. authentic jordans

    May 25, 2013 at 2:44 pm

    Open Pages and Forms in Modal Dialog For SharePoint 2013 | Ali Nimer Mustafa

     
  7. grape 5s

    May 25, 2013 at 3:46 pm

    Open Pages and Forms in Modal Dialog For SharePoint 2013 | Ali Nimer Mustafa

     
  8. Aparna

    October 8, 2013 at 4:22 pm

    i am getting dialog window in the same page. i followed the same steps as in post

    thanks in advance,
    Aparna

     
  9. siffardu

    November 28, 2013 at 12:20 pm

    Hi,

    I was trying to use the lighbox code in SharePoint 2010 to display a link (image) as a lightbox in the content editor web part. I saved the code in notepad to a library and assigned the link to the Content link under content editor. The link appears as an image but gives no output on click. please let me know what i am doing wrong. Please help. Code is given below:

    function openInDialog(dlgWidth, dlgHeight, dlgAllowMaximize, dlgShowClose, pageUrl)
    {
    var options= { width: lgWidth, height: dlgHeight, allowMaxize: dlgAllowMaximize,
    showClose: dlgShowClose, url: pageUrl};
    }

     
    • Ali Nimer

      November 28, 2013 at 11:30 pm

      Try this please

      http://johnliu.net/blog/2011/5/9/sharepoint-2010-simple-lightbox-effect-for-large-images.html

      and make sure to call “SP.UI.ModalDialog.showModalDialog(options);” in your function. it should looks like this:

      function openInDialog(dlgWidth, dlgHeight, dlgAllowMaximize, dlgShowClose, pageUrl)
      {
      var options= { width: lgWidth, height: dlgHeight, allowMaxize: dlgAllowMaximize,
      showClose: dlgShowClose, url: pageUrl};

      SP.UI.ModalDialog.showModalDialog(options);

      }

       
      • bindu

        November 29, 2013 at 5:15 am

        I tried calling the “SP.UI.ModalDialog.showModalDialog(options)” but it shows me error on page 😦

         
  10. Pocket Change

    February 1, 2014 at 8:08 am

    Dude seriously, no offense, neither yours nor Koppel’s executes as described. Ali, I have the same version of sp13 noted in your screen shots and took every step you provided and it didn’t work. Koppel yours only displayed in a dialog when used as written it seemed to tolerate no changes.

     
    • Ali Nimer

      February 1, 2014 at 9:53 pm

      Dear “Pocket Change”,

      I upload the same code (you can download the “js” file and check it) to a SharePoint Online – public site ( http://www.myv-cloud.com/en/opendialog ), and it works fine, some websites like (google, youtube, yahoo, ..etc) did not allow you to display there page contents in iFrame (cannot be controlled by SharePoint), even if you add the domain (ex: google.com) to “HTML Security Field” list in site settings. please check your code and send me the error message to review it.

       
  11. ralf

    February 8, 2014 at 12:03 pm

    Salam Ali ,

    In my case the pageUrl is “http://mydevsp-2/_layouts/15/SelectPicture2.aspx?Type=User&FeedAttachment=true&IsDlg=1”
    well I’m trying to open the upload image dialog where you can browse an image and then upload it. till now everything is ok , but my problem comes when I try to get the image url or the image stream after the upload to my initial page .
    could you please advice ?
    in btw I ‘m trying to customize the share point 2013 social , that’s why I need to the upload image dialg

    In advance many thanks Ali

     
  12. ralf

    February 11, 2014 at 12:22 am

    Thank you for your reply . In fact the url was in the return value so everything seems to be fine .
    I will check out these links
    Again many thanks

     
  13. allergiker staubsauger

    February 14, 2014 at 4:01 pm

    I really like your blog.. very nice colors &
    theme. Did you make this website yourself or did you hire someone to
    do it for you? Plz respond as I’m looking to
    construct my own blog and would like to find out where u got this
    from. thanks a lot

     
    • Ali Nimer

      February 15, 2014 at 12:25 am

      it a free theme from WordPress themes gallery

       
  14. Alex

    March 5, 2014 at 9:24 pm

    I am very new to programming but was able to use this code in my comapny’s SP13 site without flaw. It’s functionality is awesome and the company loves it. Thank you SO much for sharing!

     
    • Ali Nimer

      March 6, 2014 at 1:51 am

      Thanks and you are welcome Alex 🙂

       
  15. ralf

    March 6, 2014 at 3:28 pm

    Dear Ali ,
    hope you are doing great .
    I wanted to share with you the below issues mainly when trying to open this dialog (see code below ) from a smartphone browser e.g safari iPhone .

    1-The dialog is not responsive do you know if there is a responsive one ( i’m using share point 2013)
    2-The image upload is not working , when you click on upload button nothing happened

    /**
    * code image selection from a dialog
    **/
    pageUrl=”/_layouts/15/SelectPicture2.aspx?Type=User&FeedAttachment=true&IsDlg=1″
    function openInDialog(dlgWidth, dlgHeight, dlgAllowMaximize, dlgShowClose, pageUrl)
    {
    var options= { width: lgWidth, height: dlgHeight, allowMaxize: dlgAllowMaximize,
    showClose: dlgShowClose, url: pageUrl};

    SP.UI.ModalDialog.showModalDialog(options);

    }

    in advance many thanks for your help
    br
    ralf

     
  16. Pro Binary Option Signal

    March 7, 2014 at 1:21 pm

    Wow, amazing blog layout! How long have you been blogging for?
    you make blogging look easy. The overall look of your site
    is wonderful, let alone the content!

     
  17. Continued

    March 7, 2014 at 9:17 pm

    We are a group of volunteers and starting a new scheme in our community.
    Your website provided us with valuable information to work on.
    You’ve done an impressive job and our whole community will be thankful to you.

     
  18. nauka angielski

    March 18, 2014 at 9:19 am

    Hi there, all the time i used to check web site posts here early in the dawn,
    as i enjoy to learn more and more.

     
  19. xplocial

    March 18, 2014 at 7:09 pm

    Hi it’s me, I am also visiting this web site on a
    regular basis, this web page is really good and the viewers
    are actually sharing nice thoughts.

     
  20. ness

    March 25, 2014 at 4:43 am

    Hi Ali,
    This post was very helpful to me. However have you ever noticed that after editing an item, if you click the link to open the same popup again, an error occurs, with the following stated in the logs?

    “Operation is not valid due to the current state of the object.”

    Thanks.

     
  21. nauka angielskiego inowroclaw

    April 3, 2014 at 6:32 pm

    Thank you for sharing your info. I truly appreciate your efforts and I am waiting for your further
    write ups thank you once again.

     
  22. moz

    April 24, 2014 at 7:07 pm

    I’m more than happy to discover this page. I wanted to thank you for
    your time for this particularly fantastic read!!
    I definitely enjoyed every part of it and I have you book marked to check out new information in your website.

     
  23. Milo

    April 25, 2014 at 4:20 am

    Do you have any video of that? I’d like to find
    out more details.

     
  24. อาชีพเสริม

    April 26, 2014 at 12:44 am

    Have you ever considered about adding a little bit more
    than just your articles? I mean, what you say is valuable and everything.

    However just imagine if you added some great images or videos to give your posts more, “pop”!

    Your content is excellent but with images and clips, this website could undeniably be one of the greatest in its niche.
    Great blog!

     
  25. สมัครงาน

    April 27, 2014 at 12:12 pm

    Great post. I’m facing some of these issues as well..

     
  26. ovarian cyst pain Treatment

    May 4, 2014 at 3:47 am

    Heya i’m for the first time here. I found this board and I find It truly useful
    & it helped me out much. I hope to give something back and help others like you helped me.

     
  27. How To Relieve Ovarian Cyst Pain

    May 4, 2014 at 3:58 am

    I’m now not certain where you’re getting your info, but good topic.
    I must spend some time learning much more or working out more.

    Thanks for wonderful information I used to be looking for this information for my mission.

     
  28. Ovarian Cyst Back Pain

    May 5, 2014 at 10:48 am

    May I simply just say what a comfort to find someone that really
    understands what they’re discussing on the web.

    You certainly know how to bring a problem to light and make
    it important. A lot more people really need to look at this and understand this
    side of the story. I was surprised you aren’t more popular given that you
    most certainly possess the gift.

     
  29. support.Ropnoy.com

    May 5, 2014 at 11:25 pm

    Wow, that’s what I was seeking for, what a material!
    present here at this weblog, thanks admin of this site.

     
  30. David

    May 13, 2014 at 7:06 pm

    Thanks, did not know.

     
  31. all herbs and spices and their uses

    May 27, 2014 at 11:01 pm

    You have to work with the iPad and e-readers now
    available! You know what Saul has done. Learning of Angelo’s disappearance is enough to demonstrate that it’s portable
    vaporizer possible for you. Remote viewing – I’ll try to project from each
    coarser body. The man that she was thinking to myself, I should go this way, when all the rapists and murderers die.
    All of these magnetite portable vaporizer crystals.

     
  32. google

    June 11, 2014 at 1:20 pm

    Excellent article. I certainly love this website. Continue the good
    work!

     
  33. Bob

    June 21, 2014 at 9:34 pm

    Hi Ali,

    I was just wondering whether via this method it would be abe to make url’s that link to other forms on my sharepoint.

    Right now it uses the PageURL while I would prefer to have the SiteURL.

    Is this possible?

    Many thanks,

    Bob

     
  34. Brian Hada

    July 12, 2014 at 6:18 pm

    Veery good post. I certainly appreciate this
    website. Stidk with it!

     
  35. ralf

    August 3, 2014 at 12:35 am

    Hi again,

    I’m wondering if i can use the ‘upload.apsx’ in a model dialog mode ,
    the main goal is to let the end user pick up a document from his local drive (e.g desktop ,mydocuments) and when clicking “ok button” handler : SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, returnValueAsString);

    I would like to get the full path of the chosen document for a later use

    is that possible in your opinion ?

    Many thanks in advance

    Ralf

     
  36. Finn

    August 19, 2014 at 9:26 pm

    Excellent way of telling, and nice piece of writing to get facts regarding my presentation subject, which i am going to present in institution of higher education.

     
  37. Hamza Farooq

    September 4, 2014 at 8:42 am

    Hi Ali,

    I’m calling the dialog box but the whole page is crashing as int.js?1 , anyidea how to overcome this issue?

     
  38. Tandem fishing Kayak

    September 21, 2014 at 7:58 am

    I like the helpful information you provide in your articles.
    I will bookmark your blog and check again here regularly.
    I am quite certain I will learn many new stuff right here!
    Best of luck for the next!

     
  39. moudhdfersalhi

    October 20, 2014 at 12:08 pm

    Hi,

    Thank you so much for this helpfull Post

     
  40. Tareq Sartawi

    November 11, 2014 at 8:58 pm

    thanks ali , this was really helpful ,,

     
  41. Audrey

    February 19, 2015 at 7:10 pm

    Really helpful. thank you so much . helped me a great deal.

     
  42. bharat

    March 10, 2015 at 7:57 am

    Hi,i have applied following code code in my sharepoint 2013 site in the content editor webpart:
    var options = {

    allowMaximize: true,

    showMaximized: true,

    url: “siteURL”

    };

    SP.UI.ModalDialog.showModalDialog(options);

    But it opens the multiple forms in infinite refresh mode,i use internet explorer 11.
    Pls help me out.

     
  43. scrivies

    March 31, 2015 at 6:50 pm

    Thanks very much for this post. Very helpful.
    One issue for me: the parent page is a calendar so if users move forward a few weeks before opening the dialog the page refreshes back to the default ‘calendar date’ or the current week when the dialog closes.
    Can the parent page be ‘refreshed’ with new date range so the users new calendar entry is visible without having navigate to check if the entry is there? Thanks again.

     
  44. Mihary

    June 5, 2015 at 1:42 pm

    THANK YOU VERY MUCH.
    YOU ARE THE BEST

     
  45. kobus swart

    July 15, 2015 at 7:01 pm

    Great post and code.

    Works like a charm, except when calling from a button onclick event rather than an href. Opens the dialog and then immediately closes it again without showing dialog page. No time to debug, but guess it has something to do with the button not exposing the parent DOM the same as an a href would.

    No big issue as I wrapped an image that looks like a button in the a href.

    Good work thanks

     
  46. Aaron

    August 31, 2015 at 7:52 pm

    Solid post! Thanks Ali for the very helpful info.

     
  47. รายได้เสริม

    September 15, 2015 at 10:07 pm

    Good article. I’m dealing with many of these issues
    as well..

     
  48. Linda

    January 6, 2016 at 7:50 pm

    I’m trying to use a modified version of your solution to open a web part page on an application server in a modal dialog.

    The first time it opens up, it’s in a modal dialog, but when the web parts pass data the page updates and has the global and left navigation again.

    Ideas?

    I’m doing this from a publishing page where the page content has a Script Editor web part and the snippet is your JavaScript code within the script tag, so

    //function to open pages in a dialog
    function OpenInDialog(dlgWidth, dlgHeight, dlgAllowMaximize,dlgShowClose,needCallbackFunction, pageUrl)
    {
    var options = { url: pageUrl, width: dlgWidth, height: dlgHeight, allowMaximize: dlgAllowMaximize,
    showClose: dlgShowClose
    };

    if(needCallbackFunction)
    {
    options.dialogReturnValueCallback = Function.createDelegate(null, CloseDialogCallback);
    }
    SP.SOD.execute(‘sp.ui.dialog.js’, ‘SP.UI.ModalDialog.showModalDialog’, options);
    }

    function CloseDialogCallback(dialogResult, returnValue)
    {
    //if user click on OK or Save
    if(dialogResult == SP.UI.DialogResult.OK)
    { // refresh parent page
    SP.SOD.execute(‘sp.ui.dialog.js’, ‘SP.UI.ModalDialog.RefreshPage’, SP.UI.DialogResult.OK);
    }
    // if user click on Close or Cancel
    else if(dialogResult == SP.UI.DialogResult.cancel)
    { // Do Nothing or add any logic you want
    }
    else
    {//alert(“else ” + dialogResult);
    }
    }

    I then have a Content Editor web part which includes an HTML snippet that’s in a text file. That text file contains:

    Begin building your slate of Interview Questions – doing it in a dialog that does not show global and left navigation:
    Launch the Interview Question Slate Builder App

    Can you see what I might be doing wrong to have additional updates to the page stay in a modal dialog and not show the left nav, logo and global nav?

    Thank you!

     
  49. Chris Cundy

    February 19, 2016 at 5:38 pm

    Could you tell me how I should format this section of code to include the modal popup?

    I did not design the below, this is to link to a new page on image click however not standard image due to the animation as in the code below.


    Board + committee records

    If you’d like a record from here, please see the company secretary for details.

     
  50. Chris Cundy

    February 19, 2016 at 5:39 pm

    Could you tell me how I should format this section of code to include the modal popup?

    I did not design the below, this is to link to a new page on image click however not standard image due to the animation as in the code below.


    Board + committee records

    If you’d like a record from here, please see the company secretary for details.

     
  51. Chris Cundy

    February 19, 2016 at 5:40 pm

    a href=”/EARL/CompanySecretary” class=”ks-promo ks-promo–pink”>
    Board + committee records

    If you’d like a record from here, please see the company secretary for details.

     
  52. Chris Cundy

    February 19, 2016 at 5:40 pm

    Its not allowing me to post the full code for some reason. :/

     
  53. SharePoint

    August 4, 2016 at 7:46 am

    Is it possible to rename the word “Dialog” that appear in the Top Bar of the Modal Page?
    I checked the code, but cant find any reference.

     
    • SharePoint

      August 18, 2016 at 5:27 am

      Ali, awaiting for your response. Kindly update.

       
      • Ali Nimer Mustafa

        August 18, 2016 at 4:20 pm

        add “title” parameter in “options” variable

        var options = { url: pageUrl, width: dlgWidth, height: dlgHeight, allowMaximize: dlgAllowMaximize,
        showClose: dlgShowClose, title:”Custome Title”
        };

         
  54. Terry

    January 4, 2017 at 8:28 pm

    Hi There,

    I wonder if you could solve this mystery….

    I have created a dialog box using SP.UI.$create_DialogOptions(); – which launches a custom aspx page as a modal dialog box. It appears to be the same as the method you have used for SP.UI.ModalDialog.showModalDialog.

    On the dialog box, I have already enabled an ‘X’ in the top right hand corner, which closes the dialog box as expected. But, in the aspx form, I have also added a html button such as:

    Cancel

    Within the onclick event shown above, I tried using “javascript:window.close();” or as shown above calling the CloseWindow() function which will do the same thing – but to no avail. I now understand that window.close() is not possible here.

    In the code examples shown above, you have referred to: options.dialogReturnValueCallback.

    Then you’ve done a check to see if the cancel button has been clicked as follows:

    if(dialogResult == SP.UI.DialogResult.cancel)

    After this you state: //Do nothing or add any logic you want.

    I take it the SP.UI.DialogResult.cancel only refers to the ‘X’ in the top right hand corner.

    So my question is, what is the logic to close down the dialog box using the html button I have created? Any help would be appreciated.

    Thank you in advance,

    Terry

     
  55. Terry

    January 4, 2017 at 8:31 pm

    For the button I used the Cancel

     
  56. Terry

    January 4, 2017 at 8:33 pm

    I can’t generate the html code here on this post – but it was just a “Cancel”

     
  57. Terry

    January 4, 2017 at 8:35 pm

    with onclick=”CloseWindow();”

     
    • kirti

      June 15, 2017 at 9:32 am

      Hey Terry , I have the same issue , I am not able to close the pop up by clicking on the “Cancel”button as SP.UI.DialogResult.cancel only refers to the ‘X’ in the top right hand corner as you have already stated. Can you please help how you resolved this issue?

       
  58. Sela

    April 6, 2017 at 1:35 pm

    Thanks mate 🙂

     
  59. Russ Herald

    May 1, 2017 at 11:41 am

    Great article.
    But… (always a but) how do I get this to work on a Search results webpart that presents the display form from list items? I’m working with SP2013 on Premise, on a page that returns results from a user defined text search.

     
  60. Sharon

    June 22, 2017 at 8:17 pm

    Thanks for the post. I’m using SharePoint Online/Office 365 and it keep stripping the html after saving it. Any idea?

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: