Holiday Gift SharePoint to help others during the holidays

Using SharePoint to help others during the holidays

For the past several years, our employees have helped make the holidays very happy for many local children.  Because of thier thoughtfulness and generosity, these children woke up to presents and a wonderful Holiday Season.   Last year you helped a homeless family of six move into an apartment for the holidays – and if that wasn’t enough, fulfilled the kid’s wish lists! 

Again, this year we have a wonderful family who is going through some hard times.  A single mom with four children who works full time but struggles to make ends meet.  Last year, she was only able to get a few gifts for the youngest child.  We thought it be great if we could make this holiday a good one for all of them and knew this family would appreciate any help we can offer.  

This year we have a Holiday Gift SharePoint!

How SharePoint can help:
In previous years we sent out an email similiar to the above.  Thanks to the generousity of our employees many of the gifts came in time for the holidays, some even 2 or 3 times! 

Preventing duplicate gifts:
This year we wondered if we could provide the holidays wish list that could work much like a wedding registry preventing duplicated gifts.  When employees purhase a gift, they could go to the list and mark off that it is fulfilled. 
 
In SharePoint this turned out to be easy and fast to implement: 
  1. Create a custom list to store the holiday gift wish list items.
  2. Add fields for a picture of the gift, title, family member, and check-off field.
  3. Populate list with gift items.
  4. Create a new site page and add the gift list as a web-part to the page.
  5. Configure the list view to enable inline editing.
  6. Add content explaining how to view and select items from the list.
  7. Optional: Create a SharePoint Designer Workflow to automatically send out a thank you email.

Increasing Participation:

To increase participation we made the SharePoint accessible to more employees and also partners by enabling claims-based authentication and providing access through the firewall. 

Happy Holidays!

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.

Use SharePoint and Silverlight to display a summary of SharePoint blog posts on any site page

Overview:

We have been investigating ways on our intranet at Allyis to surface information via a more automatic and less manual process through various features and also to Implement multiple ways for discovering data/information across the site.  One area in particular we have been looking for improvement has been to increase the discoverability of our leadership blogs and encourage employees throughout our organization to blog as as way to increase collaboration and information sharing. 

As a way to address these efforts we recently developed and deployed a suite of web-parts (one of which we call the BlogRollUp web-part) which displays details on the most recent post made to any of our SharePoint blogs.  The web-part can be added to any site page, configured to point to a specific blog, and uploaded into the web-part gallery for others to use as well. 

 

Screenshot (Single Post Version): Screenshot (Multi-Post Version)
blogrollup

Features:

  • Displays blog title as a hyperlink to the original full post.
  • Displays the first 215 characters of the post body as an excerpt.
  • Displays an image for the blogger or blog.
  • Displays the post’s category as a hyperlink to view all similiar posts.
  • Displays the number of comments as a hyperlink to the comments page.
  • Displays an alert icon hyperlinked to the blog’s alert page.
  • Highlights background on mouseover.
  • Users can configure the web-part settings. 
blogrollupmulti

 

Technical Approach:

  • The user-interface was designed and developed entirely using Microsoft Expression Blend, Silverlight, and Visual Studio 2008. 
  • Custom SharePoint web-part to host the Silverlight application which allow users to configure which blog, blogger image, and alerts link from the web-part properties pane directly. 
  • The Silverlight application code uses the initParams provided from the webpart or HTML test page and the URL protocol to access the blog’s post list directly.
  • The web-part can be configured once and easily exported from and imported to the webpart gallery and added to any site page on any site collection.  
  • The Silverlight application was deployed into a SharePoint document library for ease of future updates. 

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.

Deployment Methods

Deployment using only a document library and a content editor web-part without the need to install server-side code and as such administrative access typically not required.

  1. Download the Visual Studio solution .zip and extract the files.
  2. Download

  3. Create a folder named ClientBin in a SharePoint document library to store the Silverlight application. 
  4. Locate the BlogRollUp_Web\ClientBin\BlogRollUp.xap file and copy into your new ClientBin folder
  5. Locate the BlogRollUpTestPage.html, update the initParams to use the settings for your particular blog including siteurl, imagepath, listid, and alerturl. 
  6. Copy the updated BlogRollUpTestPage.html file to the root of your new document library.
  7. On a site page add a content editor web-part and reference the BlogRollUpTestPage.html file inside an iframe. 
  8. Export the now pre-configured web-part to your desktop and upload back into the webpart gallery with an appropriate name identifying the BlogRollUp webpart so other users can add to their site pages without having to configure themselves. 

Deployment using the custom web-part where server-side code is installed via the .wsp solution file for the webpart and typically requiring administrative access

  1. Download the Visual Studio solution .zip and extract the files.
  2. Download

  3. Create a folder named ClientBin in a SharePoint document library to store the Silverlight application. 
  4. Locate the BlogRollUp_Web\ClientBin\BlogRollUp.xap file and copy into your new ClientBin folder.
  5. Download the .wsp solution file
  6. DownLoad

  7. Install the provided .wsp solution file via stsadm -addsolution
  8. Activate the solution from SharePoint Central Administration or stsadm -activatefeature
  9. Upload the provided webpart .dwp file into your web-part gallery via site setting, web parts. 
  10. Add the web-part to a site page, update the Silverlight web-part settings section with the appropriate .XAP fullpath, siteurl, imagepath, listid, and alerturl for your particular blog
  11. Export the now pre-configured web-part to your desktop and upload back into the webpart gallery with an appropriate name identifying the blogrollup webpart so other users can add to thier site pages without having to configure themselves. 

Summary:

This is just one way of displaying some pertinent details on recent posts from the blogs dispersed throughout the intranet while also making it easy for users to add to any site page.  Using Silverlight allows .NET developers to develop rich UI in Expression and Visual Studio and store the .xap files in SharePoint document libraries for future updates. 

 

-Rod

Windows Live Writer is great for SharePoint Blogs

Sample training video hosted in Silverlight Streaming Service and can be embedded directly into your Blog easily using Windows Live Writer Insert Silverlight Streaming feature.

Excerpt from Wikipedia:

Currently compatible with Windows Live Spaces, Blogger, LiveJournal, TypePad, WordPress, Community_Server, PBlogs.gr, JournalHome, the MetaWeblog API, the Moveable Type API, and all blogs that support RSD (Really Simple Discoverability).

Windows Live Writer introduces the Provider Customization API that enables both rich customization of Windows Live Writer’s behavior as well as the opportunity to add new functionality to the product. Currently Windows Live Spaces, WordPress, and TypePad have all taken advantage of this API to expose additional service-specific features within Windows Live Writer.

Windows Live Writer is currently available in 6 different languages.

Here is a training video I did using Windows Media Encoder for screen capture, Microsoft Media Encoder to encode and post directly to the Silverlight Streaming Service. From Windows Live Writer I can insert a video from my Silverlight Streaming Service directly-even get a preview mode of the video-nice.  I use WLW to post to my Spaces Blog and then syndicate to my notes in Facebook, my blog on OfficeLive, and my blog page on our company intranet  all via categorized RSS Feeds provided by Spaces.  I also use here on my blog to display recent posts.  WLW really simplifies inserting pictures, videos, maps, etc. plus you can develop your own add-ins which is cool. 

 

Strategic Architects Forum 2008-Part II

Strategic Architect Forum
San Francisco Nov 18-20th, 2008

My colleague Ken Efta from Allyis is presenting the Social Commuting within the Enterprise. Ethan is
posting live details on
http://twitter.com/Ethany as well so check it out.

Ken put up some great examples of some of benefits but also the risks of bringing cloud based
applications into the enterprise. Ken did a great presentation pointing out examples of solutions
you can start building now in your enterprise.

Seems to me one of take aways is don’t wait for the perfect solution but rather start small and build on
best of breed but also the consider the risks involved and things to consider when opening up your
enterprise to “cloud based computing”.

Also a carryover from yesterday’s presentation is a quick review of the
Enterprise Social Computing slide Solutions Frameworks
framework

Put out there as examples of how you can start putting this to work right now are a solution for
managing standards, call center management for sales, the new Office Business Applications Composer
toolkit which helps IW workers build thier own solutions on the Office System-including easily pulling in
SharePoint data/libraries etc for building workflows without any code.

Also demo’d was the Unified Partner Search Allyis developed as a prototype for MS for not only
providing a rich user interface for partners to search across multiple sources but also layers
a social aspect on top including ratings, shared searches, and ability for users to submit thier
own links to the service-very cool.  This project is dear to my heart given the late nights I
spent coding in Silverlight.  Very impressed with Silverlight as a UI and can see this as a great
way to build UI connected to services especially when time/budget is limited and you want
a more interactive experience simply not possible in traditional web forms.

New Picture1
Unified Partner Search Screenshot

Another interesting demo was a Standards management and collaboration solution using SharePoint
for large legal team-encourages individuals responsible for standards scattered around the globe
to collaborate, read, and submit standards.

An example of how your organization can quickly develop/deploy a solution on SharePoint was the demo
for the Call Center template for SharePoint that provides a cost effective way for employees to share details
about a call-the SharePoint uses the built-in features to store and manage the call questions and call scripts as
adding a social computing capability by allowing callers to rate the questions, make comments, and propose
questions.  The call questions page allows callers to filter the appropriate questions by vertical, competitor, and
role i.e. give me call the questions to ask a customer who is a CEO in the healthcare industry.  This solution was
developed in around a week and is packaged as a generic template that can be deployed as a SharePoint site
template without any server side code or involvement from IT.

OBA Toolkit was demo’d again-see yesterday’s post for more detail.  Cool tool-I interpret the tool as Popfly
for the enterprise but unlike Popfly it makes sure the data and objects presented to the user work with eachother
and are restricted to only the data that should be accessible to the user-don’t want a report on everyone’s salary
popping up on the intranet somewhere right?  This tool can prevent that in this brave new world of providing this
productivity tool to your employees.

Podcasting Kit for SharePoint was demo’d-cool tool so I will be dedicating a post just for this shortly.

-Rod.

Architects Forum-Emerging Web 2.0

Strategic Architect Forum
San Francisco Nov 18-20th, 2008

I attended Rationalizing the Emerging Web this morning..Karthik Ravindran presenter: Here are some things to think about coming out of this
session..how to get your company to take advantage of social networking tech?  i.e. Facebook.  Single sign-on for integration across these
services?  What about aggregations?  Business opportunities, IT cost reductions?

Karthik demo’d a services aggregator named Sobees.  Very nice application-feature rich and nice UI but probably doesn’t meet the low
enough bar for "something my mom would use"  I would use it though.  It allows the user to select and configure several popular social
sites including FaceBook and Flickr.  The concept and thinking around this is right on. 

Integrating these services into your own custom apps is cool but wonder what is the motivation for providers to open up to applications-
will this eventually lose eyeballs for them? 

Aggregated cross-network experience: Reminds me of my thinking way back in 2003 around a client app that gets what you want from the web-
A new Outlook for the web?  Needs to be something that comes pre-configured since IMO most users won’t take the time to learn how to configure things but
maybe only ask you the sign-in info for each service but that’s it-then give the user some standard templates or examples of templates used by others. 

Why not throw search in there as well? Do crawls based on collected meta tags-frequently search terms.  Maybe add your intranet info as well-platform type i.e. Sharepoint. pull in mysites data etc.  Another expediate option maybe to extend existing RSS Feed Aggregators for example-add the social layer on top. Ability for your enterprise to push data into external communities and of coursein as well-publish directly to YouTube as a marketing tool, FaceBook etc.

Karthik made a good point in pointing out IT Governance potentially blocking this-and suggested the need to develop a new solution framework to overcome.

He made an interesting observation that stuck with me-Social services the next phase of collaboration-seems like something for SharePoint to think about.
Must extend your core systems via services to get the benefit.  IMO Walmart although I hate them is a good example of using IT smart by allowing thier supplier
(make them the sellers) to track inventory and sales per store and adjust thier own in store inventory geographically.  Let your suppliers manage your inventory-very smart. 

Demo of OBA Toolkit: essentially Popfly for the enterprise-making sure components make sense and in context of user.  Cool app-maybe still needs to be more open and flexible-Popfly works since it’s very intuitive-that intuitiveness comes at a cost-you have to let people experiment not lock them to limited choices-the smart people
will figure thing out.

oba

Main points to getting started in social computing for your enterprise:
Define strategy-why are you doing this?
Establish presence in existing communities
How to integrate users and data points.

Contoso Corp. Community Dashboard coming soon. 

What Allyis can do? We can provide "community enabling services" for the enterprise and also
provide online collaboration solutions with social community features built-in. (MS Online Services maybe a good platform to start on).

-Rod

Re-Publishing Silverlight Player for including videos in Sharepoint Blog posts

silverlightplayer

NEW! Silverlight 1.0 Player embedded into Sharepoint blog template via Sharepoint Designer, customized DVWP, and added javascript in canvas_loaded…assuming you already know how to use Silverlight 1.0. 

First, since Sharepoint blogs posts don’t support embed tags, javascript, or even iframes you need a way to render the silverlight player from within the blog post-answer: added two text-only fields to hold the paths to both the video file and placeholderimage that the Silverlight player will use when playing videos.  Add the Silverlight 1.0 files to your server (Sharepoint Designer makes this easy if you do not have server access but are at least a site collection owner.  Also, the MIME type for XAML files must be enabled by your sys admin for Silverlight to work.

Second, since this is a solution that needed to be deployed without the use of server-side code I developed a separate HTML page to render the player similiar to any default.htm page used for Silverlight 1.0 except referencing a modified script for loading the player (more on that in a minute)

source in right column >>>>

Third, modify the silverlightplayer.js to include an event handler for when the canvas loads:

source in right column >>>>

The function to obtain the parameters is courtesy of the Microsoft SharepointDesigner team blog also included as part of the Fab 40 templates to pre-fill newitem forms via querystring params-dawned on me while trying to figure this all out that this script could be used in the canvas_loaded event to set the Silverlight mediaelement’s source attribute among other things.

source in right column >>>>

Fourth, from post.aspx add another DVWP for the posts list and convert to XSLT so we can insert an iframe and set it’s source url to the video url field our users so kindly provide when adding new posts etc.  The row item template is a convenient place to add our iframe and set the source URL and placeholderimage url if you want as well.  Also a nice place to pass height, width, whatever the need.

<xsl:if test="string(@Video) != ”"><TR><TD style="padding-top:10px">
                    <div><iframe src="[yoursitepath]/silverlightplayer.htm?Source={@Video}&amp;Placeholder={@videoimage}" frameborder="0" height="410" width="424"></iframe>
                    </div>
There you go, all from client-side code a way to add Silverlight player allowing your users to easily add video to thier posts-of course you need to drop the Silverlight javascript and xaml files on your server.  Also, the XAML for your player can be whatever you like just make sure to remove the source attribute from the mediaelement.  Same with the placeholderimage.

Cheers!

Rod.

source for .htm file

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>RodsPlayer</title>

    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="silverlightplayercreate.js"></script>
    <script type="text/javascript" src="silverlightplayer.js"></script>
    <style type="text/css">
        .silverlightHost {
            height: 400px;
            width: 414px;
            position:absolute;left:0; top:0;
        }
    </style>
</head>

<body>
    <div id="SilverlightControlHost" class="silverlightHost">
        <script type="text/javascript">
            createSilverlight();

        </script>
    </div>
</body>
</html>

function canvas_loaded(sender, args)
{
    var plugin = sender.getHost();
    plugin.content.onfullScreenChange = onFullScreenChanged;
    var qs = location.search.substring(1, location.search.length);

      var args = qs.split("&");

      var vals = new Object();

      for (var i=0; i < args.length; i++) {

        var nameVal = args[i].split("=");

        var temp = unescape(nameVal[1]).split(‘+’);

        nameVal[1] = temp.join(‘ ‘);

        vals[nameVal[0]] = nameVal[1];

    }
    var mediaPlayer = sender.findName("media");
    mediaPlayer.Source = vals["Source"]; 
    var placeholder = sender.findName("PlaceholderImage");
    placeholder.Source = vals["Placeholder"]; 
}