Exercise 2: Deploying the Silverlight Application to SharePoint 2010

Task 1 – Create a WSP to Deploy the Silverlight Application

In this task, you will add a SharePoint 2010 project to the solution to deploy the Silverlight application to SharePoint 2010.

1. In the Visual Studio 2010, click File>> Add >> New Project to create a new project.
2. In the Installed Templates section, select Visual C# >> SharePoint >> 2010 and choose Empty SharePoint Project.
3. In the Name: textbox, enter TimeEntrySearch.
4. In the Location: textbox, enter C:\%Office365TrainingKit%\4.1\Source\Before and click OK.
5. In the SharePoint Customization Wizard, enter the URL of the on premise site you created for this session, e.g. https://intranet.contoso.com/Lab04.
6. Select Deploy as a sandboxed solution and click Finish.
7. Right-click the TimeEntrySearch project and choose Add >> New Item.
8. Select Visual C# >> SharePoint >> 2010 >> Module.
9. In the Add New Item dialog, under Name:, enter Silverlight and click Add.

10. Open the Elements.xml file included in the Silverlight module and replace the contents with the following Xml. This includes the output of the TimeEntrySearchSL Silverlight application (the TimeEntrySearchSL.xap file) in the Silverlight module.

    (Code snippet 4.1.5)

    Xml

    <?xml version="1.0" encoding="utf-8"?> <Elements xmlns="https://schemas.microsoft.com/sharepoint/"> <Module Name="Silverlight" Url ="SLXap"> <File Path="TimeEntrySearchSL.xap" Url="TimeEntrySearchSL.xap" Type="GhostableInLibrary"/> </Module> </Elements>

11. Right-click the Silverlight module and select Properties.

12. Click on Project Output References row and click the ellipsis button to open the Project Output References dialog.
13. Click Add and select a new project output reference.
14. Under Members:, select the TimeEntrySearch project.
15. Select the Project Name dropdown under TimeEntrySearchSL properties, and select TimeEntrySearchSL in the right panel.

16. Select ElementFile in the Deployment Type drop down list.

17. Expand the Deployment location row.
18. Delete the value in the Path row.
19. Click OK to exit the dialog.
20. Save the Elements.xml file.

Task 2 – Add a Module to Deploy a Custom ASPX Page to Host the Silverlight Web Part

In this task, you will create and add a module to deploy a custom ASPX page which includes a Silverlight Web Part configured to display the new Silverlight application.

1. Right-click the TimeEntrySearch SharePoint project and choose Add >> New Item.
2. Select Visual C# >> SharePoint >> 2010 >> Module.
3. Name the module CustomPages.
4. Click Add.

5. Open the Elements.xml file included in the CustomPages module and replace the content with the following Xml:

   (Toolbox code snippet 4.1.6)

   Xml

   <?xml version="1.0" encoding="utf-8"?> <Elements xmlns="https://schemas.microsoft.com/sharepoint/"> <Module Name="CustomPages" Url="SitePages"> <File Url="TimeEntrySearchSL.aspx" Path="CustomPages\TimeEntrySearchSL.aspx" Type="Ghostable"> <Property Name="Title" Value="Silverlight Client Side Object Model Time Entry Search" /> <Property Name="Description" Value="Silverlight Web Part to retrieve time entries for a project using the Client Object Model" /> <AllUsersWebPart WebPartOrder="1" WebPartZoneID="Main" ID="TimeEntrySearchSLWP"> <![CDATA[ <webParts> <webPart xmlns="https://schemas.microsoft.com/WebPart/v3"> <metaData> <type name="Microsoft.SharePoint.WebPartPages.SilverlightWebPart, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" /> <importErrorMessage>Cannot import this Web Part.</importErrorMessage> </metaData> <data> <properties> <property name="HelpUrl" type="string" /> <property name="AllowClose" type="bool">True</property> <property name="ExportMode" type="exportmode">All</property> <property name="Hidden" type="bool">False</property> <property name="AllowEdit" type="bool">True</property> <property name="Direction" type="direction">NotSet</property> <property name="TitleIconImageUrl" type="string" /> <property name="AllowConnect" type="bool">True</property> <property name="HelpMode" type="helpmode">Modal</property> <property name="CustomProperties" type="string" null="true" /> <property name="AllowHide" type="bool">True</property> <property name="Description" type="string">A web part to display a Silverlight application.</property> <property name="CatalogIconImageUrl" type="string" /> <property name="MinRuntimeVersion" type="string" null="true" /> <property name="ApplicationXml" type="string" /> <property name="AllowMinimize" type="bool">True</property> <property name="AllowZoneChange" type="bool">True</property> <property name="CustomInitParameters" type="string" null="true" /> <property name="Height" type="unit">400px</property> <property name="ChromeType" type="chrometype">Default</property> <property name="Width" type="unit">800px</property> <property name="Title" type="string">Silverlight Web Part</property> <property name="ChromeState" type="chromestate">Normal</property> <property name="TitleUrl" type="string" /> <property name="Url" type="string">~site/SLXap/TimeEntrySearchSL.xap</property> <property name="WindowlessMode" type="bool">True</property> </properties> </data> </webPart> </webParts> ]]> </AllUsersWebPart> </File > </Module> </Elements>

6. Save the Elements.xml file.
7. Right-click the CustomPages module.
8. Select Add >> Existing Item.
9. Browse to the C:\%Office365TrainingKit%\Labs\4.1\Source\After\TimeEntrySearch\CustomPages\TimeEntrySearchSL.aspx file and click Add.

Task 3 – Test the Silverlight Application

In this task, you will test the deployment of the Silverlight application.

1. In the Solution Explorer window, right-click the TimeEntrySearch project and choose Set as Startup Project.
2. Press F5 to build and deploy the project.
3. Navigate to <Site>/SitePages/TimeEntrySearchSL.aspx to view the custom page with the Silverlight application.

4. Enter Office 365 into the textbox and click the Search button to display the entries for Office 365.

   The Silverlight Web Part displays the time entries with Office 365 in their title.

5. Close Internet Explorer to stop debugging.