Techbubbles

Using SharePoint 2010 dialogs

SharePoint 2010 dialogs are JavaScript pop-up dialogs consisting of an iframe to request the other pages in the SharePoint. These pages can be publishing pages or application pages.When you call a pop-up dialog in SharePoint 2010, the content is displayed by using the system master page. The dialog functionality in SharePoint exposed by SP.UI.Dialog and SP.UI.ModalDialog classes.The dialog code is included in C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\SP.UI.Dialog.js file in SharePoint server.

In order to get intellisense support for dialog functions inside VisualStudio you have to refer SP.UI.Dialog.js file. You can use the SP.UI.ModalDialog.showModalDialog method to create a new dialog. This method takes in an options parameter which gives the details for what the dialog will display, such as the Uniform Resource Locator (URL) and the Heading for the dialog boxes. The following code can be used to call a modal dialog window.

function OpenModalDialog(url, heading) 
{ 
var options = SP.UI.$create_DialogOptions();  
options.url = url; 
options.heading = heading; 
SP.UI.ModalDialog.showModalDialog(options);  
}

You can call the function as below

<a href="javascript:OpenModalDialog('/SitePages/Dialogs/DefaultView.aspx?SpeakingID=52', 'SharePoint Modal dialog Demo ');"> Open Window</a>

If you do not want to pass parameters in for URL and heading then you can wrap the function as shown below

function OpenWebPage() { 
var options = { 
url: "/SitePages/Dialogs/DefaultView.aspx", 
width: 800, 
height: 600, 
}; 
SP.UI.ModalDialog.showModalDialog(options); 
}
<a href="javascript:OpenWebPage();">Open Dialog </a>

You can create an application page and then can open in dialog window, Create an empty SharePoint project in Visual Studio.

image 

Add a new item to the project and select Application page from the dialog

image

Visual Studio application will automatically add a mapped folder for the %SPROOT%/Template/Layouts folder and will add the new application page in a folder named after your project.In SharePoint 2010, all system generated dialogs are based on the dialog.master master page that can be found at %SPROOT%/Template/Layouts/Dialog.master.

Related Posts:

%d bloggers like this: