Tuesday, November 29, 2011

Using the Dialog framework in SharePoint 2010 – Part 1

We are going to cover a new topic and a new series called dialog framework that has been introduced in SharePoint 2010 environment.

We all are aware about the dialogs if we have worked in web technologies. A model window that pops up and you can perform some operation without navigating to other page and then come back to the previous page.

If you would like to have a quick look at this series and would like to understand it as an overview, you can have a look at Opening any page as model dialog post.

Model dialog allows you to perform an operation and then close the window after performing an operation and you are back on the same page.

Most of the functionality is handled by two basic classes. SP.UI.Dialog and SP.UI.ModelDialog.
Classic example of model dialog is when you create, edit entries from list items, you get a dialog window to perform that. These pages open as a part of dialog.

We will deep dive into this dialog framework. In this post, I am going to cover a simple scenario of opening a window as a model dialog. You can have this enabled in your custom action click event, it can be a part of button click, and it can be a part of ribbon button.

Here is a very simple code written to open Bing search in model window from button click. We have defined a JavaScript that executes when we click on the button.

I’ve defined in a web part, one input type button and invoking a JavaScript function to open a model dialog.

<input type="button" value="Open Bing" onclick="OpenModalBing()" />

<script  type="text/javascript">

    function OpenModalBing()
        var options = SP.UI.$create_DialogOptions();
        options.url = "http://www.bing.com";
        options.width = 750;
        options.height = 550;            

And this is what you get out of this code.

You can pass on different parameters in an option. So that when a window opens, it has some properties defined in it. just like how we do with window.open javascript function.

Here I have made some change to an existing code and look at the change in the behavior of how window open when button is clicked.

Now the maximize button does not appear as we have set it in JavaScript.

If you observe, the window opens in a center. If you would like to open a window at some other position, then you can use x and y properties and set it to options.

There is also another way you can create dialog. Observe the difference between two methods. Earlier we have created a window and then we set the properties on the window object with = sign. This is the other way around. Feel free to use the best suited way for you.

<script  type="text/javascript">

    function OpenModalBing()
        var options = {
            url: 'http://www.bing.com',
            tite: 'Bing Search',
            allowMaximize: false,
            showClose: true,
            width: 750,
            height: 550,

Both give you the same result. Keep reading Part-2 of the series to know more about model dialog.

1 comment:

Laptop Repair Services said...

Dialogs play an important role in term of web technologies. They will sort out the difficulty of coding.

Share your SharePoint Experiences with us...
As good as the SharePointKings is, we want to make it even better. One of our most valuable sources of input for our Blog Posts comes from ever enthusiastic Visitors/Readers. We welcome every Visitor/Reader to contribute their experiences with SharePoint. It may be in the form of a code stub, snippet, any tips and trick or any crazy thing you have tried with SharePoint.
Send your Articles to sharepointkings@gmail.com with your Profile Summary. We will Post them. The idea is to act as a bridge between you Readers!!!

If anyone would like to have their advertisement posted on this blog, please send us the requirement details to sharepointkings@gmail.com