-->

Monday, 18 June 2012

View the Page in the Sharepoint Modal Dialog with Branding/Styling

In this article, I will explain how to open a page in a Sharepoint 2010 Modal Dialog box. Something like this,


But the first Question is Why use Sharepoint 2010 modal dialog ?


Why ?
  • Reduces the scrolling on the page, if you have a complex custom form which requires lot of input data
  • Ease to use
  • Avoid Redirection of pages
  • Provides details/form on a single screen
How ?

It can be used with a simple Javscript code. Below is the code snippet.

<script type="text/javascript">

function openModalURL(url, title, width, height, callbackType, isMax) {
        var opmlPath = GetSelectedNode();
        var options = SP.UI.$create_DialogOptions();
        options.url = url;
        options.title = title;
        options.width = width;
        options.height = height;
        options.showMaximized = isMax;
        if (callbackType == 'NotificationCallback') {
            options.dialogReturnValueCallback = NotificationCallback;
        }
        else if (callbackType == 'SilentCallback') {
            options.dialogReturnValueCallback = SilentCallback;
        }
        else if (callbackType == 'RefreshCallback') {
            options.dialogReturnValueCallback = RefreshCallback;
        }
        SP.UI.ModalDialog.showModalDialog(options);
    }
function NotificationCallback(dialogResult, returnValue) {

        if (dialogResult == SP.UI.DialogResult.OK) {
            SP.UI.Notify.addNotification('Operation succeeded', false);
        }
        else if (dialogResult == SP.UI.DialogResult.cancel) {
            SP.UI.Notify.addNotification('Operation cancelled', false);
        }
        else if (dialogResult == SP.UI.DialogResult.invalid) {
            SP.UI.Notify.addNotification('Operation invalid', false);
        }
    }
    function SilentCallback(dialogResult, returnValue) {

    }
    function RefreshCallback(dialogResult, returnValue) {
        location.reload(true);
    }
</script>

All you have to do is to call this function on the ClientClick event of your button.

Like this,

<asp:Button ID="btnOpenDialog" Text="Open Dialog" runat="server"                                OnClientClick="javascript:openModalURL('../Sitepages/DialogExample.aspx','Sample Dialog', 400, 250, 'SilentCallback','false'); return false;" />

In the above example I have specified three types of Callback option on the close event of the modal dialog
  1. NotificationCallback - This will notify the user on the landing page using the notification on the notification bar based on the action taken by user.
  2. SilentCallback - This will silently close the modal Dialog box without doing anything on the parent page.
  3. RefreshCallback - This option will refresh the page when the Dialog box is closed.
You can explore more options for the modal dialog over here.

Now the Branding/Styling part,

Most of the styling of modal dialog are controlled by following classes. You can view it using IE Developer Toolbar 


I have modified the basic styling to make it suitable to stylesheet of my site.

<style type="text/css">
    .ms-dlgOverlay
    {
        background-color: #676767
    }
    .ms-dlgContent
    {
        border: 0;
    }
    .ms-dlgBorder
    {
        border: 1px solid #0087C1;
    }
    .ms-dlgTitle
    {
        background-color: #0087C1;
    }
    .ms-dlgTitleText
    {
        display: block;
        font-weight: bold;
        font-size: 13px;
        padding: 7px;
    }
</style>


I Hope this article was informative. Happy Sharepointing !

Please do Share/Like/Comment if this article was helpful.