Blog Archives

Customizing the CQWP and Project Portfolio Dashboard creation

My basic goal was to aggregate the information about all the projects within the site collection and present them in a list with some additional formatting (e.g. status icons). The basic webpart, which aggregates data within given location is a Content Query Web Part (CQWP). At first sight this web part is not atractive and has a boring view, but has a very important functionality. When I started investigating, how we can customize the view, I concluded that with some knowledge of XSL, we can build rich views.

Here are the steps, which I took before I started with the CQWP (configuring project portfolio site):

  1. I defined a new content type named “Project statement”, which consists of general project data (e.g. customer, project manager, planed data, start, finish, status, time etc).
  2. Then I created a new site named “Projcet Site” and on this site a list named “Project information”. On this list only “Project statement” content type is allowed. I allow only one item on this list. So, every project has only one “Project statements”,
  3. After that I configured also some other structure, which is typical for the project (libraries, lists, KPI’s etc). Finally, I saved it as site template. With every new project I create a new project site and with each new project site one new “porject statement”.
  4. The only thing that is missing is a project dashboard, which can show me the status of the projects.

Here are the steps, how I basicly configured the project dashboard:

  1. On the site collections home web parts page I inserted a CQWP. If  CQWP is not available, activate “Publishing Infrastructure” feature on the site collection.
  2. Edit Web part. In the “Content Type” section select the desired content type group and then in the “specify your content type.
  3. Now, we have to customize the CQWP according to our needs.

CQWP customization steps are described in in the sites, that are given at the end of this post. Here is my customized style.

    <!--Put header contents here: column name lables write only before first row of data -->
     <xsl:if test="count(preceding-sibling::*)=0">
	<table width="100%">
     	   <tr>
    	       <th align="left" width="20"></th>					<!--Workspace Icon-->
	    	   <th align="left" width="100">Ime projekta</th>
	    	   <th align="left" width="100">Kupec</th>
	    	   <th align="left" width="120">Vodja projekta</th>
	    	   <th align="left" width="20"></th>					<!--Status Icon-->
	    	   <th align="left" width="80">Stanje</th>
	    	   <th align="left" width="120">Vrednost</th>
	    	   <th align="left" width="20">Čas</th>					<!--Time Icon-->
	    	   <th align="left" width="130">Rok</th>
	    	   <th align="left" width="20">Uredi</th>				<!--Edit Icon-->
    	   </tr>
	</table>
    </xsl:if>

   <table style="width:100%;" cellpadding="0" cellspacing="0">
    <tr>
      <!--Workspace icon-->
      <td width="20">
         <a class="Image" href="{substring-before(substring-after(@FileRef,'/'),'/Lists/Izkaznica')}" target="{$LinkTarget}">
	      <IMG>
 	         <xsl:attribute name="border">
 	           <xsl:value-of select="0"/>
 	         </xsl:attribute>
 	         <xsl:attribute name="src">
 	           <xsl:value-of select="'../_layouts/images/mtgicon.gif'"/>
 	         </xsl:attribute>
 	         <xsl:attribute name="alt">
 	           <xsl:value-of select="@Title"/>
 	         </xsl:attribute>
 	      </IMG>
        </a>
      </td>

       <!-- Project name with the link to the project site-->
       <td width="100">
        <a href="{substring-before(substring-after(@FileRef,'/'),'/Lists/Izkaznica')}">
         	<xsl:value-of select="@Title"/>
        </a>
      </td>

       <!-- Customer name -->
      <td width="90">
        <xsl:value-of select="@CustomerName"/>
      </td>

       <!-- Project manager -->
      <td width="120">
        <xsl:value-of select="@ProjectManager"/>
      </td>

      <!--Status Icon-->
      <td width="20">
         <a class="Image" href="{$SafeLinkUrl}" target="{$LinkTarget}">
	      <IMG>
 	         <xsl:attribute name="border">
 	           <xsl:value-of select="0"/>
 	         </xsl:attribute>
 	         <xsl:attribute name="src">
 	           <xsl:value-of select="substring-before(@StateIcon,',')"/>
 	         </xsl:attribute>
 	         <xsl:attribute name="alt">
 	           <xsl:value-of select="@Title"/>
 	         </xsl:attribute>
 	      </IMG>
        </a>
      </td>

      <!--Project Status (text)-->
      <td width="70">
        <xsl:value-of select="@ProjectState"/>
      </td>

      <!--Ammount-->
      <td allign="right" width="100">
         <xsl:value-of select="format-number(@ContractAmmount,'###,###.00 €')"/>
      </td>

      <!--Time icon-->
      <td width="20">
         <a class="Image" href="{$SafeLinkUrl}" target="{$LinkTarget}">
	      <IMG>
 	         <xsl:attribute name="border">
 	           <xsl:value-of select="0"/>
 	         </xsl:attribute>
 	         <xsl:attribute name="src">
 	           <xsl:value-of select="substring-before(@TimeIcon,',')"/>
 	         </xsl:attribute>
 	         <xsl:attribute name="alt">
 	           <xsl:value-of select="@Title"/>
 	         </xsl:attribute>
 	      </IMG>
        </a>
      </td>

      <!--Planned start
      <td width="80" bgcolor="yellow">
        <xsl:value-of select="@PlannedStart"/>
      </td>
      -->

      <!--Due date-->
      <td width="130">
        <xsl:value-of select="@PlannedFinish"/>
      </td>

      <!--Edit icon _ Projcet edit-->
      <td width="20">
         <a class="Image" href="{$SafeLinkUrl}" target="{$LinkTarget}">
	      <IMG>
 	         <xsl:attribute name="border">
 	           <xsl:value-of select="0"/>
 	         </xsl:attribute>
 	         <xsl:attribute name="src">
 	           <xsl:value-of select="'../_layouts/images/edititem.gif'"/>
 	         </xsl:attribute>
 	         <xsl:attribute name="alt">
 	           <xsl:value-of select="@Title"/>
 	         </xsl:attribute>
 	      </IMG>
        </a>
      </td>

      <!--Actual project start date
      <td width="80">
        <xsl:value-of select="@ActualStart"/>
      </td>
      -->

      <!--Actual project finish date
      <td width="80">
        <xsl:value-of select="@ActualFinish"/>
      </td>
      -->

    </tr>
    </table>

	<!--Put footer contents here: only after last row of data
     <xsl:if test="count(following-sibling::*)=0">
	<table bgcolor="yellow" width="100%">
     	   <tr>
	        <td>Footer</td>
    	   </tr>
	</table>
    </xsl:if>
    -->

    </xsl:template>

And here you can see my final product (customized CQWP, which includes icons and some other formated text):

As you can see I used standard SharePoint icons because it is much easier for maintanance of the system.

I gathered helpful  information to solve my challange (customizing CQWP) on the following sites:

Enhanced by Zemanta