Sharep10nt

All About SharePoint 2010/2013

  Home  |   Contact  |   Syndication    |   Login
  23 Posts | 0 Stories | 0 Trackbacks

News

Exploring SharePoint 2013 Online

Developing Nintex Workflows

Exploring SharePoint 2013

Acquired MCPD : SharePoint 2010 Developer

Share on Facebook

Article Categories

Archives

Post Categories

SharePoint 2010 provides pretty good dialog framework. Throughout SharePoint sites, Dialog framework has been used to avoid page redirections and keep user in same page. In SharePoint 2007 with help of Lightbox/JQuery, dialog framework can be enabled and used. But it has some limitations and time consuming.

So how to open a page in Dialog framework? Well, It's pretty simple. Just add Content Editor webpart in the page and add the below code.

<script type="text/javascript">

//User Defined Function to Open Dialog Framework
function OpenDialog(strPageURL)
{
  
var dialogOptions = SP.UI.$create_DialogOptions();
  dialogOptions.url = strPageURL;
// URL of the Page
  dialogOptions.width = 750; // Width of the Dialog
  dialogOptions.height = 500; // Height of the Dialog
  dialogOptions.dialogReturnValueCallback = Function.createDelegate( null, CloseCallback); // Function to capture dialog closed event
  SP.UI.ModalDialog.showModalDialog(dialogOptions); // Open the Dialog
  return false;
}

// Dialog close event capture function
function CloseCallback(strReturnValue, target)
{
  if (strReturnValue === SP.UI.DialogResult.OK) // Perform action on Ok.
    {
   alert("User clicked Ok!");
    }
  if (strReturnValue === SP.UI.DialogResult.cancel) // Perform action on Cancel.
   {
   alert( "User clicked Cancel!");
   }
}

</script>

Now to open a page just provide link as

Just change the URL and provide as many links required.

<a href="/_layouts/settings.aspx" onclick="return OpenDialog('/_Layouts/settings.aspx');">Site Settings</a>

When any page invoked to open in Dialog Framework then SharePoint will pass isDlg=1 as parameter with URL. This Parameter can be passed manualy to any page and SharePoint will detect it and applies /_layouts/styles/dlgframe.css instead of CoreV4.css(the default css applied in all SharePoint Pages). The Difference between dlgframe.css and CoreV4.css is the Top bar and Quicklaunch are made hidden in dlgframe.css with CSS { Display:none; }. So If you open any Sharepoint page in Modal Dialog then you won't get Top Bar and Quick Launch.

Note: It's applicable only to Webparts Pages. If you open any Wiki Page in Modal Dialog then SharePoint will throw error "The Ribbon Tab with id: "Ribbon.Read" has not been made available for this page or does not exist.". So if you want to open a page in Modal Dialog then use "Site Actions -> More Options -> Page -> Webpart page". In this page you can add Content Editor Webpart and add your content.

posted on Wednesday, November 17, 2010 5:50 PM

Feedback

# re: How to open a page in SharePoint 2010 Dialog Framework? 2/18/2011 8:27 PM Kali
This really helped. Thank you

# re: How to open a page in SharePoint 2010 Dialog Framework? 11/3/2011 3:39 PM sudheer
Hi!

Thanks for the article.
I visited so many sites and came to find some valuable and important point : "It's applicable only to Webparts Pages. If you open any Wiki Page in Modal Dialog then SharePoint will throw error". Thanks.

Is there any workaround for this limitation. i.e., i want to show my custom modal dialogs in wiki pages. Please let me know any solution.


Regards,
PVSAVSG.

# re: How to open a page in SharePoint 2010 Dialog Framework? 11/10/2011 10:48 PM Tabares
Nice post, it is very useful, but i want load a dialog when open the page, with some hint about that site, and close, with option "Dont show again".

Thank you!!!

# re: How to open a page in SharePoint 2010 Dialog Framework? 12/15/2011 10:34 PM Andrey
Great post! Easy to use and very useful!

# re: How to open a page in SharePoint 2010 Dialog Framework? 7/26/2012 4:33 PM Srinivas Indukuri
Excellent post!, This makes my life easy.
Thanks for this article.



# re: How to open a page in SharePoint 2010 Dialog Framework? 9/7/2012 5:10 AM Wendy
Great post! I love it.

# re: How to open a page in SharePoint 2010 Dialog Framework? 10/3/2012 1:42 AM Mathi
Thanks a ton. This worked perfectly for me.

# re: How to open a page in SharePoint 2010 Dialog Framework? 11/7/2012 9:08 PM Alex
Thank you so much!!!

# re: How to open a page in SharePoint 2010 Dialog Framework? 6/3/2013 2:56 PM manish patil
Hi,
This article is really worth especially the footnote. It was real savior for me.
Is there any documentation available on this issue. Please share if you have.
Thanks a ton.
Manish Patil

comments powered by Disqus