Silverlight Client Object Model - Samples and Examples in SharePoint 2010

This is the post which belongs to the same series of the samples and examples of the Client Object Model in SharePoint 2010. So, this post I give you a start up examples for Silverlight Client OM.

Download the examples from here.
Download Silverlight Client OM examples and samples.

Let me know the feedback and if you need anything else.

SharePoint 2010 Silverlight Client Object Model - How to use

As part of the introduction series, I want to present the advantage of the client object model introduced in SharePoint 2010. There are great advantages with this model as it don't require SharePoint needs to be installed on the client machine. We just need to refer the client dlls which Microsoft SharePoint provides and based on them we will write code to communicate with SharePoint server. In this article we will go through Silverlight Client Object Model. If you want to know the other client object model types go here. ECMAScript and Managed client object models.

To communicate with the SharePoint server in Silverlight context we need to give two client SharePoint DLL references to the silver light project.

Silverlight 4 BETA is ready

Wow, this is completely unexpected and nice. They are calling it as a developer release. Plenty of features and tools. Check it right now.

http://www.silverlight.net/getstarted/silverlight-4-beta/

But some important points you need to know is, Silverlight 4 development is only on Visual Studio 2010. But, no problem Visual Studio 2010 can be installed side by side with Visual Studio 2008 SP1. So, get it and start play with it. Enjoy!!! with new finding and learning.

Microsoft Visual Studio 2010 – The great IDE in the IT world

Visual Studio 2010. wow!!! Lot of features. What a product from Microsoft. It has almost everything integrated for developing all technologies related to ASP.NET like Silverlight, ASP.NET, SharePoint, WPF and QA related. The version of ASP.NET supporting is framework 4.0. This is again a big change.
We will take a look at the features available in the Visual Studio 2010.
First I am a SharePoint guy, so I will start from SharePoint tools available in Visual Studio 2010.

• Till now, we have an option to add a new item for ASPX, ASCX, CSS, JS, Cs etc… Now we have an option to add a new web part project item and the Visual web part designer which loads a user control as a web part for SharePoint. Wow, how cool it is! Pretty much good.
• We have another fantastic facility for adding an event receiver for SharePoint List/Library/Site and using the wizard to choose the event receiver type. From this, it will create a source file with that event receiver. [Again no need of creating a special project and write everything manually.]
• A special explorer window which will pull information from the SharePoint sites like Lists, Libraries and other artifacts in SharePoint directly inside of Visual Studio when connected to a SharePoint site. It just like what we are seeing the team explorer in Visual Studio 2005/2008 when connected to Team Foundation server.
• We have a package explorer to configure WSP files, feature files and other package related files in SharePoint. This is good thinking by the team to keep track of all the solution we are using in a SharePoint site at one place. The key F5 will compile, build, debug and deploy the solution to the specific site or farm depending on the configuration.
• Till now if you want to create a SharePoint custom workflow we used to create a C# SharePoint workflow project and configure manually to implement it. But now, in this version they have added an ASPX workflow initiation form to a workflow project.
• We already know about the WSP builder. From which we can create the solution file easily without doing any extra configurations etc, etc. Visual Studio 2010 includes the WSP file import to create a new solution automatically.

Second, I like Silverlight technology and development. I will explain the Silverlight features available in Visual Studio 2010.

• While creating a Silverlight project you have an option to select the Silverlight version like 2.0 or 3.0
• A good and great news for Silverlight developers that Visual Studio 2010 supports for both Silverlight development and editable design surface. WOW!!! this is the best and great feature. Isn’t it? [Thanks to Microsoft. When i am developing Silverlight application I am always having a thought that why MS VS team didn't give option to edit the Silverlight objects in editor inside Visual Studio. If I need to edit any thing I always need to go to Microsoft Expression Blend. But now editor is available inside it.]
• More features available with Silverlight 3.0 in Visual Studio 2010. We will discuss this in upcoming blog posts.

Another feature that Visual Studio 2010 is integrated a great module for testing [QA].  You can take a look at it here.

The final feature is very cool feature that the new look for Visual Studio 2010. Very good rich and cool UI and very good user experience. I will come with another post that will give you good information about it with nice screen shots.

I think this information will help you to understand the features about Visual Studio in different scenarios. Keep an eye on the blog for more updates.

Read xml from web page and bind the data to Silverlight module.

Some times we have requirements in SharePoint that we need to pull images from SharePoint library and display those images in Silverlight module with rich UI. But we know that Silverlight runs on client side, we can't access the SharePoint libraries in the Silverlight projects because of permission issues as well.
So, here we build an architecture that SharePoint will build the XML for us and write it on the page and Silverlight grabs the XML from the page and displays the images on the UI. How nice it is. You can get the first part i.e. get xml (image) data from the SharePoint libraries here.

Here, we are discussing about the code we need to place in Page.xaml.cs file to read xml from web page.

public Page()
{
string controlid = "divImgs"; //You can also use intiparams of Silverlight params to get the id.
InitializeComponent();

string xmlstring = string.Empty;
if (controlid != null)
{
HtmlElement ctl = HtmlPage.Document.GetElementById(controlid);
if (ctl != null)
xmlstring = (string)ctl.GetProperty("innerHTML");
}

if (!string.IsNullOrEmpty(xmlstring))
{
ProcessXML(xmlstring);
}
}

The above code is the Page constructor of the Page. Xaml.cs file.
1. Here, we are catching the control on the HTML document and reading it's HTML. if you remember, while coverting the data view web part data from HTML to XML, in the XSLT i assigned an id for a html tag called "divImgs". We are using this id here in the cs file, and reading the HTML, obviously it will get the xml data to the xmlstring variable.
2. No, we need to process the XML and bind the data to the silverlight control. This is why i am calling a function called "Process XML".

private void ProcessXML(string xml)
{
images = new List<string>();
if (xml != string.Empty)
{
try
{
StringReader textStream = null;
textStream = new StringReader(xml);

if (textStream != null)
{
using (XmlReader reader = XmlReader.Create(textStream))
{
while (!reader.EOF)
{
if ((reader.IsStartElement()) && (reader.LocalName == "slides"))
{
if (reader.HasAttributes)
{
reader.MoveToAttribute("baseUrl");
}
}
else
{
if ((reader.LocalName == "slide") && (reader.HasAttributes))
{
reader.MoveToAttribute("imageUrl");
string imageName = reader.Value.ToLower();
if ((imageName.Contains(".jpg")
|| imageName.Contains(".png")))
images.Add(reader.Value);
}

}
reader.Read();
}
}
}
}
catch (Exception ex)
{
}
}
}

3. In the above code, images is the global variable of type List<string>. We are filling this object with the image urls by reading the xml string.
4. Now by calling the ProcessXML function, we are done with getting image urls. So we have collection of image urls, and use this object to give input as the Silverlight module controls and display on the UI.

Very simple and nice.
Happy coding!!!

Show images in Silverlight by reading images from SharePoint library

Hi,
Silverlight works on client side, so it's not possible to add SharePoint libraries in Silverlight project. But we have a way that we can access SharePoint data and show it up in Silverlight in SharePoint site.
We have a requirement where we need to pull data from the SharePoint libraries and lists and show the data in Silverlight. Here i will explain a scenario where we can pull the images from image library and show it in Silverlight.

Follow the steps below to do this.
Get data from SharePoint library and make it in the form of XML.

1. Go to the page where we want to show the Silverlight module on the site or create a new page.
2. Open the page in SharePoint designer.
3. Add a data view web part to the page some where in web part zone.
4. Select the data source library from Task Pane menu.
5. Select the library/list from the data source library where your images are present.
6. Click on the library and select Show Data.
   
7. Select the columns, which refer the Title, Image Path etc you want to show in Silverlight from Data Source details task pane.
8. Select the option Insert select fields as "Multiple item view". So now our data view web part is filled with the data. [If you want apply some properties like show images in asc order etc..]
9. After selected the columns, apply a filter to get only images from the library/lists. we can do this by selecting the filters option from the data view web part.
10. Here, select the image title or url column in the field name, in comparison select contains and here enter valid formats Silverlight allows in the value field.
    
11. Save the page and open it in the browser [IE].
12. Till now what we did is, we are getting the data from the SharePoint library/Lists and showing up it in the data view web part and it renders as a table.
13. Now, we need to change the XSLT of the data view web part to get the table format of data as the XML format. We have XSLT, so we can easily do that.
14. Add the below XSLT code to the data view web part by going to edit for the web part and modify settings --> XSL editor.
15. Remove text in the editor and add this code.
16. <xsl:stylesheet x="http://www.w3.org/2001/XMLSchema" d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" prefixes="xsl msxsl ddwrt" ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" asp="http://schemas.microsoft.com/ASPNET/20" __designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xsl="http://www.w3.org/1999/XSL/Transform" msxsl="urn:schemas-microsoft-com:xslt" sharepoint="Microsoft.SharePoint.WebControls" ddwrt2="urn:frontpage:internal"><br /> <xsl:output method="html" indent="no"><br /> <xsl:decimal-format nan=""><br /> <xsl:param name="dvt_apos">'</xsl:param><br /> <xsl:variable name="dvt_1_automode">0</xsl:variable><br /> <xsl:template match="/" x="http://www.w3.org/2001/XMLSchema" d="http://schemas.microsoft.com/sharepoint/dsp" asp="http://schemas.microsoft.com/ASPNET/20" __designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" sharepoint="Microsoft.SharePoint.WebControls"><br /><div id="slideshow" style="text-align:center"><br /><xsl:text escaping="yes"><br /><![CDATA[ <style type="text/css">#slideshow{text-align:center;}</style><br />]]></xsl:text><br /></div><br /><xsl:call-template name="dvt_1"><br /></xsl:template> <xsl:template name="dvt_1"><br /><xsl:variable name="dvt_StyleName">Table</xsl:variable><br /><xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"><br /><xsl:text escaping="yes"><script id="divImgs" type="text/xml"></xsl:text><br /><xsl:call-template name="dvt_1.body"><br /><xsl:with-param name="Rows" select="$Rows"><br /></xsl:call-template><br /><xsl:text escaping="yes"></script></xsl:text><br /></xsl:template> <xsl:template name="dvt_1.body"><br /><xsl:param name="Rows"><br /><xsl:text escaping="yes"><slides baseUrl=""></xsl:text><br /><xsl:for-each select="$Rows"><br /><xsl:call-template name="dvt_1.rowview"><br /></xsl:for-each><br /><xsl:text escaping="yes"></slides></xsl:text><br /></xsl:template> <xsl:template name="dvt_1.rowview"><br /><xsl:text escaping="yes"><slide imageUrl="</xsl:text><br /><xsl:value-of select="@FileLeafRef"><xsl:value-of select="@Name"></xsl:value-of><br /><xsl:text escaping="yes">"/></xsl:text><br /></xsl:template> </xsl:stylesheet>
    
17. If you observe i am pulling some values from the data view and making xml.
    
18. Now, when you save the web part and see the page, you can't see anything in the data view web part, because now your data is in the format of xml.
19. You can see this by doing view source and search for "
20. We are done with part 1 now. i.e. getting data from SharePoint library. Now we will move to second part.

Get XML from the page and give that as input to Silverlight module:
At this point, we got the xml i.e. xml is on the page, now we need to read the xml from the page in the silverlight project and display the images as we want by applying animations, styles etc..
You can see the part 2 here.