Your SlideShare is downloading. ×
LightUp SharePoint with Silverlight
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

LightUp SharePoint with Silverlight

1,303
views

Published on

LightUp SharePoint with Silverlight by Tan Choon Ngee

LightUp SharePoint with Silverlight by Tan Choon Ngee

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,303
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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.
  • Transcript

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