How to show file/folder icons depending on the type in Content Query Webpart

Requirement:

• How to show file/folder icons depending on the type in Content Query Webpart

POINTS to Remember:

1. NOTE:
2. In any other Site except of Publishing Type, activate the following two features in your site, to have Content Query Webpart
3. In Site Collection Features: Office SharePoint Server Publishing Infrastructure
4. In Site Features: Office SharePoint Server Publishing

Attachment:

1. The attachment contains Sample_Files zip which in turn contains 2 files for reference:
2. webpart file
3. ItemStyle.xsl

Steps to REPRO the OOB functionality:

1. ADD Content Query Webpart to your Webpart page
2. Set the query properties to display the items from specific site or list of any content or specific content type.
3. The result are shown, BUT whether the shown item is doc, xls, pdf , folder or any other type is not visible.
4. The resolution for the same is below

Resolution / WorkAround:

1. There are 2 fields which determine whether its is file or folder. And if it is file then which type:
   • File Type
   • HTML File Type
2. The above field names are the Display Names. Their Internal Names are:
   • File_x0020_Type
   • HTML_x0020_File_x0020_Type (Note: The space is replaced by "_x0020_")
3. Now, add the Content query webpart to the page. (OOB webpart)
4. Export the webpart (by clicking on the webpart right side small arrow icon: Export)
5. Save the *.webpart file
6. Open the file in notepad
7. Search for word "CommonViewFields"
8. Change the property as below:
   <property type="string" name="CommonViewFields">File_x0020_Type, Text;HTML_x0020_File_x0020_Type, Text</property>
9. Now, save the *.webpart file
10. Go the respective SharePoint Site>> Site Settings >> Click on Webpart Gallery
11. Now, Upload the *.webpart file . (Make sure to give Name & Title differently)
12. Now, open the siet in SharePoint Designer
13. Browse to Style Library >> XSL Style Sheets >> ItemStyle.xsl . Checkout the file
14. Add the following namespace to the <xsl:stylesheet> ( this is the root node) tag
    xmlns:ddwrt="https://schemas.microsoft.com/WebParts/v2/DataView/runtime"
15. Now, append the following custom style template to the existing templates  (add inside the root node of  <xsl:stylesheet> )in the ItemStyle.xsl :
    <xsl:template name="MyCustomStyle" match="Row[@Style='MyCustomStyle']' mode='itemstyle">
          <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="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> <xsl:variable name="LinkTarget"> 
                 <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if> 
        </xsl:variable> 
         <div id="linkitem" class="item">
                    <xsl:variable name="CustomVariable1">
                              <xsl:value-of select="@File_x005F_x0020_Type" />
                     </xsl:variable>
                       <xsl:choose>
                                 <xsl:when test="string-length($CustomVariable1) != 0">
                                              <div class="image-area-left">
                                                       <a href="{$SafeLinkUrl}" mce_href="{$SafeLinkUrl}" target="{$LinkTarget}">
                                                                  <img class="image" alt="Type:{@File_x005F_x0020_Type} " src= "/_layouts/images/{ddwrt:MapToIcon(string(@HTML_x005F_x0020_File_x005F_x0020_Type),string(@File_x005F_x0020_Type))}"   />
                                                      </a> 
                                                </div> 
                                    </xsl:when> 
                                    <xsl:otherwise>
                                                 <div class="image-area-left">
                                                               <a href="{$SafeLinkUrl}" mce_href="{$SafeLinkUrl}" target="{$LinkTarget}">
                                                                              <img class="image" src= "/_layouts/images/FOLDER.GIF" alt="Type:Folder" />
                                                                </a>
                                                   </div> 
                                       </xsl:otherwise> 
                         </xsl:choose>
                        <div class="link-item">
                                        <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
                                                          <a href="{$SafeLinkUrl}" mce_href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
                                                                           <xsl:value-of select="$DisplayTitle"/>
                                                             </a>
                                                            <div class="description">
                                                                        <xsl:value-of select="@Description" />
                                                             </div>
                          </div>
              </div>
    </xsl:template>
16. Save the file & check in.
17. Now, Add the webpart (which is uploaded in Point 11) to the page
18. Edit the page and browse the webpart properties (Edit >> Modify Webpart)
19. Make sure to select appropriate values in the Query section: for List Type & Source
20. Open section Presentation and check for ItemStyle Field
21. Select the custom style name (here is "MyCustomStyle") from the dropdown
22. Save the changes and check the webpart.

End Result:

Sample_Files.zip