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:
- 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
- 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
- If user click on OK or SAVE button – if(dialogResult == SP.UI.DialogResult.OK):
How to use it
- Upload JavaScript to style library
- You can use SharePoint Designer 2013 to Upload files to Style Library (Copy and Paste or using Import Files button)
- 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.
- 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
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
- 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 URL
- 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
- Click on your “New Task” link, add task info. and see how the parent page will be refreshed to update changes (Ajax Refresh).
Click here to download JavaScript file, And I hope this post was useful for you
SutoCom
March 1, 2013 at 8:47 pm
Reblogged this on Sutoprise Avenue, A SutoCom Source.
Avi
September 15, 2016 at 9:04 pm
Thanks for sharing, this js code is a big help.
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
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
Raphael Köppel
April 4, 2013 at 12:29 pm
Here in txt form
http://sdrv.ms/16r33BC
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)
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
authentic jordans
May 25, 2013 at 2:44 pm
Open Pages and Forms in Modal Dialog For SharePoint 2013 | Ali Nimer Mustafa
grape 5s
May 25, 2013 at 3:46 pm
Open Pages and Forms in Modal Dialog For SharePoint 2013 | Ali Nimer Mustafa
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
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 😦
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.
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
Ali Nimer
February 10, 2014 at 3:01 am
Can you please to send me the code to try it on my Dev. Machine? meanwhile if you are using Server Side Object Model; check the following article http://stackoverflow.com/questions/468469/how-do-you-upload-a-file-to-a-document-library-in-sharepoint , and you can retrieve the file url from spfile object.
if you want to pass back return value to original page, you need to Add the following javascript functions for Ok and Cancel buttons in your application page
on click “ok button” handler : SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, returnValueAsString);
on click “cancel button” handler : SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Cancel, returnValueAsString);
and make sure the parameter value of needCallbackfunction =true in your lin, ex:
MS SharePoint Site
more details in the following article:
Read more: http://www.learningsharepoint.com/2011/08/26/pass-value-from-modal-dialog-to-the-calling-page-sharepoint-2010/#ixzz2ssB0Y6WB
http://sptalks.wordpress.com/2013/03/12/sharepoint-modal-dialog-passing-values-back-and-forth/
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
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
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 🙂
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
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!
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.
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.
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.
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.
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.
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.
Milo
April 25, 2014 at 4:20 am
Do you have any video of that? I’d like to find
out more details.
อาชีพเสริม
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!
สมัครงาน
April 27, 2014 at 12:12 pm
Great post. I’m facing some of these issues as well..
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.
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.
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.
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.
David
May 13, 2014 at 7:06 pm
Thanks, did not know.
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.
google
June 11, 2014 at 1:20 pm
Excellent article. I certainly love this website. Continue the good
work!
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
Brian Hada
July 12, 2014 at 6:18 pm
Veery good post. I certainly appreciate this
website. Stidk with it!
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
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.
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?
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!
moudhdfersalhi
October 20, 2014 at 12:08 pm
Hi,
Thank you so much for this helpfull Post
Tareq Sartawi
November 11, 2014 at 8:58 pm
thanks ali , this was really helpful ,,
Audrey
February 19, 2015 at 7:10 pm
Really helpful. thank you so much . helped me a great deal.
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.
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.
Mihary
June 5, 2015 at 1:42 pm
THANK YOU VERY MUCH.
YOU ARE THE BEST
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
Aaron
August 31, 2015 at 7:52 pm
Solid post! Thanks Ali for the very helpful info.
รายได้เสริม
September 15, 2015 at 10:07 pm
Good article. I’m dealing with many of these issues
as well..
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!
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.
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.
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.
Chris Cundy
February 19, 2016 at 5:40 pm
Its not allowing me to post the full code for some reason.
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”
};
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
Terry
January 4, 2017 at 8:31 pm
For the button I used the
Cancel
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”
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?
Sela
April 6, 2017 at 1:35 pm
Thanks mate 🙂
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.
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?
Manuel
March 27, 2018 at 8:26 pm
Hola estoy utilizando el código que nos muestra en SharePoint Online, si pongo una url de Internet lo abre sin problemas, pero cuando pongo la url de para pagina de mi sitio, muestra que tuvo un error inesperado, es el mismo código que muestra.