The SharePoint Modal Dialog is great. So i would like to share with you some basics regarding to this topic. First of all, we start with a small example: Imagine a company has a list where people can request a project – i know which company would do such a thing? 🙂 Deep inside your SharePoint Site Collection is a list for these requests and your normal user should not know or have to look for this list. You just want to provide them a link where they can input their request and after submitting they should stay at the page where they are.
That is perfect for a modal dialog in SharePoint, right? It could look like this:
On the left side there is the link, if you click this link, the newform of the Project list is displayed in a layer on top of your site.
So how can we create such a modal dialog?
Step 1: Create a list
Create a list and if you want to get the link to the newsform, you can click on the add item in your list view with the right mouse and open it in a new tab.
Step 2: Add a Content Editor Webpart to your site page
Step 3: Add some Javascript to your Content Editor Webpart
<script>
function portal_openModalDialog() {
var options = SP.UI.$create_DialogOptions();
options.url = “../yoursite/Lists/Projects/NewForm.aspx?RootFolder=”;
options.title = “Request a new Project”;
SP.UI.ModalDialog.showModalDialog(options);
}
</script>
This function creates a modal dialog. You define the options like url, title and open the dialog.
But you also need the link which calls the javascript function, right?
<a onclick=”javascript:portal_openModalDialog();” href=”#”>Request a Project</a>
Step 4: Add some more functionality
If you want to have some feedback if the user clicks cancel or ok, then you have to add this options:
options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
And of course the CloseCallback function:
function CloseCallback(result, value) {
if (result === SP.UI.DialogResult.OK) {
SP.UI.Notify.addNotification(“Project is request. Wait for Approval.”);
}
if (result === SP.UI.DialogResult.cancel) {
SP.UI.Status.addStatus(“Project request is not created”);
}
}
What does it do? The SP.UI.Notify.addNotification does return a yellow infobox on the top right corner of your SharePoint Site if the user clicks OK or saves the list entry. It is the same like if something is loading and a short info message comes up.
The SP.UI.Status.addStatus creates a line between the ribbon and the content if the clicks on the cancel button or close the modal dialog, like the status bar in the administration site of SharePoint.
So you have different feedback options which you can choose. Give it a try.
The Javascript Code
The whole Javascript Code looks like this:
<script>
function portal_openModalDialog() {
var options = SP.UI.$create_DialogOptions();
options.url = “../yoursite/Lists/Projects/NewForm.aspx?RootFolder=”;
options.title = “Request a new Project”; ;
options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
SP.UI.ModalDialog.showModalDialog(options);
}
function CloseCallback(result, value) {
if (result === SP.UI.DialogResult.OK) {
SP.UI.Notify.addNotification(“Project is request. Wait for Approval.”);
}
if (result === SP.UI.DialogResult.cancel) {
SP.UI.Status.addStatus(“Project request is not created”);
}
}
</script>
In order to use it you should add also this html code:
<a onclick=”javascript:portal_openModalDialog();” href=”#”>Request a Project</a>
Conclusion:
What conclusion do you expect? I only can tell you, that this is a nice small feature which can be used
..:: I LIKE SHAREPOINT ::..
Hi Karsten,
thx for this good article.
I tried to get working your code in a content editor webpart.
But it won’t open the form in a modal window.
Can you have a look on my code, please?
function portal_openModalDialog() {
var options = SP.UI.$create_DialogOptions();
options.url = “../9007/Lists/Projects/NewForm.aspx?RootFolder=”;
options.title = “Request a new Project”;
SP.UI.ModalDialog.showModalDialog(options);
}
Request a Project
Hi Sascha,
try options.url = “http://yourserver/sites/yoursite/lists/projects/newform.aspx”;
just to find out if it has something to do with the url.
and your link should look like this:
a href=”#” onclick=”javascript: portal_openModalDialog();”> Request a Project
Important is that you open the javascript function.
By the way, does IE tell you that there are any errors?
Hope it helps!?
kindly
Karsten
Hi Karsten,
thank you for help.
The form open in the same window (like a normal link do).
But i can’t figure it out how it will appear in the nice modal window.
The javascript function is open for the first part (following your example in the post).
The “#” I have changed to my link (/sites/9007/lists/Projects/newform.aspx)
No errors in the IE.
Best regards
Sascha
a onclick=”NewItem2(event, this.href); return false;” href=”http://your-sharepoint-url-address”> your link name
This works!
Hi Sascha,
thanks for sharing. That’s the function which sharepoint normally uses. It should also work with your custom modal dialog. Maybe it helps if you debug?
Hello, I would like to know how I can use the help function of a webpart in sharepoint 2010 to create a custom help modal dialog.
The text that I want to include is:
A This register is used to record systemic issues in the business processes used by PaLM and Environmental Services
B Issues are to be raised with the relevant manager who vets the issue to confirm it is signficant and systemic.
C Managers report issue to Principal Operations Officers in PaLM who enter the issue in the Sharepoint issues register
D The initial status of each issue is “open”. Once an issue has been discussed at the SESO Working Group teleconference the status is changed to “in progress” if unresolved and “complete” if resolved
E The issues register can help inform business process improvement opportunities
Only that text, and I am unable to use developer features, as I am just an administrator with basic access to change the sharepoint site.
Thanks
Glenn
Dear Glenn,
thanks for commenting. I try to answer your question but if it does not fit your needs please do not hesitate to comment again.
Well, in fact it is possible to show just text in a modal dialog. I think you have two options.
Option 1:
You create a page in the site collection where you put in your text. In my example i open the newform.aspx page. In this case you open the aspx page you created. You should add ?isDLG=1 as parameter to hide quicklaunch.
Option 2:
You can also display html in a modal dialog: here are some examples of how to deal with that:
http://www.wawawum.com/blog/post/SharePoint-Modal-Dialog-from-HTML.aspx
http://www.neilrichards.net/design/rendering-html-in-a-sharepoint-dialog-requires-a-dom-element-and-not-a-string
Personally i would prefer option 2 if you need a fast way and a webpart which can be exported easily to other site collections. Option 1 is really good if you know you have to change the text more often and it should only be available at one site collection.
Hope it helps you. I would appreciate if you let me know what you did.
kind regards
Karsten