How to: Create a sample dialog using SharePoint 2010 (Part1: Javascript/Ecmascript)

Hi all, 

SharePoint 2010 sports a brand new fluent user interface. In SharePoint 2007 has commands all over user interface where its Welcome menu, Site Actions menu, List Actions, ECB for list items and end users have tough time to figure out where to find an appropriate command. Page loads happens every time if user have to add a new list column etc.  

SharePoint 2010 comes with some called as Server Ribbon which is contextual and developers can extend it furthermore. Its consistent, streamlined and end user have similar and intuitive office applications interface. Additionally, if use want to work on any site asset such as lists, web part etc., they have to directly go to top of screen and do some necessary actions.

It also improves on status bar and notification area. Developers can write some new places where we use JavaScript without doing a server postback. In short, developers have to learn a new skill set if they are not familiar with JavaScript as SharePoint 2010 heavily uses JavaScript.

They also some with a new Dialog Framework. The main motive of dialog framework is to minimize the postbacks and its uses a modal dialog to interact with user. Technically, the dialog is already there on the page and its hidden. Only when user clicks on an item such as "New Item" in a list, it just pops up as a modal dialog. Modal dialog is used everywhere in SharePoint 2010 such as New Items in lists, document libraries, announcements, editing and deleting items etc. It uses Client Object Model. Microsoft took a different approach and developed a "Client Object Model" and exposed in three different flavors in consistent developer experience across platforms namely:

1) ECMAScript/JavaScript
2) .Net.
3) SilverLight. 

In this post I will cover JavaScript module of the client object model. .NET and SilverLight in subsequent posts.

So, lets get started: 

Step1: We first create a New Project in Visual Studio 2010  Beta 2/RC >> Choose "SharePoint 2010" as base template >> select "Empty SharePoint Project" >> Name" DialogSample and click OK. . Please note that choose only .NET framework 3.5.  

Step2: Verify the site you want to debug and choose  "Deploy as a farm solution". 

Step3: Right click on the "DemoSample" >> Add >> "SharePoint Layouts Mapped Folder"

Step4: Under Layouts folder a new folder will be generated "DemoSample" automatically. 

Right click on DemoSample folder >> Add >> Create an application page named "AppPage.aspx". Also, create a html page named "MyDialog.htm"

Step5: We add our JavaScript in "AppPage.aspx". By default, there be 3 content placeholder in AppPage.aspx. 


1) ContentPlaceHolder="PlaceHolderAdditionalPageHead" - allows us to embed head element such as CSS styles and in our case it will be JavaScript file. 
2) ContentPlaceHolder="PlaceHolderMain" - allows us to write in the body area.  In our example we just add button.
3) ContentPlaceHolder="PlaceHolderPageTitleInTitleArea" - allows us to write in title area.

We write our Dialog in "PlaceHolderAdditionalPageHead" as JavaScript. 
Lets view the JavaScript: 


----------------------------------------------------------
<script type="text/javascript">
    function OpenDialog() {
        var options = SP.UI.$create_DialogOptions();
        options.url = "/_layouts/DialogDemo/MyDialog.htm";

        options.width = 400;
        options.height = 300;
        options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
        SP.UI.ModalDialog.showModalDialog(options);
    }

    function CloseCallback(result, target) {
        alert("You called me!");
    }
</script>
-------------------------------------------------------

Visual Studio 2008/2010 supports JavaScript debugging and you can view an excellent tutorial by Joe Stagner. Therefore function, var etc. are automatically available by Visual Studio 2008/2010 IntelliSense. Apparently, SharePoint 2010 has lot of java scripts in layouts folder such as sp.js, sp.debug.js etc and can be found on "C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\SP.js, accessible at /_layouts/SP.js. 


SP.JS is unreadable as its Client Model is written by a script named "Script#". The reason for minimized the file is due to increasing the performance. What is mean for developer that they could not leverage this file. But SharePoint 2010 provides a corresponding file named SP.DEBUG.JS. This file has all prototypes and developers can use file to use in their pages and scripts. Therefore, when I wrote the function OpenDialog() as would not be a IntelliSense for client model.* I had to refer to "SP.DEBUG.JS"   


Note: If someone knows how to enable IntelliSense for client model in Visual Studio 2010, please let me know. 


When the user clicks on the "Show Dialog" button, function "OpenDialog()" will be triggered. Now, SP.UI are javascript methods that are made available by javascript that is behind the standard master pages. Variable "options" have properties such as url that be opened by the dialog, width, height etc. 


Another property is "dialogReturnValueCallback" and if someone closed the dialog, we will show an alert. Finally, we pass in all the "options" object to SP.UI.ModalDialog.showModelDialog. 

Step6: Build and Deploy the WSP.

Step7: We can also debug javascripts in VS2010 as well. Put the breakpoints in javascript functions and press F5.

Step8: We have have to clear debugging in IE as well. Tools >> Internet Options >> Advanced>> Clear javascript under Browsing section.

Step9: Locate the AppPage.aspx page, http://sp2010/sites/SP2010/_layouts/DemoSample/AppPage.aspx and click on "Show Dialog" buton.

Step10: Also, when we clcik on "Show Dialog" button, we can debug the javascript code as well.

Step11: We can also set the option.url to a public site too.

Cheers,
--aaroh

Download code here.