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;            

        SP.UI.ModalDialog.showModalDialog(options);

    } 

  

</script>

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,

           

        };

        SP.UI.ModalDialog.showModalDialog(options); 

    }  

   

</script>

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