How to customize item style template?

Question

SP newbie here. I am trying to understand then customize a built-in item style template (copied from the ItemStyle.xsl file) below.

1 Where can I find the functions OuterTemplate.*?

2 Should I want to add another field to display and get user input like in the picture below, where do I add it?

<xsl:template name="ImageRight" match="Row[@Style='ImageRight']" 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-right">
                <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>
                  <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>
                </a>
            </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>
            <div class="description">
                <xsl:value-of select="@Description" />
            </div>
        </div>
    </div>
</xsl:template>

Answer 1

It sounds to me as if you have already got a copied version of the ItemStyle.xsl and want to know how to customise the XSLT? If this is the case then there are a few XSLT posts on the blog at http://paylord.wordpress.com which should help you get started.

Since SP2010 it has been a lot easier to add new fields - you simply need to add them to your XSLT and a new "slot" will appear in your Fields To Display as above where you can then choose which column you would like to map to it. For example:

<xsl:value-of select="@Newfield" />

This will give you a new slot called NewField where you can type in the column from your list.

You also asked about where to find OuterTemplate. Both the ContentQueryMain.xsl and Header.xsl are linked through the CQWP. Most of the references such as OuterTemplate are in ContentQueryMain.xsl.

Answer 2

To add the custom field

1.Add a Content By Query Web Part to a page

2.Edit the properties in the Web Part file to display custom fields. To access the .webpart file for the Web Part, on the Web Part's Edit menu, click Export.

SharePoint Server 2010 generates a .webpart file with the complete set of properties that are available for this Web Part. The .webpart file is an XML file that you can edit by using a text editor.

3.In the .webpart file, locate the CommonViewFields property. Use this property to specify the additional fields that you want to display in the Web Part. Add the internal names of the columns and the type.

<property name="CommonViewFields" type="string">KB_x0020_Title,Text;Product,Text;</property>

4.Map these internal column names to the columns' Title and Description that are present in the XSLT transformations. To do this, edit the DataColumnRenames property.

<property name="DataColumnRenames" type="string">KB_x0020_Title,Title;Product,Description</property>

5.Save the .webpart file locally.

6.In the Web page, delete the Content By Query Web Part that you added in step 1.

7.Import the .webpart file and add the Web Part to your page. To import the .webpart file, click Page, click Add Web Parts, and then click Import. Browse to the .webpart file, and then click Upload.

8.Drag the Web Part to the appropriate zone in the page. The Web Part should display the Knowledge Base Title and the product name. Reference

To make changes in the columns to be displayed and the way it has to be displayed edit the xsl. Refer this for more insight.