SharePoint Guru

Rod Stagg SharePoint Solutions Architect

Home     About Us     Contact Us     Site Map     SharePoint Solutions     Silverlight     Press Releases     Blog      
Source: blog | RSS Feed
 
My interest is in extending the social computing capabilities of the SharePoint platform
and exploring my passion for Silverlight and the Windows Presentation Foundation (WPF) technologies.
 
–Rod Stagg
 
 
May 15

SharePoint Generic Wrapper for Silverlight with initParams

Here is a freebie...just finished a generic SharePoint web-part to host Silverlight apps inside SharePoint.

There are other  out there for sure but I had a need for a generic one that I could specify any number of initParams from the web-part properties in addition to ones I developed that contained separate wp properties for each name/value pair. 

Using just a single wp property for the initParams allows you handle any number of parameters from any of your Silverlight apps using the same web-part-just set both the XAP source location and InitParams for the appropriate Silverlight application.  nbd but it is easier to deploy just a xap file for every new Silverlight application than having to prop a new web part every time:)

 

SLViewer SLViewerWP

 

Web Part Features:

Has a few properties for Silverlight you can set in the web-part properties pane:

Height: sets the SL plugin height (int)

Width: sets the SL plugin width (int)

XAP file location: sets the SL plugin xap file location (string)

Silverlight plug-in id: sets the SL plugin id (string-appended in the web-part code with a GUID to be safe)

InitParams: sets the InitParams for the plugin as one complete name/value pair string (same string you parse on the Silverlight application side as normal)

 

Deployment Instructions:

  1. Download: http://cid-11725deb07615960.skydrive.live.com/self.aspx/Silverlight%20Generic%20Web%20Part/Silverlight2ViewerWebPart.wsp
  2. from command line: stsadm -o addsolution -filename [path on your server where you downloaded file]\Silverlight2ViewerWebPart.wsp
  3. From Central Admin go to operations-solutions management-deploy solution
  4. Download webpart file (.dwp)  http://cid-11725deb07615960.skydrive.live.com/self.aspx/Silverlight%20Generic%20Web%20Part/SilverlightViewer%7C_Web%7C_Part.zip
  5. Go to site settings, web parts, and upload silverlightviewer_web_part.dwp file into web part gallery
  6. (Optional) Download blank Silverlight Application (.xap) http://cid-11725deb07615960.skydrive.live.com/self.aspx/Silverlight%20Generic%20Web%20Part/BlankSilverlightApp.zip
  7. Drop the blanksilverlightapp.xap in a document library or in your SharePoint virtual directory somewhere handy or just use your own xap file and reset the xap file location property of the webpart from the site page. 

System Requirements:

  1. SharePoint 2007 up and running on the server.
  2. Silverlight 2 dll installed in GAC.
  3. MIME types all set in IIS for both .xap and XAML files
  4. Web.config updated with all the Silverlight and AJAX sections. 

Try this link for details on hosting Silverlight on SharePoint (nice post by Karine Bosche)

Coming Soon: I am packaging everything up as a single site feature and maybe even a feature stapler.

have fun:) 

-Rod



1:35 AM GMT  |  Read comments(0)

July 21

Does FaceBook flavor of social networking work in the enterprise?

Interesting post by Johns Brunswick, Senior Consultant for Oracle Corporation:

http://aiimcommunities.org/e20/blog/you-dont-want-facebook-enterprise



1:28 PM GMT  |  Read comments(0)

July 23

Using SharePoint Designer and Silverlight to embed Silverlight applications directly into your SharePoint blog posts

We have been looking at ways to increase the discoverability of internally produced video content and rich user experiences developed on Silverlight currently stored in various document libraries throughout our SharePoint intranet/extranet.  One area of particular interest is finding a way to easily incorporate rich user experiences and streaming video directly into individual blog posts taking advantage of the the built-in commenting form provided in the SharePoint blog template. 

One challenge has been finding a "start small" approach to providing the benefits of streaming the video content vs. downloading from document libraries without the need to provision large media servers and associate infrastructure in the short-term.   Another challenge as been finding an approach to surface our rich user experiences developed on Silverlight on our internet-facing site as well as our intranet/extranet environment. 

To address these efforts we recently customized a standard SharePoint blog template using SharePoint Designer to display both streaming video content and Silverlight 2 applications we currently have stored on the Silverlight Streaming Service

The only technical requirements for this solution are that you have access to edit the blog in SharePoint Designer, a free Silverlight Streaming account set-up with your Windows Live Id, and upload at least one video or Silverlight application to the service for use in your blog post. 

 

Blog Home Page

Features: Modified layout, video and/or Silverlight application plays inline, blog title linked to full post page, caption linked to full screen play.

defaultblogpagedetails

Full Post Page

Features: Video or Silverlight application plays inline, full screen link.

bloghomebig

Example short video:

 

Features:

  • Modified layout.
  • Continued ability to post regular blog posts. 
  • Ability to embed videos stored on Silverlight Streaming Service directly into blog posts.
  • Ability to embed your own custom Silverlight applications directly into blog posts.
  • Ability to categorize video posts.
  • Ability to comment on video posts.
  • Makes use of XSLT and CSS for customizations-no custom javascript to deploy or maintain.
  • Ability to add functionality to existing blogs.
  • Ability to further customize via centralized custom XSLT files and custom CSS.
  • Silverlight streaming provides metrics/reporting on downloads, streaming data, etc.  

What is the Silverlight Streaming Service?

Microsoft® Silverlight™ Streaming by Windows Live™ is a companion service for Silverlight that makes it easier for developers and designers to deliver and scale rich media as part of their Silverlight applications. The service offers web designers and developers a free (*) and convenient solution for hosting and streaming cross-platform, cross-browser media experiences and rich interactive applications that run on Windows™ and Mac. Combined with the ability to create content with Microsoft® Expression and other 3rd party tools, web designers and content publishers wishing to integrate Silverlight applications into their online properties can enjoy complete control of the end user experience. 

More details and sign-up free here

Can I use my existing .wmv video files? 

Yes, there are some exceptions and size restrictions but providing you have a valid Windows Live ID account you can upload your .wmv video files directly to the Silverlight Streaming Service using the Manage Videos, Upload Videos feature.  For added features check out Expression Encoder 2 for encoding your videos to specific needs.

Can I use my existing Silverlight 2 .xap files?

Yes, there are some exceptions and size restrictions but providing you have a valid Windows Live ID account you can upload your Silverlight .xap files directly to the Silverlight Streaming Service using the Manage Applications, Upload Applications feature.  For added features check out Expression Blend 2 for designing Silverlight applications without code. 

What SharePoint Designer Customizations  do I need to make to add this functionality to my existing SharePoint blogs?

We added three new site columns on our blog's post list to allow users to add their own Silverlight Streaming videos and applications and a caption when creating a new post.

    • SilverlightStreamingServiceApplicationUrl (Text Field: Multiple Lines of Text, Plain Text)
    • PostImageCaption (Text Field: Muliple Lines of Text, Rich Text)
    • PostImageUrl (Text Field: Single Line of Text, Plain Text)

 

Download source custom XSLT files and CSS file here

We modified the default.aspx and post.aspx pages to use a customized version of each XSLT that both reformats the layout and incorporates an iframe to display the user-provided SilverlightStreamingApplicationUrl since the default SharePoint editing controls strip out any iframe, embed, or script references.   To accomplish this we first saved back-up versions of our default.aspx and post.aspx pages the opened each in SharePoint Designer in design mode and converted the appropriate dataview web-parts to XSLT (right click, convert to XSLT option)

    • Modifications to Default.aspx
      • Upload the provided default.xsl to the blog's root folder
      • Convert the post dataview web-part to XSLT
      • Apply the custom XSLT: From the dataview web-part's Common Data View Properties pane choose DataView Properties, then select the XSLT Source tab and browse to the default.xsl file.
    • Modification to Post.aspx
      • Upload the provided post.xsl to the blog's root folder
      • Convert the post dataview web-part to XSLT (Ignore @Author error message)
      • Apply the custom XSLT: From the dataview web-part's Common Data View Properties pane choose DataView Properties, then select the XSLT Source tab and browse to the post.xsl file.
      • Create a filter and parameter to filter the post DVWP by id : From the dataview web-part's Common Data View Properties pane choose Filter, if not displayed create a new URL parameter for ID and set the value to [id]

We also created a custom version of the blog templates core.css and referenced from the default.aspx and post.aspx pages as a link:

Add custom style sheet reference in default.aspx:

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">

<SharePoint:RssLink runat="server"/>

<link rel="stylesheet" type="text/css" href="customblog.css">

</asp:Content>

Add custom style sheet reference in post.aspx:

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">

<SharePoint:RssLink runat="server"/>

<link rel="stylesheet" type="text/css" href="../../customblog.css">

</asp:Content>

Once my blog is configured how do I create new blog posts that include this new functionaility? 

Simply create you blog post as normal including your post title and post body. 

Then fill in the SilverlightStreamingApplicationUrl and PostImageCaption fields and save your post as normal.  (*see Obtaining the SilverlightStreamingApplicationUrl for details on the URL to use)

 

*Obtaining the SilverlightStreamingApplicationUrl:

From Silverlight Administration Home Upload your .wmv video or Silverlight 2 application to the Silverlight Streaming Service

From Silverlight Administration Home select the link to the video or application.

From Method 1: Embed the video into a web page obtain the embed link for the video or application

SLmanagevideos

 

Important: Copy only the URL inside the iframe (example in red) . 

<iframe src="http://silverlight.services.live.com/invoke/37066/Butterfly%20Sample%20Video/iframe.html" scrolling="no" frameborder="0" style="width:500px; height:375px"></iframe>

 

What's next?

  • Investigate how to add YouTube and MSN videos into the posts.
  • Simplify deployment for new blogs via site template (.stp file)
  • Create custom site definition with custom columns included.
  • Create SharePoint application page to allow users to upload videos/display in blog post in one step. 
  • Investigate using Silverlight Streaming Services API and existing solutions to provide reporting on #downloads, video streaming data, etc.

 

Thanks,

Rod.



5:44 PM GMT  |  Read comments(0)

April 23

Wrap-Up on using Silverlight, SharePoint Lists, and URL Protocol.

Overview

Recently I had a client request an animated carousel or filmstrip like player for displaying both images and video on their SharePoint intranet. The idea is to display many images and videos without taking up a ton of screen space in the process. Also, they wanted to be able to manage what images and videos that get displayed via a standard SharePoint list i.e. they could add links and descriptions in the SharePoint list and those would display appropriately in the filmstrip.

When evaluating a technical solution seemed like Silverlight would be the way to go for the filmstrip-Silverlight has built-in animation support, a media player for playing video, a rich set of controls, and good tool support with Expression Blend and Visual Studio 2008. For accessing the links etc. stored in the SharePoint list the SharePoint web service lists.asmx seemed a logical choice.

The catch:

The client’s IT department didn’t support custom ASPNET web applications or web services to be deployed without a huge review process and maybe neverJ The client’s SharePoint was pretty locked down to any custom development.

The resolution:
There is a nifty yet fairly unknown protocol built-in to SharePoint described on MSDN and the SharePoint SDK as the URL Protocol that allows you to query a list directly for all its list items. Plus, you can do this using a simple URL in the browser and also from javascript on the client. I have used this fairly often since back in 2003 when I had to come up with a way to populate a Flash map with SharePoint data so I was familiar with this protocol but not sure it would work in Silverlight.

I broke out my Swiss-Army knife for SharePoint (URL Protocol aka owssrv.dll) and good news-it actually worked! Silverlight can access data from a SharePoint list without the need to have a web service call. Essentially using the same built-in web client classes inside Silverlight designed to access external web pages or files.

So what is the SharePoint URL Protocol?


Excerpt from MSDN:

Embedding a request in a URL is a basic mechanism for issuing a method and its parameters to a server running Windows SharePoint Services.

The syntax for using this mechanism is as follows:

[http://Server_Name/[sites/][Site_Name/]_vti_bin/owssvr.dll?Cmd=Display&List=GUID&XMLDATA=TRUE]

Details for the code below but actually a simple implementation in your Silverlight project using the built-in web client classes commonly used to access external files from Silverlight-in our case we are essentially accessing the SharePoint list as an XML file of sorts.

The technical approach for the solution using Silverlight, a SharePoint list, and the URL protocol:

Using Microsoft Expression Blend for the initial layout and Visual Studio 2008 for the C# code I created an animated filmstrip (a variation of the all too familiar carousel in SilverlightJ) to display thumbnail images of the images and videos along with a main player area to display the larger view of the image/video when the user selected a thumbnail from the animated filmstrip.

Advantages of using Silverlight:

Rich support for animation, rich set of controls, good development tools i.e. Microsoft Expression Blend and Visual Studio 2008, and all the advantages of coding in C# with a simple deployment process. You can even copy the Silverlight XAP files (essentially a compressed zip file with all your code) into a SharePoint document library and run from there along with a simple HTML page.

Advantage of using a SharePoint list as the source data for the filmstrip player

The administrator of the SharePoint list can designate what gets displayed in the filmstrip player automatically via the SharePoint list:

· Designate the initial image/video that loads when the page loads.

· Turn individual items visibility on/off

· Select the appropriate thumbnail image and larger image

· Select the appropriate URL for a video to be played in the video player

Advantages of using the URL protocol to populate the Silverlight filmstrip items

It’s a lightweight HTTP protocol, can be accessed via a simple URL, and does not require web services to access the data in a SharePoint list.

Example of the solution:

Filmstrip player functionality:

· Animated filmstrip displaying thumbnail images based on links provided in the SharePoint list.

· Video player to play embedded .wmv video also based on links provided in the SharePoint list.

· Image viewer to display larger image based on user selection in the filmstrip.

· Main player section hot-linked to external URLs based on links provided in the SharePoint list.

· User controls for the filmstrip animation

· Pause/Play controls that turn on when video is loaded.

Image of application

clip_image001

Live Demo here…

Silverlight Filmstrip Player for SharePoint Demo

Other Potential uses?

  • Could be used on a Real Estate site to dynamically display images/video of the advertised home.
  • A video player for a blog using the blog to collect comments.
  • Basic slide show for a SharePoint document library or to display images from Flickr for instance in your SharePoint.

What's interesting about this implementation?

Using the URL protocol provides a simple mechanism for accessing SharePoint list data from within Silverlight without the need to add a web service reference.

Using LINQ to XML to parse the returned data from the SharePoint in XML greatly simplifies working with the SharePoint list data in Silverlight once it’s retrieved.    

Using LINQ to XML also simplifies restructuring the data to a standard RSS feed format to use the data from the SharePoint list's built-in RSS feature as another option.

What's next on the feature front?

  • Adding the ability for users to leave comments and ratings.
  • Adding the ability for users to upload their own videos.

Example C# code for accessing the SharePoint list in Silverlight:

Silverlight 2 application attached to a ASPNET web project (I don't host the ASPNET app in SharePoint but easy way to generate the test.html and .XAP file)

public partial class Page : UserControl
    {
        private XNamespace z = "#RowsetSchema";      
        public Page()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(Page_Loaded);
        }
        public void Page_Loaded(object sender, RoutedEventArgs e)
        {
            string sUrl = "http://[server]/[site]/_vti_bin/owssvr.dll?Cmd=Display&List={[listguid]}&XMLDATA=TRUE";
            WebClient sp = new WebClient();
            sp.OpenReadCompleted += new OpenReadCompletedEventHandler(sp_OpenReadCompleted);
            sp.OpenReadAsync(new Uri(sUrl));
        }
void sp_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
        {
            if (e.Error == null)
            {
var items = from item in results.Descendants(z + "row")
                        where item.Attribute("ows_LinkTitle") != null
                        orderby (DateTime)item.Attribute("ows_Created") descending
                        select new FilmFrame
                        {
                            ItemTitle = (string)item.Attribute("ows_Title"),
                            ItemLinkTitle = (string)item.Attribute("ows_LinkTitle"),
                            ItemType = (string)item.Attribute("ows_ItemType"),
                            ItemSourceUrl = (string)item.Attribute("ows_SourceUrl"),
                            ItemThumbnailUrl = (string)item.Attribute("ows_Thumbnail"),
                            ItemDescription = (string)item.Attribute("ows_Description"),
                            ItemDisplayFilmStrip = (string)item.Attribute("ows_DisplayInFilmstrip"),
                            ItemCreated = (DateTime)item.Attribute("ows_Created"),
                        };
//You can bind to an itemtemplate for a listview directly for simplicity-the specfic example UI above builds the XAML dynamically to provide more

flexibility
//ListView.ItemsSource = items;
            }
        }

Separate namespace for filmstripitem:
namespace FilmStrip
{
    public class FilmStripItem
    {
        public string ItemTitle { get; set; }
        public string ItemLinkTitle{ get; set; }
        public string ItemSourceUrl { get; set; }
        public string ItemType { get; set; }
        public string ItemDescription { get; set; }
        public string ItemDisplayFilmStrip { get; set; }
        public DateTime ItemCreated { get; set; }
    }
}

Things you might want to consider when making use of this example:

The test.html and .xap file is being hosted inside SharePoint.  In this case I just dropped on the SP Site at the root site level via SharePoint Designer.

For a quick way to databind the XML returned from the SharePoint list to XAML I initially used listbox and a data item template.

Rod Stagg http://www.rstagg.com
SharePoint Solutions Architect
Allyis Inc. Kirkland Wa http://www.Allyis.com



6:48 PM GMT  |  Read comments(0)

April 13

How to bulk upload and synchronize data into SharePoint using the Excel Add-in and SharePoint Designer Workflows

Overview
Provide the ability for selected individuals who need to continue to maintain data in Excel and also share the data with users via SharePoint taking advantage of all SharePoint's built-in features for lists. 

This solution provides the ability for Excel users to select data stored in their Excel spreadsheet and synchronize the data to a custom SharePoint list eliminating the sometimes redundant and time-consuming process of entering each item individually.

Screenshot from a table in Excel spreadsheet:

TableSyncSharePointContextSmall syncSharePointContextSmall

This scenario is part of an overall solution that takes advantage of SharePoint’s out-of-the-box features including SharePoint Designer workflows and custom lists to provide an online database for event tracking, a database of subject matter experts, workflow processes for resourcing, and incorporating scoring data imported from pre-populated reports downloaded in Excel format.  
In addition the solution uses the new document sets in SharePoint 2010 to allow user to upload and share supporting files and tag supporting files at a folder level eliminating redundant input.

Configuring SharePoint

  • Create a new custom list to serve as a public list that will display the data to end-users.
  • Create a new custom list to serve as an import list supporting the import workflow process.  This list is created directly from the Excel spreadsheet using the Excel Add-in's Publish and allow Sync command (more later on this).
  • Create a new site column named BulkImportID and that will be added to both the Import List and Public list.  
  • Create a new SharePoint Designer workflow to handle the import process.  Set the workflow to execute when a new item is added to the Import List. 
  • Add logic to the workflow detect whether a new item should be added or whether the item has been previously added to the public list requiring only an update to the list item.  The purpose of the BulkImportID is to be used to evaluate the workflow condition.
  • Using the create item function in the workflow populate the public list with the appropriate values from each newly added item in the import list and set the BulkImportID for each added list item. Delete each list item in the import list using the Delete Item function when the workflow has succeeded for the item.

Installing and Configuring the Excel Add-in

  • Install the Excel Add-in to the user's desktop or laptop (individuals contributing data to the system) This provides the mechanism to synchronize the data from the user's Excel spreadsheet to the Import List in SharePoint.
  • Save the spreadsheet as Excel 2003-2007 format as described in the Excel Add-in configuration instructions.  You can also create a copy of the original to support the import process to maintain the original's advanced features.   
  • Configure the Excel spreadsheet for the Excel Add-in on the Excel spreadsheet by completing the configuration steps.  Create a new table in Excel with your data and use the Publish and allow sync command to deploy your Import List for the first time.  Optionally add a new worksheet to each spreadsheet where the  user can copy in the specific data they need to import to SharePoint preserving the source worksheets.

Advantages

  • Users can continue to use their Excel spreadsheets for advanced computations, offline access, and custom formatting while also being able to share the data via SharePoint. 
  • Users can bulk-import pre-populated spreadsheets and reports provided by other systems into SharePoint. 
  • Custom filtered views including progressive filtering can be created and shared via SharePoint not provided in Excel auto-filtering. 
  • SharePoint Designer workflows provide a non-code mechanism to both import new items into the Public List and also detecting existing items for performing updates.   

Using the Excel Add-in:

publishAndSyncToolBarSmall

Deploy Excel Add-in to selected users who will be importing data from Excel to SharePoint

Brief Description This add-in works with Excel 2007 to allow you to synchronize data in a table with a list on a SharePoint site.

Download from MSDN http://www.microsoft.com/downloads/details.aspx?FamilyId=25836E52-1892-4E17-AC08-5DF13CFC5295&displaylang=en

Configure Excel spreadsheets for Publishing and Synchronizing Excel 2007 Tables to SharePoint Lists

Summary: In Microsoft Office Excel 2007, the ability to synchronize the data between a table and a list in Microsoft Windows SharePoint Services is deprecated. This article describes an add-in that enables you to update the information in a SharePoint list from Excel 2007.

Configuration Instructions
http://msdn.microsoft.com/en-us/library/bb462636(office.11).aspx#Office2007SynchronizeSharePointListfromExcel_Synchronizing

Important considerations when using the Excel Add-in.

  • Create your custom “Import List” directly from the Add-in using the Publish and allow sync command in the Table Tools-Design tab of your Excel spreadsheet provided by the Excel Add-in.  You can add your own fields to the Import List later and synchronize with Excel. 
    Think carefully about what fields you want as required fields and the desired order in your spreadsheet before provisioning the Import List since the field order is difficult to re-arrange once the Excel spreadsheet is connected to SharePoint. 
  • Take advantage of the ability for the Excel spreadsheet to incorporate pick-lists from the columns in your SharePoint Import list. 
  • There is a limit of 6 fields if I remember correctly and you are not able to provide for multiple selections but very usefull for maintaining data consistancy and case where selecting users from AD would be usefull.
  • A common confusion I have seen on MSDN for users implementing the add-in is the Publish and allow Sync command in the Excel toolbar.  Some users attempt to select this command to sync the data with SharePoint.  This command is only used to provision the initial list in SharePoint bound to the Excel table and not used for updates.  For updates right-click anywhere on the Excel table and use the additional features added to the context-menu to sync data (see screenshot above)

Conclusion

There are circumstances when users need to continue to use existing Excel spreadsheets and adding each data item to SharePoint individually would be both redundant and time-consuming.  Using the Excel Add-in in combination with custom Import Lists and SharePoint Designer workflows provide one mechanism for bulk-uploading data from Excel to SharePoint. 



10:59 AM GMT  |  Read comments(0)