Silverlight 2 Search UI with Web Services

 
If you are bored and have Silverlight 2 Beta 2 installed check out an example of using Silverlight as a front-end to your
web services.  More details later this week.  Silverlight looking promising…
 
Press Link: Silverlight based search explorer using web services

Concept was conceived by Springbrain.com

Silverlight Search UI using web services

The UI is build exclusively with C# in Visual Studio 2008 which is also nicely
integrated with Microsoft Expression Blend (thank you Microsoft)  virtually all the
UI is developed in C# procedural code with only the container elements hard-coded
into the XAML.  Interesting way to do filtering of results sets is filtering the
container elements rather than making repeated call to web service when filtering-
providing virtually instananeous filtering of results.  cool.

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"]; 
}

 

Re-Publish Implementing Content Ratings for Sharepoint via SP Designer-Part II Step by Step

 

Part I

Recently had a request for a step-by-step for how to implement content rating on an existing Sharepoint list.

First, create a separate list to store the ratings: name it content ratings.  Add a column for the rating using a dropdown that contains your possible rating scores i.e. 1, 2, 3, 4, 5

Add another column and name it sourceid-add this column as a linked column pointing to the list where you are storing the items that will eventually be rated and set it to use the source list’s id for the value.  Do the same for the source list, add a field named Rated and point it to the content rating list and choose #Rated as the value (This is an easy way to retrieve the #rated content items from the content rating list later-plus you can re-format this field on your source list to display the actual star in a subsequent step) Tip: If you plan on using this list to store ratings for several lists throughout your site then add specific id fields for each source list and follow a naming convention that makes sense for your implementation: i.e. for rated best practices I used bpid, for rated call questions I used cqid, for FAQ’s I used FQID etc.  This will help choose the appropriate content when aggregating data later. 

Next from your source list (the one you will be storing the items that will be rated) create another view from the list named "rated content" Then open the site in Sharepoint Designer and navigate to the rated content.aspx page in the list’s folder. 

Next, convert the DVWP on the page to XSLT-right-click the form control, convert to XSLT.  Next create a linked datasource to the content rating list-notice your data connection library in the right nav in SP Designer-there is a add linked datasource button available that allows you to essentially link two lists together-choose JOIN list when the option appears and you will have access to the fields in both lists and be able to query the content rating list for the aggregate of the ratings when ready.

Next, drop this javascript into the newitem form for the content rating list in placeholder main to prepopulate the sourceid field when users rate content-

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.

Next, customize your DVWP on your source list (where the rated content resides) to display both the star ratings and a link for users to rate (linked to the content rating page passing the id in the query string as a parameter)  Look at the XSL in part I Content Rating in my blog for a detailed example of how to use X-Path to return a row of data back from the content rating list based on the id of the particular list item in your soure list. 

From the row item template on a custom list contained with a DVWP in XSLT format:

<xsl:template name="dvt_1.rowview">
  <xsl:param name="ParentPath" />
  <xsl:param name="SrcPos" />
<xsl:variable name="dvt_1ParentRow" select="current()" />
  <xsl:variable name="FilteredRatedQuestions" select="../../../Call_Question_Ratings/Rows/Row[@QuestionID=$dvt_1ParentRow/@ID]" />

Once I had a handle to a proper rowset then I could perform whatever calculations I deem necessary to display the appropriate star ratings:

In my scenario a five star rating based on a simple average sufficed and used the images already available in the layouts directory.

<xsl:choose>

          <xsl:when test="../../../Call_Question_Ratings/Rows/Row/@QuestionID=$dvt_1ParentRow/@ID">
             <xsl:variable name="dvt_1RowRating" select="format-number(sum($FilteredRatedQuestions/@Rating)div (@_x0023_Rated), &quot;###0.0;-###0.0&quot;)"/>
            <xsl:if test="$dvt_1RowRating &gt;= ‘2’ and $dvt_1RowRating  &lt; ‘3’">
              <img src="\_layouts\images\addtofavorites.gif" border="0" align="absmiddle"/>
              <img src="\_layouts\images\addtofavorites.gif" border="0" align="absmiddle"/>
             </xsl:if>
             <xsl:if test="$dvt_1RowRating &gt;= ‘3’ and $dvt_1RowRating  &lt; ‘4’">
              <img src="\_layouts\images\addtofavorites.gif" border="0" align="absmiddle"/>
              <img src="\_layouts\images\addtofavorites.gif" border="0" align="absmiddle"/>
              <img src="\_layouts\images\addtofavorites.gif" border="0" align="absmiddle"/>
             </xsl:if>
             <xsl:if test="$dvt_1RowRating &gt;= ‘4’ and $dvt_1RowRating  &lt; ‘5’">
              <img src="\_layouts\images\addtofavorites.gif" border="0" align="absmiddle"/>
              <img src="\_layouts\images\addtofavorites.gif" border="0" align="absmiddle"/>
              <img src="\_layouts\images\addtofavorites.gif" border="0" align="absmiddle"/>
              <img src="\_layouts\images\addtofavorites.gif" border="0" align="absmiddle"/>

             </xsl:if>
             <xsl:if test="$dvt_1RowRating &gt;= ‘5’ and $dvt_1RowRating  &lt; ‘6’">
              <img src="\_layouts\images\addtofavorites.gif" border="0" align="absmiddle"/>
              <img src="\_layouts\images\addtofavorites.gif" border="0" align="absmiddle"/>
              <img src="\_layouts\images\addtofavorites.gif" border="0" align="absmiddle"/>
              <img src="\_layouts\images\addtofavorites.gif" border="0" align="absmiddle"/>
              <img src="\_layouts\images\addtofavorites.gif" border="0" align="absmiddle"/>

             </xsl:if>
         </xsl:when>
         <xsl:otherwise>
             <img src="\_layouts\images\addtofavorites.gif" border="0"/>
            </xsl:otherwise>

         </xsl:choose>

Finally, this is optional but I added another view to the content rating list named "Rated Content" and customized the DVWP to my liking and added a parameter to filter the listitems by the same parameter in the query string I passed to the content rating list.  This makes it easy to add a link to your source list where users can view all the ratings for a particular content item. 

Hope this is enough to get you going-

In Part III coming soon I will cover adding a custom sort expression using a variation of the x-path expression above to pre-sort the content list based on the aggregate rating. 

cheers!

Rod.