Client Side and Modal Dialogs in Sharepoint 2010

In previous versions of Sharepoint we always have some limitations with the forms we wanted to display in our farm. InfoPath was a great solution, but sometimes Software Developers had to understand the limitations of this product and try to find workarounds for some solutions, until Sharepoint 2010 arrived…
On the other side, Modal dialogs can be used as a really powerful weapon to interact with external applications, without leaving the actual Sharepoint suit.
I have seen some posts on the Internet trying to build the impossible with this new feature, but to be honest, if you are a real programmer you should be ok with a simple “hello world” application to see exactly what you can do with it.
I am going to try to make the everything really simple so you can understand where we going and why, but first let’s go to see the features of this platform.
Dialog Platform Features
- Many operations on Sharepoint data are now performed in client-side dialogs (ie: Default New and Edit forms for list data)
- Client dialogs run in the user’s browser (interact with Sharepoint through the JavaScript implementation of the client object model)
- Client dialogs typically contain HTML mark-up, input controls and JavaScript functions.
- AJAX-style communication does not require page post-backs (Responsive, efficient, Web 2.0-style dialogs)
What do we need?

1- Visual Studio 2010
2- Sharepoint 2010 (server)
3- Some JavaScript, HTML and C# skills.
4- You.
What are we going to build?
A WebPart which contains a simple link. When you click in the link a simple Modal dialog box will be displayed.
This dialog box will have a three buttons and one textbox.
When you click in one of them it will display “hello world I am in the text box”, the other one will replicate a “Hello World from a JavaScript function” and the last one will close the form. Ah! if you click in the cross of the dialog box it will display “I am going to be closed by you,bye” .
This is very basic stuff, but I am sure you will have better ideas of how to implement more features.
This is what I have in mind anyway:

Step by Step Development
1- Open Visual Studio 2010
2- Go to File->New->Project
3- Select “Empty Sharepoint Project” and in the name type netsourcecodemodaldialog click OK


4- Because we are going to deploy a Visual webpart we will need to deploy the solution as farm solution, so just select that option, and click on Finish:

5- Go to your project (netsourcecodemodaldialog), right click Add->New Item->Visual Web Part. In the name box type VisualWebPartModalCaller click on “Add”.
6- Now right click on Feature1, Rename and set it to ModalDialogFeature
7- The next step will be to add an Application page to our project. This Application Page will contain the layout of the modal dialog and the logic.
8- Go to your project Right click-> Add –> New Item…-> Sharepoint -> 2010 –> Application Page. Call it NetSourceCodeModalDialogPage.aspx click on Add.

9- Now! let’s go to add the link into our Visual Web Part.
10- Next step will be to create a link in our Visual Web Part so we can click on there and go to shiny application page.
11- Go to VisualWebPartNetsourcecodemodaldialogUserControl.ascx and double click. Remove what you have and add this code (Ah! dont foget to type the name of your server+site in the “options.url” property):

1: <%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
2: <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
3: <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
4: <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
5: <%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
6: <%@ Import Namespace="Microsoft.SharePoint" %> 
7: <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
8: <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="VisualWebPartModalCallerUserControl.ascx.cs" Inherits="netsourcecodemodaldialog.VisualWebPartModalCaller.VisualWebPartModalCallerUserControl" %>
9: 
10: <script type="text/javascript">
11: 
12:     //Dialog opening 
13:     function OpenDialog() {
14:         var options = SP.UI.$create_DialogOptions();
15:       //options.url = "/_layouts/netsourcecodemodaldialog/NetSourceCodeModalDialogPage.aspx";
16:         options.url = "http://xxxTYPEYOURSERVERHERExxx/_layouts/netsourcecodemodaldialog/NetSourceCodeModalDialogPage.aspx";
17:         options.width = 400;
18:         options.height = 150;
19:         options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
20:         SP.UI.ModalDialog.showModalDialog(options);
21:     }
22: 
23:     var messageId;
24: 
25:     // Dialog callback 
26:     function CloseCallback(result, target) {
27: 
28:         if (result === SP.UI.DialogResult.cancel) {
29:             alert("I am going to be closed by you,bye");
30:         }
31:     }
32: 
33: </script>
34: 
35: <br /> <a href="Javascript:OpenDialog();">Start Modal Dialog</a>

12- Now we have the link ready, and one example that implements and Asynchronous call when we do something with the dialog.

13-  Go to you NetSourceCodeModalDialogPage.aspx page double click, remove the code you have and copy and paste this code:

1: <%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
2: <%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
3: <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
4: <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
5: <%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
6: <%@ Import Namespace="Microsoft.SharePoint" %>
7: <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
8: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NetSourceCodeModalDialogPage.aspx.cs" Inherits="netsourcecodemodaldialog.Layouts.netsourcecodemodaldialog.NetSourceCodeModalDialogPage" DynamicMasterPageFile="~masterurl/default.master" %>
9: 
10: <asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
11: 
12: </asp:Content>
13: 
14: <asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
15: 
16: <%--######################################################################################################################################################
17: <%--REMEMBER ALL THE UI MUST BE INSIDE THIS PLACE HOLDER--%>
18: <%--###########################################################################--%>
19: 
20: <%--## Asp controls can be called--%>
21: <asp:Button ID="Button1" runat="server" Text="Display Message in TextBox" OnClick="Button1_Click" />
22: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
23: 
24: <br />
25: <br />
26: <br />
27: 
28: <%--## HTML controls can be called--%>
29: <center>
30: <input  type="button" value="Display a JavaScript Message" onclick="Button_Click()" />            
31: </center>
32: 
33: <%--## JavaScript for the clien-side logic--%>
34: <%--## notice you can use the SP. libraries to interact with Sharepoint--%>
35: <script type="text/javascript">
36:     function Button_Click() 
37:     {
38:         alert("Hello World from a JavaScript function");
39:     }
40: </script>
41: 
42: <%--#########################################################################--%>
43: 
44: </asp:Content>
45: 
46: <asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
47: NetSourceCodeModalDialogPage v1.0
48: </asp:Content>
49: 
50: <asp:Content ID="PageTitleInTitleArea" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server" >
51: Net Source Code Modal Dialog
52: </asp:Content>
53: 

14- Let’s go to implement our ASP.NET event, so go to NetSourceCodeModalDialogPage.aspx.cs, double click, remove the code and copy paste this one:

1: using System;
2: using Microsoft.SharePoint;
3: using Microsoft.SharePoint.WebControls;
4: 
5: namespace netsourcecodemodaldialog.Layouts.netsourcecodemodaldialog
6: {
7:     public partial class NetSourceCodeModalDialogPage : LayoutsPageBase
8:     {
9:         protected void Page_Load(object sender, EventArgs e)
10:         {
11:         }
12: 
13:         protected void Button1_Click(object sender, EventArgs e)
14:         {
15:             TextBox1.Text = "hello world I am in the text box";
16:         }
17:     }
18: }

15- The next step will be going to your site and add the webpart. The webpart should be called “VisualWebPartCaller”:



Now you can click on “Start Modal Dialog” and you should get this screen:



Beautiful, isn’t it?

Conclusion

Modal dialogs will fit really well in complex Sharepoint infrastructures, where users and Sharepoint architechs need to go to the extra mille. With this approach complex User Interfaces can be used to simplified dialogs and integrate with the Sharepoint workspace using Site Menus or Ribbon Controls.

Code

I have left the Visual Studio 2010 project in this address (MegaUpload): Download