It’s been a while since I posted due to a change in careers.  I have become an independent SharePoint consultant and am loving the change.

Reading my favourite (IT) site, EndUserSharepoint and all the interesting examples of what the authors are doing with SharePoint has gotten me very excited about the possibilities of integrating JQuery with SharePoint to create some very slick user interfaces.  I want to some highlights of this latest prototype because it touches on a lot of different areas.

Firstly the shoutouts:

Heather Solomon for her blog on Customizine the CQWP
Michael Hofer for rolling up blog comments with the CQWP
Everyone at EUSP

So without further ado here’s a quick video of what the prototype looks like.  Prototype

So the first thing I did was create a new site based on the Blog template, added a few posts and made a few of my typically dim comments.  I actually added a column on the comments list called Highlight which we’ll use later. 

I added a CQWP to my page and you’ll notice that there is no way to roll up blog comments from the UI.  A little research led me to Michael’s blog above.  So configuring the CQWP to roll up blog posts and then exporting it, modifying the server template property from 301 to 302 and reimporting it did the trick.  Keep in mind that if you modify the CQWP in the UI after words you’re going to have to go through that process again.

While we’re on the subject of modifying the webpart we might as well add the extra fields we’ll need to the CommonViewFields property in our webpart. Essentially this makes the fields available to use when modifying the XSL a little later.  For more information please read Heather Solomon’s post above.

<property name=”CommonViewFields” type=”string”>Body, Text;Title,Text;Highlight,Boolean</property>

Moving along….I wanted to get a  nice accordion effect with the results which naturally led me toward the jQuery accordion.  For those that haven’t used it, it really could not be simpler.  Add a reference to the right jquery libraries, format the HTML and away we go.  Actually in the interest of clarity, here are all the jquery references and code required for this sample.  I’ll explain them as we go:

Simply place this all into a Content Editor Web Part (this definitely is not a best practice but for the purposes of this article we’ll leave it like this).

  <script type=”text/javascript” src=”http://jqueryui.com/latest/jquery-1.3.2.js”></script>
  <script type=”text/javascript” src=”http://jqueryui.com/latest/ui/ui.core.js”></script>
  <script type=”text/javascript” src=”http://jqueryui.com/latest/ui/ui.accordion.js”></script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js”></script>
<link rel=”stylesheet” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/ui-lightness/jquery-ui.css” type=”text/css”>

<script type=”text/javascript”>
  $(document).ready(function(){
    $(“#accordion”).accordion(
{
    autoheight: false
}
);
jQuery(“#dialog”).dialog({
      bgiframe: true, autoOpen: false,  modal: true, show: ‘slide’
    });

  });

  function PopulateText(textToShow, title)
  {
        document.getElementById(“dialog”).innerHTML = textToShow;
        document.getElementById(“dialog”).title = title;
  }

 </script>

The appropriate HTML formatting for the accordion looks like this:

<div id=”accordion”>
    <h3><a href=”#”>First header</a></h3>
    <div>First content</div>
    <h3><a href=”#”>Second header</a></h3>
    <div>Second content</div>
</div>

Since we’ll need to control the HTML output we’ll turn to our friend the itemstyles.xsl file.  It’s located in the style library which is easy enough to find in SPD:

Again, for the mechanics of creating new templates etc. please refer to Heather’s blog post.  She’s far more articulate that your resident troglodyte here.  Anywhoo…we’ll create a new template and this is really where the magic happens.  The first challenge I had was that I needed to have a <div id=”accordion”></div>  block surrounding the CQWP.  But, obviously this output will be rendered for each item. 

However with the following check we can ensure that the following output is generated only for the first item.  I’ll explain the code snippet in red later – it’s not germane to this discussion.  So essentially on the first match we’re going to spit out <div id=”accordion”> and then everything else will be contained with in that div.

 <!–If this is the first match let’s put a header on it–>
  <xsl:if test=”count(preceding-sibling::*)=0″>
   <div id=”dialog” title=”Comment”>
    <p>
     <xsl:value-of select =”@Body” disable-output-escaping=”yes”/>
    </p>
   </div>
   <xsl:text disable-output-escaping=”yes”>&lt;div id=accordion &gt;</xsl:text>
  </xsl:if>

Of course then at the end of the template will put the following check it to render the closing tag on the last match:

  <!–If this is the last match we’ll put a footer on the end to close off the html–>
  <xsl:if test=”count(following-sibling::*)=0″>
   <xsl:text disable-output-escaping=”yes”>&lt;/div&gt;</xsl:text>
  </xsl:if>

The next step we want to do is make sure that only the list items or comments that have Highlight checked are rendered.

A very simple check like so makes that happen:  <xsl:if test=”@Highlight=’True’”> …put everything you want rendered in here  </xsl:if>

Now – you’ll notice in the video that when you click the more button for each item a nice jquery modal dialog pops up with the body of the comment.  Here’s how that was accomplished.

That snippet in red above is the container that will be required to store the text we want to show in the jQuery dialog so we’re going to need to come up with a way to dynamically populate this.

So in our XSL we will do the following – comments inline:

       <tr valign=”top”>
        <td><strong>Details</strong></td>
        <td valign=”bottom”>

<!–The users will click an image with the word “More” on it in order to show the comment body.  We wrap the image in an <a> tag and then in the click event we set the dialog properties (height, width etc.) and then we open the dialog.

However on the mousedown event (prior to the onclick) we render some script that will call the PopulateText function and pass in the comment Body (@Body).  When the dialog opens it will display the right text. 

–>   
<a href=”#” onclick=”jQuery(‘#dialog’).dialog(‘option’,'show’ , ‘slide’);jQuery(‘#dialog’).dialog(‘option’,'height’ , 300);jQuery(‘#dialog’).dialog(‘option’, ‘width’, 500);jQuery(‘#dialog’).dialog(‘open’); return false”>
   <xsl:attribute name=”onmousedown”>
   <xsl:text>javascript:PopulateText(“</xsl:text>
   <xsl:value-of select =”@Body” disable-output-escaping=”yes”/>
   <xsl:text>”, “Comment”);</xsl:text>
   </xsl:attribute>
   <img border=”0″ src=”/SiteCollectionImages/Moreicon.gif”></img>
   </a>
     </td>
       </tr>

In order to change the them for your accordion and dialog all you need to do is change the link to the theme css file (<link rel=”stylesheet” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/ui-lightness/jquery-ui.css” type=”text/css”>).

And that is how I created some nice effects for Blog Posts using the CQWP and jQuery.   I hope you enjoy, get some ideas and provide me with some feedback.

Jason

For reference sake the entire XSL template is below:

<xsl:template name=”HighlightedBlogComments” match=”Row[@Style='HighlightedBlogComments']” mode=”itemstyle”>
  <xsl:variable name=”SafeLinkUrl”>
            <xsl:call-template name=”OuterTemplate.GetSafeLink”>
                <xsl:with-param name=”UrlColumnName” select=”‘LinkUrl’”/>
            </xsl:call-template>
        </xsl:variable>
  <xsl:variable name=”SafeImageUrl”>
            <xsl:call-template name=”OuterTemplate.GetSafeStaticUrl”>
                <xsl:with-param name=”UrlColumnName” select=”‘ImageUrl’”/>
            </xsl:call-template>
        </xsl:variable>
  <xsl:variable name=”LinkTarget”>
            <xsl:if test=”@OpenInNewWindow = ‘True’” >_blank</xsl:if>
        </xsl:variable>
 
 <!–If this is the first match let’s put a header on it–>
  <xsl:if test=”count(preceding-sibling::*)=0″>
   <div id=”dialog” title=”Comment”>
    <p>
     <xsl:value-of select =”@Body” disable-output-escaping=”yes”/>
    </p>
   </div>
   <xsl:text disable-output-escaping=”yes”>&lt;div id=accordion &gt;</xsl:text>
  </xsl:if>
  <!–Only show the records where the HighLight Column has been checked–>
  <xsl:if test=”@Highlight=’True’”>
   <h4>
    <a href=”#”>
     <xsl:value-of select=”@Title”/>
    </a>
   </h4>
   <div height=”350″>
    <p>
     <font size=”1″>
      <table>
       <tr valign=”top”>
        <td><strong>Author</strong></td>
        <td><xsl:value-of select=”@Author”/></td>
       </tr>
       <tr valign=”top”>
        <td><strong>Posted On</strong></td>
        <td><xsl:value-of select=”@Created”/></td>
       </tr>
       <tr valign=”top”>
        <td><strong>Details</strong></td>
        <td valign=”bottom”>
   

   <a href=”#” onclick=”jQuery(‘#dialog’).dialog(‘option’,'show’ , ‘slide’);jQuery(‘#dialog’).dialog(‘option’,'height’ , 300);jQuery(‘#dialog’).dialog(‘option’, ‘width’, 500);jQuery(‘#dialog’).dialog(‘open’); return false”>
   <xsl:attribute name=”onmousedown”>
   <xsl:text>javascript:PopulateText(“</xsl:text>
   <xsl:value-of select =”@Body” disable-output-escaping=”yes”/>
   <xsl:text>”, “Comment”);</xsl:text>
   </xsl:attribute>
   <img border=”0″ src=”/SiteCollectionImages/Moreicon.gif”></img>
   </a>
  

   </td>
       </tr>
      </table>
     </font>
    </p>
   </div>
  </xsl:if>
  <!–If this is the last match we’ll put a footer on the end to close off the html–>
  <xsl:if test=”count(following-sibling::*)=0″>
   <xsl:text disable-output-escaping=”yes”>&lt;/div&gt;</xsl:text>
  </xsl:if>
 </xsl:template>