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.