SharePoint 2010 Using the Modal Dialog

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 ::..

The article or information provided here represents completely my own personal view & thought. It is recommended to test the content or scripts of the site in the lab, before making use in the production environment & use it completely at your own risk. The articles, scripts, suggestions or tricks published on the site are provided AS-IS with no warranties or guarantees and confers no rights.