SharePoint is a widely used frameowrk to support various enterprise applications. Now the collaboration between SharePoint and Silverlight adds a rich user interface for the same.
In this article we will discuss about how to create a simple
page in SharePoint portal with Silverlight.
We can create Silverlight component and embed it into a SharePoint, just
by uploading the “XAP” file into portal and use the same when creating a site
page in portal. This tutorial will not train or guide something on Silverlight
or SharePoint, assuming readers are already having some basic knowledge on
both. Let’s start with a simple example.
example we will create a Silverlight application that will take feedback or
comments of users by providing a form. Then we will add this Silverlight
component into a SharePoint portal’s new site page, which is already created.
First we need to create a
Silverlight application that has a form to take feedback. Open Visual Studio
2010 and select new project and select “Silverlight application” from
templates. If you want to test the Silverlight component visual studio will
create a sample website to do so when you select the option that is provided
when creating Application.
Design and Code for
Once you create a Silverlight
application, you will be provided a “MainPage.xaml” file, in which we can add
controls to form a feedback form. I will
be adding controls to enter Name, email, website (optional) and feedback or
add the functionality in the code behind file, to validate and save the
information provided in the controls to some data source like SQL Server
database. In my sample code I have added an event for the submit button to
check if user has entered values for required fields like Name, Email and
Feedback and show a message box accordingly.
If you have added code to connect to some database, you can change or add the
connection string later to SharePoint portal also.
public partial class MainPage : UserControl
protected void btnSubmit_Click(object sender, RoutedEventArgs e)
if (txtName.Text.Trim() != String.Empty && txtFeedback.Text.Trim() != String.Empty && txtEmail.Text.Trim() != String.Empty)
//Add the logic to save feed back to XML or DB or any datasource
MessageBox.Show("Thank you for your valuable feedback!", "Feedback Submited", MessageBoxButton.OK);
String requireFields = String.Empty;
if (txtName.Text.Trim() == String.Empty)
"Name" + Environment.NewLine;
if (txtEmail.Text.Trim() == String.Empty)
"Email" + Environment.NewLine;
if (txtFeedback.Text.Trim() == String.Empty)
"Feedback/suggestion" + Environment.NewLine;
if (requireFields != String.Empty)
MessageBox.Show("Please provide following details"+Environment.NewLine + requireFields, "Missing data", MessageBoxButton.OK);
Once you have added code, you can
run the application to test it in the sample test page created by Visual
Studio. Once tested build the application in “release” mode and copy the “.xap”
file from the release folder. Usually the xap file created will be with name of
Add the XAP file to
Now open the SharePoint portal,
remember you should be a site owner to add or create site pages. In my example i am using a team site created
from existing site templates. Upload the xap file into “Share Documents”
library or some shared location which is accessible. Now copy the URL for the document, for example
http://sharepointsite:2020/Shared%20Documents/%20Feedback_Form.xap , which will be used later.
Create “Feedback” site
page in SharePoint portal
Go to site pages in SharePoint
portal and “Add a new page” and name it
“Site_Feedback” or some name you would prefer.
Now, it will open to add controls
or web parts in deign mode, go to “Insert” tab and Click “Web part” and browse
for “Silverlight web part” which can
be found in “Media and Content”
After selecting the “Silverlight web part” it will prompt
for the URL or the XAP file, enter the URL which we have saved earlier. This
will add the feedback Silverlight application component in the page as web part
and you can modify the properties of the web part like title, display and
layout etc. After editing the properties click “Save and Close” button on the top left corner under page tab. And
that’s it you have just created a site page in SharePoint with silver
light. You can provide the direct link
or add this in the site navigation as per your site design and requirement, so
that users can browse the page.
you have any connection strings associated to silver light application, one way
to update the same in SharePoint is to add the connection string in SharePoint
web.config file, for more information visit “How
can you set your ConnectionString on your Web part”
We will explore more areas of Silverlight and SharePoint
collaboration in next articles.