Programming with dialog in Sharepoint 2010

Related Post : Passing parameters to the dialog sharepoint 2010 Client Object model

Beyond working with notifications and status bars, SharePoint now also offers a dialog framework that you can write code to. The purpose of the new dialog framework is to keep the user in context and focus the user on the dialog rather than all the surrounding user interface elements. With the new dialog framework, dialogs are modal and gray out the screen, except for the dialog that is displayed.

Implementation – The implementation of the dialog is that your contents are loaded in an iframe in a floating div. The dialog is modal, so the user can not get to other parts of SharePoint from the dialog. Plus, the dialog can be dragged to other parts of the browser window and can be maximized to the size of the browser window.

Programming the Dialog Framework - The Dialog framework has a JavaScript API that you can program against to have SharePoint launch and load your own dialogs.The way you do this is by calling the SP.UI.showModalDialog method and passing in the options you want for your dialog, such as height, width, page to load, and other options. Also, If you are going to use URLs, take a look at the SP.Utilities.Utility namespace. This namespace has a number of utilities to help you find the right places from which to grab your URLs no matter where your code is running. For e.g. to get your custom dialog page ( if you have any) from _layouts folder, use SP.Utilities.Utility.getLayoutsPageUrl(‘customdialog.htm’ ). This class gets the URL from the _layouts folder.

Redirect with QueryString - The dialog framework supports the Source=url querystring variable like the rest of SharePoint. So, if you want to have SharePoint redirect to another page, you can specify the source along with the query string and sharepoint will redirect to the page.

User Response - So after all this you must be wondring how does sharepoint gets back any value returned by the dialog. Well, the function CloseCallback does that work. CloseCallback in the below code gets the result and any return value. The result will be the button the user clicked.SharePoint has an enumeration for the common buttons OK and Cancel that you can check against with the result value — for example,SP.UI.DialogResult.OK or SP.UI.DialogResult.cancel.

Lets look at an example for displaying a dialog using ECMAscript. You can add the below code in the source of your content editor webpart.

Note : To Open the Dialog you need SP.UI.ModalDialog.showModalDialog method from your ECMAscript.

function OpenDialog()
{
var options = SP.UI.create_DialogOptions();
options.url = SP.Utilities.Utility.getLayoutsPageUrl(‘customdialog.htm’);
options.url += “?Source=” + document.URL;
alert(‘Navigating to dialog at: ‘ + options.url);
options.width = 400;
options.height = 300;
options.title = “My Custom Dialog”;
options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
SP.UI.ModalDialog.showModalDialog(options);
}
function CloseCallback(result, returnValue)
{
alert(‘Result from dialog was: ‘+ result);
if(result === SP.UI.DialogResult.OK)
{
alert(‘You clicked OK’);
}
else if (result == SP.UI.DialogResult.cancel)
{
alert(‘You clicked Cancel’);
}
}

and the Contents of the HTML page customdialog.htm looks like below.
< p >
< img src=”/_layouts/1033/images/DefaultPageLayout.gif” alt=”Default Page” style=”vertical-align: middle”/ >
<B>Text for your dialog goes here</B>
< /p >
< input type=”button” name=”OK” value=”OK” onclick=”window.frameElement.commitPopup(); return false;”
accesskey=”O” class=”ms-ButtonHeightWidth” target=”_self” / >

< input type=”button” name=”Cancel” value=”Cancel” onclick=”window.frameElement.cancelPopUp(); return false;”
accesskey=”C” class=”ms-ButtonHeightWidth” target=”_self” / >

In the above code you will see that I am using a function called OpenDialog.As part of this function, a variable called options is created, which uses the SP.UI.create_DialogOptions method. This method returns a DialogOptions object that you can use to specify your options. In the code, all the options are
specified, including the creation of the delegate that points to the function — CloseCallback — that will be called after the dialog is called.

Related Post : Passing parameters to the dialog sharepoint 2010 Client Object model