Adding Silverlight page in SharePoint portal

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.
               

In this 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.

Create Silverlight Application

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 Silverlight Application

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 comments box.

Now 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
{
    public MainPage()
    {
            InitializeComponent();
            btnSubmit.Click +=
new RoutedEventHandler(btnSubmit_Click);

     }

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);

  }

else
  {

                
    String requireFields = String.Empty;
if (txtName.Text.Trim() == String.Empty)
  {

     requireFields += 
"Name" + Environment.NewLine;

   }

if (txtEmail.Text.Trim() == String.Empty)

 {

     requireFields += 
"Email" + Environment.NewLine;

   }

                
if (txtFeedback.Text.Trim() == String.Empty)

  {

      requireFields += 
"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 the project.
 

Add the XAP file to SharePoint portal

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” category 

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.

 Now if 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”
 

Conclusion

We will explore more areas of Silverlight and SharePoint collaboration in next articles.