Customize Content Query Webpart in Sharepoint 2010 and Deploy it using Visual Studio 2010

Scenario : I am working on Public facing site in Sharepoint 2010 and i have custom page layout to create pages for events.Now i had requirement to display all these events on home page of site as a Slider.
here is what i am trying to achieve go to http://www.music.udel.edu/Pages/home.aspx and look at In the Spotlight Webpart and it’s none another then most Popular CQWP Webpart in Sharepoint 2010.
Now let’s take look at technical aspect of this Custom CQWP.This CQWP will Query items created based on Event Publicity Content type and check to display as a Spotlight from Page Library called Pages located at site /news-events/events/ and display fields called Title1,Blurb;Location,RollupImage;Spotlightdatetime.OK so Now ready for some fun ? Go to page on which you want to add CQWP in my case its home page of site and edit page to add CQWP in one of Webpart Zone.It’s time to Configure CQWP as per requirement in my case it looks like as shown in image(Query & Presentation).Click on image to view it as large.


Once you verify that CQWP displaying all fields(don’t worry about Presentation) export webpart and save it some location and give it name like Spotlight.webpart.
In order to implement Slider functionality i have used Jquery plugin from EasySlider
Html markup for this jquery plugin to work

<div id="slider">
<ul>
	<li><img src="images/01.jpg" alt="" /></li>
	<li><img src="images/02.jpg" alt="" /></li>
	<li><img src="images/03.jpg" alt="" /></li>
	<li><img src="images/04.jpg" alt="" /></li>
	<li><img src="images/05.jpg" alt="" /></li>
</ul>
</div>

Now based on Query and presentation as per above CQWP render following html markup

<div id="cbqwpctl00_ctl24_g_a2d52845_efc6_449c_acd1_7268e2dd70e2" class="cbq-layout-main">
<ul class="dfwp-column dfwp-list" style="width: 100%;">
	<li class="dfwp-item">
<div class="item">
<div class="image-area-left">
                      <a href="http://Server/news-events/events/Pages/choral.aspx"><img class="image" src="/news-events/events/PublishingImages/u-singers.jpg" alt="" /></a></div>
<div class="link-item">
                     <a href="http://Server/news-events/events/Pages/choral.aspx">Choral Concert with Concert Choir, University Singers and Schola Cantorum</a>
<div class="description">
                          ​Paul D. Head and Duane Cottrell, directors<br />Featuring Vivaldi’s Beatus Vir for double chorus and chamber orchestra.<br /></div>
</div>
</div></li>
	<li>same as above but for second item</li>
</ul>
</div>

As you can see this is exactly what we want to work for our plugin with some modification to give div id in our case its Slider and also add slots for Location and Spotlightdatetime,get rid of Css class that we don’t need.So in order to get this done you have modify either ContentQuerymain.xsl or ItemStyle.xsl or both in my case i had to modify both. Now i personally don’t modify out of box files but instead get copy of it and give some name and then modify copy.In order to do this open Style Library in SPD 2010 and make copy of it and open copy to modify in Editor.In Our case we need to get rid of class=”cbq-layout-main” and replace id=”cbqwpctl00_ctl24_g_a2d52845_efc6_449c_acd1_7268e2dd70e2″ with Slider so open copy of ContentQuerymain.xsl lets say it SpotlightContentQueryMain.xsl and find OuterTemplate and modify as per below

<xsl:template name="OuterTemplate">
        <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row" />
        <xsl:variable name="RowCount" select="count($Rows)" />
        <xsl:variable name="IsEmpty" select="$RowCount = 0" />
             <div id="slider">
                 <xsl:if test="$cbq_iseditmode = 'True' and string-length($cbq_errortext) != 0">
                    <div class="wp-content description">
                        <xsl:value-of disable-output-escaping="yes" select="$cbq_errortext" />
                    </div>
                  </xsl:if>
                  <xsl:choose>
                      <xsl:when test="$IsEmpty">
                           <xsl:call-template name="OuterTemplate.Empty" >
                               <xsl:with-param name="EditMode" select="$cbq_iseditmode" />
                           </xsl:call-template>
                      </xsl:when>
                      <xsl:otherwise>
                           <xsl:call-template name="OuterTemplate.Body">
                               <xsl:with-param name="Rows" select="$Rows" />
                               <xsl:with-param name="FirstRow" select="1" />
                               <xsl:with-param name="LastRow" select="$RowCount" />
                          </xsl:call-template>
                      </xsl:otherwise>
                  </xsl:choose>
            </div>
      
            <xsl:if test="$FeedEnabled = 'True' and $PageId != ''">
                <div class="cqfeed">
                    <xsl:variable name="FeedUrl1" select="concat($SiteUrl,$FeedPageUrl,'xsl=1&amp;web=',$WebUrl,'&amp;page=',$PageId,'&amp;wp=',$WebPartId,'&amp;pageurl=',$CBQPageUrl,$CBQPageUrlQueryStringForFilters)" />
                    <a href="{cmswrt:RegisterFeedUrl( $FeedUrl1, 'application/rss+xml')}"><img src="\_layouts\images\rss.gif" border="0" alt="{cmswrt:GetPublishingResource('CbqRssAlt')}"/></a>
                </div>
            </xsl:if>
    </xsl:template>

Now its time to modify ItemStyle.xsl file where presentation of items happen to include Slots for additional fields to display,css and may be some additional html markup.Now here we have two options to modify ItemStyle.xsl first one is you can modify ItemStyle.xsl in which you can copy of style that match closet to your req and modify it in our case its image on left or second option get copy of ItemStyle.xsl and get rid of all template except the one which is closet match to you req and modify it to get rid of OOB css class,to add custom css and html markup.In my case its looks like as per below

<xsl:stylesheet
     version="1.0" 
     exclude-result-prefixes="x d xsl msxsl cmswrt"
     xmlns:x="http://www.w3.org/2001/XMLSchema" 
     xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" 
     xmlns:cmswrt="http://schemas.microsoft.com/WebParts/v3/Publishing/runtime"
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt">
  <xsl:param name="ItemsHaveStreams">
    <xsl:value-of select="'False'" />
  </xsl:param>
  <xsl:variable name="OnClickTargetAttribute" select="string('javascript:this.target=&quot;_blank&quot;')" />
  <xsl:variable name="ImageWidth" />
  <xsl:variable name="ImageHeight" />

 <xsl:template name="ShowXML" match="Row[@Style='ShowXML']" mode="itemstyle">
    <xsl:for-each select="@*">
      Name: <xsl:value-of select="name()" /> Value:<xsl:value-of select="." /><br/>
    </xsl:for-each>
  </xsl:template>

 <xsl:template name="SpotLight" match="Row[@Style='SpotLight']" 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="DisplayTitle">
      <xsl:call-template name="OuterTemplate.GetTitle">
        <xsl:with-param name="Title" select="@Title"/>
        <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
      </xsl:call-template>
    </xsl:variable>
    <div class="item">
       <xsl:if test="string-length($SafeImageUrl) != 0">
          <div class="image-area-left">
          <!-- <a href="{$SafeLinkUrl}">
                              <xsl:if test="$ItemsHaveStreams = 'True'">
                                <xsl:attribute name="onclick">
                                  <xsl:value-of select="@OnClickForWebRendering"/>
                                </xsl:attribute>
                              </xsl:if>
                              <xsl:if test="$ItemsHaveStreams != 'True' and @OpenInNewWindow = 'True'">
                                <xsl:attribute name="onclick">
                                  <xsl:value-of disable-output-escaping="yes" select="$OnClickTargetAttribute"/>
                                </xsl:attribute>
                              </xsl:if>
                         </a> -->
               <img class="image" src="{$SafeImageUrl}" title="{@ImageUrlAltText}">
            <xsl:if test="$ImageWidth != ''">
              <xsl:attribute name="width">
                <xsl:value-of select="$ImageWidth" />
              </xsl:attribute>
            </xsl:if>
            <xsl:if test="$ImageHeight != ''">
              <xsl:attribute name="height">
                <xsl:value-of select="$ImageHeight" />
              </xsl:attribute>
            </xsl:if>
          </img>
        </div>
      </xsl:if>

       <div class="link-item">
        <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
          <a href="{$SafeLinkUrl}" title="{@LinkToolTip}">
                    <xsl:if test="$ItemsHaveStreams = 'True'">
                      <xsl:attribute name="onclick">
                        <xsl:value-of select="@OnClickForWebRendering"/>
                      </xsl:attribute>
                    </xsl:if>
                    <xsl:if test="$ItemsHaveStreams != 'True' and @OpenInNewWindow = 'True'">
                      <xsl:attribute name="onclick">
                        <xsl:value-of disable-output-escaping="yes" select="$OnClickTargetAttribute"/>
                      </xsl:attribute>
                    </xsl:if> 
            <xsl:value-of select="$DisplayTitle"/></a>
            <p>
              <xsl:value-of select="@Spotlightdatetime"/>
            </p>
            <p>
               <xsl:value-of select="@Location"/>
           </p>
           <div class="description">
                <xsl:value-of select="@Description" disable-output-escaping="yes"/>
           </div>
      </div>
    </div>
  </xsl:template>
</xsl:stylesheet>

As you can see in this line means name of Style is Spotlight which can be selected in CQWP Presentation Section and also @Spotlightdatetime and @Location in file which will generate Slots for those two fields in Presentation section of CQWP.You can see in Image below

Wouldn’t be better for user to insert only webpart on page and just give Fields to display in slots and its done ?Also you don’t want to repeat all these steps in different environments like Dev,staging and production. Ok so how we can go for it.Now it’s time to dive in Visual Studio 2010 and Create Empty Sharepoint Project and give it name in my case CAS.SpotlightWebPart.Now in Solutions Explorer right Click on Project and add New SPI called Module and give it some name in my case its Spotlight.Now right Click on Spotlight and add existing item previously exported file called Spotlight.webpart and also download copy of SpotlightContentQueryMain.xsl and SpotlightStyle.xsl and add it under module called Spotlight.Project Structure should like this
.
Now in Properties window of project CAS.SpotlightWebPart change Site Url to your local sharepoint site and set Include in Assembly to False.
Elemenets.xml file should like this

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Url="Style Library/XSL Style Sheets" Path="SpotlightWebPart">
      <File Name="SpotlightContentQueryMain.xsl" Url="SpotlightContentQueryMain.xsl" Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" />
      <File Name="SpotlightStyle.xsl" Url="SpotlightStyle.xsl" Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" />
</Module>
<Module Url="_catalogs/wp" List="113" Path="SpotlightWebPart" >
    <File Name="Spotlight.webpart" Url="Spotlight.webpart" Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" >
         <Property Name="Group" Value="CAS WebPart" />
    </File>
</Module>
</Elements>

Now we need to Modify Spotlight.webpart to update reference to our SpotlightContentQueryMain.xsl and SpotlightStyle.xsl so double click on file in VS 2010 to open in editor and modify following Properties

   <property name="ItemXslLink" type="string">/Style Library/XSL Style Sheets/SpotlightStyle.xsl</property>
   <property name="CommonViewFields" type="string">Spotlightdatetime,Text;Location,Text;</property>
   <property name="MainXslLink" type="string" >/Style Library/XSL Style Sheets/SpotlightContentQueryMain.xsl</property>

you can modify other properties as per your business requirement and its all documented on MSDN.Now Build Project,Package it and Deploy.

About these ads

9 thoughts on “Customize Content Query Webpart in Sharepoint 2010 and Deploy it using Visual Studio 2010

  1. Hi Ronak

    Can you please provide us the details, about where you have used the slider jquery files. If you can provide the full working copy it would be very helpful.

    • Hi Srividya i didn’t understand your question what you mean where i have used slider jquery files ? you mean where i reference those files ? if yes then i have reference those file in page layout as i have page layout for my home page.

      Thanks
      Ronak

  2. i didn’t understand your question what you mean where i have used slider jquery files ? you mean where i reference those files ? if yes then i have reference those file in page layout as i have page layout for my home page.

  3. I’ve tried this script but the slider is not moving and the browser status show error “Object doesn’t support this property or method” points to the line of $(“#slider”).easySlider()

    Do you know what’s the cause?

  4. Have you ever played to see if you can get custom site column information to output to the resultant rss generated by content query web parts?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s