Friday, December 11, 2009

Dialog Platform in SharePoint 2010 & How to open the Edit Form Dialog for List Item


Dialog Platform in SharePoint 2010:

One of the New User Interface Platforms in SharePoint 2010 is ‘The Dialog Platform
A dialog is essentially a <div> which gets visible on demand and renders the HTML using a background overlay creating a modal dialog like user experience.

We can show an existing div from within the page or a different page using a URL inside the dialogs.
When we pass the URL to the dialog it looks for the Querystring parameter “IsDlg=1”. If this parameters exists than it would dynamically load the "/_layouts/styles/dlgframe.css” file. This file overrides the “s4-notdlg” class items as “display:none”, which means that all items with this class would not get displayed in Dialog Mode. 
So if we go to the v4.master page we can see that this class is used by the Ribbon control to hide the ribbon when in dialog mode:

image 

How to open the Edit Form Dialog for List Item:


In SharePoint 2010 The URL for opening the Edit Form of any list item looks like something like this :

”http://intranet.contoso.com/<SiteName>/Lists/<ListName>/EditForm.aspx?ID=1&IsDlg=1”

ID
is the list item row identifier and as discussed above the IsDlg is for the dialog mode.

Now to open a dialog we need to use the SP.UI.ModalDialog.showModalDialog method from the ECMAScript Client Object model and pass in the url of the page, width & height of the dialog and also a callback function in case we want some code to run after the dialog is closed.

<script type="text/javascript">
//Handle the DialogCallback callback
function DialogCallback(dialogResult, returnValue){
}

//Open the Dialog
function OpenEditDialog(id){
var options = {
url:&quot;http://intranet.contoso.com/<SiteName>/Lists/<ListName>/EditForm.aspx?ID=&quot; + id + &quot;&amp;IsDlg=1&quot;,
width: 700,
height: 700,
dialogReturnValueCallback: DialogCallback
};
SP.UI.ModalDialog.showModalDialog(options);
}
</script>


The .js files for the ECMAScript Object Model (SP.js, SP.Core.js, SP.Ribbon.js, and SP.Runtime.js ) are installed in the %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS directory.


Here is a good MSDN link explaining the Client Object Model Distribution and Deployment options available in SharePoint 2010.

8 comments:

blahhh said...

how would i make a link to a new item to open in dialog?

i can link directly to NewForm.aspx but it does not open in a dialog. many thanks!

Mano Mangaldas said...

Thank you, very helpful information.

Octa said...

Hi, I have the same issue like blahhh. Did you find an answer?
Thx

jackob said...

This is a great blog. Thanks for all your hard work and the info you give. I am hoping you post again soon.I wish u keep on.
Thank You
SharePoint Custom Development

Rishi said...

Thanks it guided me to accomplish something similar :)
Cheers-Rishi

Praveen said...

Nice post.
Here is my article on closing the dialog.
http://praveenbattula.blogspot.com/2011/10/close-sharepoint-2010-dialog-through.html

Sunny said...

Hi,

I am trying to do the same, but got error. Please Help.

Jomit Vaghela said...

Sunny, can you provide the error details ?

AddIn