LightUp SharePoint with Silverlight


Published on

LightUp SharePoint with Silverlight by Tan Choon Ngee

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • There are at least three ways to add a Silverlight application to a Sharepoint web site. The first is indicated if you want to insert a third parties Silverlight application and you have just the .xap file and not the source code. The second method uses a developer-side approach and gives you the maximum control of what is happening and the third is useful if you want your Silverlight application to be deployed in a Sharepoint site automatically when you build or debug your application.The first method: using a shared Document LibraryLet me first show the more intuitive way but less appropriate in a production environment. Locate the Silverlight application you want to put in the Sharepoint site, something simple to start such as a banner rotator or a simple animation. Go to your new “Team Site” and sign in as administrator. Click on “Shared Documents” on the menu on the left of the web page.>>Next animationClick on “Add new document” link at the bottom of the list to show the Upload Document dialog box:>>Next AnimationClick on Browse… button and look for the “.xap” file in the folder of your Silverlight application. Click OK and you should see your .xap file included in the list of share documents. Now click on “Site Pages” on the left menu to go to the specialized List containing all the pages of your site. Create a new page by clicking on “Add new page”, insert a page name and the new page in editing mode with the content editor ribbon on the top will appear: >>Next AnimationNow you are ready to insert your Silverlight application. Click on “Editing Tools/Insert”, select “Media and Content” in Categories list view and “Silverlight Web Part” in “Web Parts” list view: >>Next AnimationA dialog box will ask you the URL for the .xap file you want to add to the page; here inexplicably Sharepoint does not offer you the possibility to navigate the Document libraries through the UI and you have to digit the path and name of your file directly in a text box. Fortunately the task is easy and you can insert a relative path, something like this:>>Next AnimationNow you should see your Silverlight application confined in a box entitled “Silverlight Web Part”. Don’t bother about the actual look & feel, you can resize the box and show/hide the title clicking on the arrow at the top right corner and select “Edit Web Part” on the small drop down menu:>>Next AnimationA new configuration will appear on the right side allowing you to refine appearance, layout and other settings:>>Next AnimationClick OK and save your page and your work is done.
  • Second method: using a web part This method requires the creation of a new “Sharepoint Web Part” directly from Visual Studio 2010. Fortunately there is a template project ready to use; so let’s open Visual Studio 2010 and create a new project selecting the “Sharepoint 2010 Visual Web Part” template: >> Next AnimationVisual Studio will ask you the server where you want to deploy your web part; select your Sharepoint solution and go ahead. On the Solution Explorer you will see the web part related files and a new user control: >> Next AnimationDelete the user control since we won’t use it. Open the “.cs” file of your web part (VisualWebPart1.cs in my case) and change the name of the class (VisualWebPart1 in my case) with something like SLVisualizer; locate the CreateChildren() method and substitute the content with the following code:>> Next AnimationThe idea here is to use a LiteralControl to add a portion of HTML code to the rendering of the web part. As you can see, in the parameter “source” I included the relative path of the xap file we already added in the Shared Document Library as described in the first method. Before going on, change the name of the class of your Web Part to something easy to identify, then open the file with “.webpart” extension and change the type name and title of your Visual Web Part in the elements.xml file giving the same name used for the class as follows:>> Next AnimationThis will help you to identify the web part when you add it to a page of your site. Now you are ready for the deployment. Select Build/Deploy Solution from the top menu of Visual Studio and once the operation has been completed, open your site in the browser, log in as administrator, create a new page and from the “Editing Tools” ribbon on the top of the page select “Insert/Web Part” and, from “Categories” choose “Custom” and from the Web Part list, choose the Visual Web Part you just deployed:Click “Add”, then save the page and enjoy your new Silverlight app inside the Sharepoint page.
  • Third method: using a Sharepoint moduleThis method is probably the most recommended if you have the source code of the Silverlight application and want to delegate to Visual studio the task to keep your Silverlight application updated in a site of Sharepoint. Open your Silverlight Solution in Visual Studio 2010 and add a new project selecting the “Sharepoint 2010/Empty SharepointProject” template:>> Next AnimationChoose the “Deploy as a sandboxed Solution” option and click “Finish”. Then right mouse click on the new project in the Solution explorer Window to add a new item. Select “Sharepoint 2010/Module” from the installed templates:>> Next AnimationGo back to the “Solution Explorer”, expand the tree under the new module and delete the file “Sample.txt. Then right mouse click on the Module to open the Properties:>> Next AnimationSelect the “Project Output References” property and click on the small button on the right to open the “Project Output References” Dialog Box; here click on the “Add” button to add an item to the list on the left; configure the properties on the right as shown in the following image:>> Next AnimationIn the “Project Name” property you have to choose the name of your Silverlight app project (in my case it is DataFilesViewer).Click “OK” and you are almost done. The concept behind this is that this “Module” will act as a 'ferry' to the insertion of the Silverlight in SharePoint Site. You can now select the Sharepoint project just included in the Solution as the “Startup project”, add the Silverlight Project to its “Project Dependencies” and deploy your solution. Your “.xap” file will be added to the Sharepoint site under the path:>> Next AnimationLet’s go ahead and open the dialog box of the properties of your Sharepoint Module project; click on the “SharePoint” tab option and set the “Enable Silverlight debugging (instead of Script debugging) checkbox”.Now, if you press “F5” you will be able to debug your Silverlight application inside the Sharepoint site. Obviously you have first to add the Silverlight app to a page to do so. With the page in edit mode, click on “Editing Tools/Insert”, select “Media and Content” in Categories list view and “Silverlight Web Part” in “Web Parts” list view; then put the path above listed when requested and save the page.
  • LightUp SharePoint with Silverlight

    1. 1. Light Up SharePoint …… with Silverlight!<br />Light Up SharePoint<br />Choon Ngee, Tan<br />Regional Director<br />aZaaS PteLtd<br /><br />
    2. 2. 2<br />Microsoft Gold Certified Partner with Web Development and Software Development Competencies<br />Microsoft Silverlight Expert Partner<br />Windows Azure Inner Circle Partner<br />Technical Director is in Microsoft Regional Director Program and only about 170 world wide.<br />Nominated for Microsoft ISV for the Year 2010.<br />
    3. 3. 3<br />Beijing<br />Headquartered in Singapore. <br />Subsidiaries in the China, Hong Kong, Taiwan<br />Over 300 customers regionally<br />Over 150 Sharepoint customers<br />Shanghai<br />Taipei<br />Guangzhou<br />Shenzhen<br />Hong Kong<br />Singapore<br />
    4. 4. Topics<br />Why Use Silverlight With SharePoint?<br />DEMO: Silverlight Dashboard<br />The New Kid: SharePoint Online<br />Deploying Silverlight Applications to SharePoint<br />4<br />
    5. 5. SharePoint …<br />5<br />
    6. 6. … is a greatplatform!<br />Sharepointis very successful and a great platform<br />From the largest Fortune 500 companies to small and medium businesses – all save time and money with Sharepoint.<br />SP offers great features and functionality out of the box.<br />6<br />
    7. 7. But WhatAboutThe User Experience?<br />The SharePoint UX can be challenging ...... because it is based on a web user experience metaphor.<br />A web user experience is not as smooth and rich as a native desktop application environment.<br />Even though SharePoint is very well integrated with the desktop and Office applications, the UX is still a tradeoff between the broad reach of a web application and the richness and UX feature set of a desktop client.<br />7<br />
    8. 8. 8<br />Broad Reach<br />“Lowestcommondenominator“<br />Better UX<br />Tradeoff betweenreachandrich<br />Best UX<br />Rich clientexperience<br />
    9. 9. Isthis a Problem?<br />SharePoint users are generally OK with this tradeoff ...... but there is certainly room for improvement!<br />Silverlight can enrich the SharePoint experience ...... and excite and delight your SharePoint users!<br />The need for rich, elegant and interactiveSharePoint line of business applications is already high.<br />And this need will grow in the future!<br />9<br />
    10. 10. 10<br />DemoSilverlight business dashboard<br />
    11. 11. Silverlight Pivot Viewer<br />11<br />
    12. 12. SingHealth<br />12<br />
    13. 13. Multi-Touch Silverlight Application<br />13<br />“We are privileged to have aZaaS as our partner in developing our portal”<br />Mr Foo KW, Vice President, HDD Solutions, Trek 2000 International Ltd<br />
    14. 14. Silverlight in Sharepoint<br />14<br />
    15. 15. The New Kid: SharePoint Online<br />SharePoint in the Cloud – hosted by Microsoft<br />Low-cost, from $5,25 per user/month<br />Today: MOSS 2007 (without admin access)<br />Portals, Team Sites, Collaboration Workspaces<br />SharePoint Web Services<br />Customization with SharePoint Designer<br />Office 365 (Beta): SharePoint 2010 (without admin access)<br />Sandboxed solutions<br />VS 2010 Developer tooling<br />Data access through client object model, REST, WCF<br />15<br />
    16. 16. On-Premise vs. Online<br />On Premise<br />SharePoint Online - Standard<br />SharePoint Online - Dedicated<br />Hosted in MSFT data center<br />Dedicated Hardware<br />Admin outsourced to MSFT<br />Partial and full trust customization*<br />Authenticated via NTLM<br />Designed for 5000+ seats<br />Self-hosted in your data center<br />Dedicated hardware<br />Central admin access<br />Partial and full trust customization<br />Authenticated via AD<br />Available to companies of any size<br />Hosted in MSFT data center<br />Multi-tenant/shared hardware<br />Admin outsourced to MSFT<br />Partial trust customization<br />Authenticated via certs and forms<br />Available for companies of any size<br />
    17. 17. Deploying Silverlight to SharePoint<br />Need to install the XAP file somewhere<br />Document library? LAYOUTS folder? Hive?<br />Need to display the XAP somehow<br />Insert the Silverlight HTML into the page<br />Can do this with the Content Editor web part<br />Can also write a custom SharePoint web part<br />Much easier in SharePoint 2010!<br />Built-in Silverlight web part can host XAP<br />New client object model allows access outside of SharePoint<br />Silverlight can be automatically deployed as part of a .wsp<br />17<br />
    18. 18. Deploying Silverlight to SharepointFirst method: Using a shared Document Library<br />18<br />
    19. 19. Deploying Silverlight to SharepointSecond method: Using a Web Part<br />19<br />
    20. 20. Deploying Silverlight to SharepointThird method: Using a Sharepoint Module<br />20<br />
    21. 21. Accessing SharePoint data<br />Simple RSS access to lists<br />REST and WCF access to lists (new in 2010)<br />Call SharePoint web services API (lists.asmx)<br />Pass data from hosting HTML page to anembedded SL application with initParams<br />Call a custom (external) web service<br />Download resources directly<br />21<br />
    22. 22. Sharepoint Online Integration<br />22<br />Sharepoint Online / On-Premise<br />
    23. 23. SharePoint 2010 and Silverlight<br />Much improveddeveloperfeatures!<br />Silverlight Web Part built in.<br />Sharepoint Client Object Model for Silverlight:<br />Microsoft.Sharepoint.Client.Silverlight<br />Microsoft.Sharepoint.Client.Silverlight.Runtime<br />Can accessinformation in a SharePoint instancefromanywhere outside of SharePoint!<br />23<br />
    24. 24. SharePoint 2010 and Silverlight<br />24<br /> public void LoadSPDocs(string countryId)<br /> {<br />ClientContextctx = newClientContext(ApplicationContext.Current.Url);<br /> List lib = ctx.Web.Lists.GetByTitle("Product Documents");<br />CamlQuerycq = new CamlQuery();<br />cq.ViewXml = String.Format(@"<View><Query><Where><Contains><FieldRefName='FileLeafRef'/><br /><Value Type='Text'>{0}</Value></Contains></Where></Query></View>",countryId);<br /> items = lib.GetItems(cq);<br />ctx.Load(lib);<br />ctx.Load(items);<br />ctx.ExecuteQueryAsync(OnSuccess, OnFailure);<br /> }<br /> private void OnSuccess(object sender, ClientRequestSucceededEventArgs e)<br /> {<br />Dispatcher.BeginInvoke(BindListBox);<br /> }<br /> private void OnFailure(object sender, ClientRequestFailedEventArgs e) { }<br />
    25. 25. Summary<br />Silverlight and SharePoint are “made for each other” and work together very well.<br />Use Silverlight in a web part to enrich the stock SharePoint experience to excite and delight your users.<br />Use Silverlight to pull together multiple data sources and SharePoint data to create mashups.<br />SharePoint 2010 comes with many additional features for developers building Silverlight applications.<br />25<br />
    26. 26. Resources<br />Red Silverlight Dashboard:<br />Demo source code:<br />Tutorial Sharepoint/SL integration:<br />BPOS – 30 Day Sharepoint Online trial:<br />Office 365 Beta:<br />26<br />
    27. 27. Choon Ngee, Tan<br />Regional Director<br />aZaaS Pte Ltd<br /><br />© 2009 Microsoft Corporation. All rights reserved. Microsoft, Visual Studio, the Visual Studio logo, and [list other trademarks referenced] are trademarks of the Microsoft group of companies. <br /> <br />The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.  Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.  MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.<br />