Using the Dialog framework in SharePoint 2010 – Part 3

If you have not gone through Part-1 and Part-2 of this series, I would recommend you reading them first and then continue reading from here on.

In this post, we are going to create our own page and then open the page with dialog framework and then handle Ok and Cancel event to that just like how we saw in previous post with library upload page.

Open your own project in Visual studio 2010. If you have not created a project, create an empty SharePoint project and add new item an application page. Give it a name like CustomPage.aspx. Visual studio will automatically map the page to layout folder.

All the dialog pages that open in SharePoint 2010 inherits from dialog.master file which is in TEMPLATE/LAYOUTS folder. So we also need to modify our markup to inherit the page from dialog.master.

We can remove the dynamicmasterpage file attribute from the page tag. We will see about this attribute in some future post. As of now, we simply remove it.

Now because we have changed the master page URL and we are referring to a different master page, all the content place holders which are on the page may not be there in the master page that we are now referring.

So we need to make the change in the content place holders as well.

Remove all these content tags.

When you are not sure, you always should check the master page content place holder IDs and the content place holder IDs present in content page. If there is any misplaced place holder, then you will not be able to work on the page. The page will not be rendered.

Add following content place holders to the page.

<asp:Content ID="Content1"  ContentPlaceHolderID="PlaceHolderDialogHeaderPageTitle" runat="server">Custom Dialog Box</asp:Content>  

 <asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">  

 <SharePoint:CssRegistration ID="CR1" runat="server" Name="ows.css" />  

 <SharePoint:ScriptLink ID="SL1" Language="javascript" Name="core.js" runat="server" />  

  <SharePoint:FormDigest ID="FormDigest1" runat="server" />  

 </asp:Content>  

 <asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderDialogImage" runat="server">  

   <img src="/_layouts/images/allcontent32.png" alt="" />  

 </asp:Content>  

 <asp:Content ID="Content5" ContentPlaceHolderID="PlaceHolderDialogBodyHeaderSection" runat="server">  

 </asp:Content>  

 <asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderDialogDescription" runat="server">  

   <div id="selectTermDescription" class="none-wordbreak">  

     <table class="ms-dialogHeaderDescription">  

       <tbody>  

         <tr>  

           <td>Description Goes here</td>  

         </tr>  

      </tbody>  

     </table>  

   </div>  

 </asp:Content>  

 <asp:Content ID="Content8" ContentPlaceHolderID="PlaceHolderHelpLink" runat="server">  

   <!-- We can remove the default help link from here --> 

 </asp:Content>  

 <asp:Content ID="Content6" ContentPlaceHolderID="PlaceHolderDialogBodyMainSection" runat="server">  

   You can create the entire HTML here to work on a page. Table layouts, controls etc.

 </asp:Content> 

Use the same OpenModelDialog method in your web part or any button on your custom page to open this layouts page.

  function OpenModalBing()

    {

        var options = {

            url: '/sites/SP2010/_layouts/SharePointActivities/CustomDialog.aspx',

            tite: 'Open a custom dialog',

            allowMaximize: false,

            showClose: true,

            width: 750,

            height: 550,

            dialogReturnValueCallback: FunctionToCall 

                      

        };

        SP.UI.ModalDialog.showModalDialog(options);

    }

function FunctionToCall(dialogResult, returnValue) {

        if (dialogResult == SP.UI.DialogResult.OK) {

            SP.UI.Notify.addNotification('OK was clicked');

            

        }

        if (dialogResult == SP.UI.DialogResult.cancel)

            SP.UI.Notify.addNotification('Cancel was clicked!');

    }

And this is what you get. You can see the default buttons OK and Cancel been added to the page. We thought have not hooked up any event to that.

Now because we have inherited our custom page from dialog master page hence we got the ok and cancel button on a page. We need to write a custom code to the ok and cancel button. So we need to hook up our code to ok button.

So let’s add some code to it. Open the cs file of our custom page and write down the following code to it.

public partial class CustomDialog : LayoutsPageBase

    {

        protected override void OnLoad(EventArgs e) {  

         if (Master is DialogMaster)  

         {  

             DialogMaster dialogMasterPage = Master as DialogMaster;

             dialogMasterPage.OkButton.Attributes.Add("onclick", "return OkButtonClicked();");  

         }  

         base.OnLoad(e);  

     }  

    }

Now we need to add this script to a aspx page. So open up aspx page and add the function script.

  <script language="javascript" type="text/javascript">

      function OkButtonClicked() {

          window.frameElement.commitPopup();     

      } 

 </script>

Now build and deploy the solution and see this in action.

Click cancel, the message appears and click ok, the message appears after clicking on cancel or ok. Window.frameelement.commitpopup closed the model dialog and passes the dialog option value based on ok or cancel button clicked.

Read further in Part-4 of this series.