How to: Showing all the lists in a site using SharePoint 2010 (Part 2: Javascript/Ecmascript)

Hi All, 

Using SharePoint 2010 comes up with a new client object model and gives a far better user experience to end users. In this post, I will show a very simple illustration where we can use javascript. What it does is it shows users all the lists in a particular site. The steps are very similar to my last post and I am not showing all the screen-shots here. 

So, lets get started: 

Step1: We first create a New Project in Visual Studio 2010  Beta 2 >> Choose "SharePoint 2010" as base template >> select "Empty SharePoint Project" >> Name "ClientOM" 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 "ClientOM" >> Add >> "SharePoint Layouts Mapped Folder" 

 

Step4: Under Layouts folder a new folder will be generated "ClientOM" automatically. Right click on ClientOM folder >> Add >> Create an application page named "AppPage.aspx". 

Step5: We add our JavaScript in "AppPage.aspx". 

There are few things to be noted here: 

a) We have to add the ScriptLink control and it will refer "sp.js" library. This control will register to the page so that we can work with client model. Please note that when you type in <SharePoint , the intellisense kicks in immediately. 

b) We create a javascript function named "execClientOM". It will get current client context, get the reference to the site we are working on, loads all the lists for the current site, and finally execute the query. There would be two delegates for "OnSuccess" and "OnFailure" to display to the users if the operation executed or not. 

c) In "OnSuccess" function, we display the site title and number of lists.  

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: Locate the AppPage.aspx page, http://sp2010/sites/SP2010/_layouts/ClientOM/AppPage.aspx and click on "Exceute Client OM" button.

Cheers, 

--aaroh 

Download the source here.