none
ItemDisplay template with 2 columns

    Question

  • I have a modified XSL template that I'm using for a CQWP.  I made the original modifications to add in another column from the list I'm querying and changed the way the date/time was displayed.  However, I'm trying to modify the template to show two columns, one with the "@VolunteerOrganization" & "$DisplayTitle" item information in the column.  The template code is shown below.  I've tried using a <table>, but the CQWP keeps failing when I try to implement the modified ItemDisplay.xsl file.  I was hoping someone could help point me in the right direction.

    <xsl:template name="VolunteerOp" match="Row[@Style='VolunteerOp']" mode="itemstyle">
    	<div class="vo">
    		  <xsl:value-of select="@VolunteerOrganization" />
                <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="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 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>
    		<!-- <div class="WorkDammit">
                <xsl:value-of select="ddwrt:FormatDate(@Description, 1033, 2)" />
            </div> -->
    	  </div>
    	</div>
      </xsl:template>
    Thank You.

    Monday, March 13, 2017 8:22 PM

Answers

  • I think I have made a breakthrough with what I'm trying to do.  Using bits and pieces of information from some of these links, this is what I have come up with to get the list items to display their data in columns.

    <xsl:template name="VolunteerOp" match="Row[@Style='VolunteerOp']" mode="itemstyle"<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>
    <html>
    <table width="100%">
    <tr>
    <td width="50%"><div class="voitem"><xsl:value-of select="@VolunteerOrganization" /></div></td>
    <td width="50%"><div class="voitem"><xsl:value-of select="$DisplayTitle" /></div></td>
    </tr>
    </table>
    </html>
    </xsl:template>

    The only thing left is to change the Title of the items to actual links to their respective items.

    Thanks,
    Trevor Bensen

    • Marked as answer by tbensen Thursday, March 16, 2017 7:28 PM
    Tuesday, March 14, 2017 8:32 PM

All replies

  • Hi,

    If you want to show 2 column in Content Query Web Part, Check the XSL below:

    <xsl:template name="News" match="Row[@Style='News']" mode="itemstyle">
    <xsl:param name="CurPos" />
    <xsl:param name="LastRow" />
    <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>
    <xsl:variable name="LinkTarget">
    <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
    </xsl:variable>
    
    <xsl:if test="$CurPos = 1 ">
    <xsl:text disable-output-escaping="yes">&lt;div&gt;&lt;table&gt;</xsl:text>
    </xsl:if>
    <xsl:if test="$CurPos mod 2 = 1">
    <xsl:text disable-output-escaping="yes">&lt;tr&gt;</xsl:text>
    </xsl:if>
    
    
    <td width="50%" valign="top">
    <table width="90%">
    <tr height="27px" valign="top">
    <td>
    <span>
    <a href="{$SafeLinkUrl}">
    <xsl:value-of select="@Title"/>
    </a>
    </span>
    <span>
    <xsl:value-of select="ddwrt:FormatDateTime(@ArticleStartDate, 1033, 'MM-dd-yyyy')"/>
    </span>
    </td>
    </tr>
    <tr height="35px" min-height="35px" valign="top">
    <td>
    <span>
    <xsl:if test="string-length($SafeImageUrl) != 0">
    <div class="image-area-left">
    <a href="{$SafeLinkUrl}" target="{$LinkTarget}">
    <img class="image" width="100px" height="100px" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" />
    </a>
    </div>
    </xsl:if>
    <xsl:value-of select="substring(@Comments,0,200)"/>
    <xsl:if test="string-length(@Comments) &gt; 200">…</xsl:if>
    </span>
    <a href="{$SafeLinkUrl}"> Details…</a>
    </td>
    </tr>
    
    </table>
    </td>
    
    <xsl:if test="$CurPos mod 2 = 0">
    <xsl:text disable-output-escaping="yes">&lt;/tr&gt;</xsl:text>
    </xsl:if>
    <xsl:if test="$CurPos = $LastRow ">
    <xsl:text disable-output-escaping="yes">&lt;/table&gt;&lt;/div&gt;</xsl:text>
    </xsl:if>
    </xsl:template>
    

    The following articles for your reference:

    Displaying results in multiple columns using the Content Query Web Part

    https://pholpar.wordpress.com/2010/01/21/displaying-results-in-multiple-columns-using-the-content-query-web-part/

    Displaying results in multiple columns using the Content Query Web Part – the other direction

    https://pholpar.wordpress.com/2011/03/17/displaying-results-in-multiple-columns-using-the-content-query-web-part-the-other-direction/

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Tuesday, March 14, 2017 11:42 AM
    Moderator
  • Looking through these examples it appears as though the two columns are showing individual list items in each column.  I'm looking for a way to show two columns with information from the same list item.

    For example, my list item will have a Title = Build some homes. and a Volunteer Organization (custom column) = Habitat for Humanity.  I want to format the CQWP to show all the items like this:

    Build Some Homes           Habit for Humanity
    Another Title                    Red Cross
    Another Title                    Misc Volunteer Organization

    I have been able to modify the XSL template to show the custom column.

    Thank You,

    Trevor Bensen
    Tuesday, March 14, 2017 7:07 PM
  • I think I have made a breakthrough with what I'm trying to do.  Using bits and pieces of information from some of these links, this is what I have come up with to get the list items to display their data in columns.

    <xsl:template name="VolunteerOp" match="Row[@Style='VolunteerOp']" mode="itemstyle"<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>
    <html>
    <table width="100%">
    <tr>
    <td width="50%"><div class="voitem"><xsl:value-of select="@VolunteerOrganization" /></div></td>
    <td width="50%"><div class="voitem"><xsl:value-of select="$DisplayTitle" /></div></td>
    </tr>
    </table>
    </html>
    </xsl:template>

    The only thing left is to change the Title of the items to actual links to their respective items.

    Thanks,
    Trevor Bensen

    • Marked as answer by tbensen Thursday, March 16, 2017 7:28 PM
    Tuesday, March 14, 2017 8:32 PM
  • Hi Trevor,

    Yes, we can use <table/> to create two columns in the display template file.

    Thanks for your sharing.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, March 16, 2017 8:39 AM
    Moderator