function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
tennvoltennvol 

Updated: Dynamically display icon based on file type in Salesforce CRM Content

For some reason, my message body disappeared when I posted it. 

 

I have created a Visualforce page that displays the documents in a specific Salesforce CRM Content Workspace.  I used this cookbook article as a template: http://developer.force.com/cookbook/recipe/displaying-salesforce-crm-content-documents-in-a-visualforce-page.  What I want to do is display an icon to represent the file type (determined by FileType field of ContentVersion object), or at least generate a more user friendly text label than the values that are in that field.  I am stumped as to how to accomplish this in Visualforce/Apex.  I thought I could create a method in my controller to return the name of an image file contained in a static resource, but I don't see how that could work.  Any help will be appreciated.

tennvoltennvol

So no one has any ideas?

Dmitri at hisoftDmitri at hisoft

Were you able to figure this out?

tennvoltennvol

Yes. I created a wrapper class that wrapped the ContentVersion class and added the additional properties I needed. It looks like this:

 

    public class UserDocument
    {
       private Map<String, String> fileTypeMap = new Map<String, String>
       {
        'BMP' => 'Image (BMP)',
        'CSV' => 'Comma Separated Values (CSV)',
        'EXCEL' => 'Excel (XLS)',
        'EXCEL_X' => 'Excel 2007 (XLSX)',
        'EXE' => 'Executable (EXE)',
        'GIF' => 'Image (GIF)',
        'JPG' => 'Image (JPG)',
        'MOV' => 'Video (MOV)',
        'MP4' => 'Video (MP4)',
        'PDF' => 'PDF',
        'PNG' => 'Image (PNG)',
        'POWER_POINT' => 'PowerPoint (PPT)',
        'POWER_POINT_X' => 'PowerPoint 2007 (PPTX)',
        'TEXT' => 'Text',
        'UNKNOWN' => 'Unknown',
        'WORD' => 'Word (DOC)',
        'WORD_X' => 'Word 2007 (DOCX)',
        'XML' => 'XML',
        'ZIP' => 'Zip'
       };
       
       private Map<String, String> fileTypeImageMap = new Map<String, String>
       {
        'BMP' => 'doctype_image_32.png',
        'CSV' => 'doctype_csv_32.png',
        'EXCEL' => 'doctype_excel_32.png',
        'EXCEL_X' => 'doctype_excel_32.png',
        'EXE' => 'doctype_exe_32.png',
        'GIF' => 'doctype_image_32.png',
        'JPG' => 'doctype_image_32.png',
        'MOV' => 'doctype_video_32.png',
        'MP4' => 'doctype_mp4_32.png',
        'PDF' => 'doctype_pdf_32.png',
        'PNG' => 'doctype_image_32.png',
        'POWER_POINT' => 'doctype_ppt_32.png',
        'POWER_POINT_X' => 'doctype_ppt_32.png',
        'TEXT' => 'doctype_txt_32.png',
        'UNKNOWN' => 'doctype_unknown_32.png',
        'WORD' => 'doctype_word_32.png',
        'WORD_X' => 'doctype_word_32.png',
        'XML' => 'doctype_xml_32.png',
        'ZIP' => 'doctype_zip_32.png'
       };
       
       public UserDocument(ContentVersion cv)
       {
          origContentVersion = cv;
          friendlyFileType = fileTypeMap.get(cv.FileType);
          fileTypeImageUrl = fileTypeImageMap.get(cv.FileType);
       }
       
       public ContentVersion origContentVersion { get; private set; }
       public String friendlyFileType { get; private set; }
       public String fileTypeImageUrl { get; private set; }
    }

 I build a list of this class in my page controller:

 

    private transient List<UserDocument> contentList;
    public List<UserDocument> getContentList() 
    {
       if (contentList == null)
       {
          contentList = new List<UserDocument>();
          for (ContentVersion cv : [SELECT id, Title, Description, FileType, ...
                FROM ContentVersion WHERE ...
                ORDER BY Title ASC])
          {
             contentList.add(new UserDocument(cv));
          }
       }
       return contentList;
    }

 Then I display it on my VisualForce page like this:

        <apex:dataTable id="table" value="{!contentList}" var="aDocument" >
        <apex:column >
                <apex:facet name="header">
                    <apex:commandLink value="File Type" action="{!doSort}"
                        rerender="table">
                        <apex:param name="sortField" value="FileType"
                            assignTo="{!sortField}" />
                    </apex:commandLink>
                </apex:facet>
                <apex:image url="{!URLFOR($Resource.Layout, aDocument.fileTypeImageUrl)}"
                    alt="{!aDocument.friendlyFileType}" />
            </apex:column>
            <apex:column >
                <apex:facet name="header">
                    <apex:commandLink value="Title" action="{!doSort}" rerender="table">
                        <apex:param name="sortField" value="Title" assignTo="{!sortField}" />
                    </apex:commandLink>
                </apex:facet>
                <apex:outputLink value="{!$Site.Prefix}/sfc/servlet.shepherd/version/download/{!aDocument.origContentVersion.Id}" target="_blank">
                    {!aDocument.origContentVersion.Title}
                </apex:outputLink>
             </apex:column>
            <apex:column >
                <apex:facet name="header">
                    <apex:commandLink value="Description" action="{!doSort}"
                        rerender="table">
                        <apex:param name="sortField" value="Description"
                            assignTo="{!sortField}" />
                    </apex:commandLink>
                </apex:facet>
                {!aDocument.origContentVersion.Description}
             </apex:column>
            <apex:column >
                <apex:facet name="header">
                    <apex:commandLink value="Product" action="{!doSort}"
                        rerender="table">
                        <apex:param name="sortField" value="Product__c"
                            assignTo="{!sortField}" />
                    </apex:commandLink>
                </apex:facet>
                {!aDocument.origContentVersion.Product__c}
             </apex:column>
        </apex:dataTable>

 In my implementation, the table is sortable by each column. I did not include the code for that above.

ac_astadiaac_astadia

Were you able to use the Salesforce icon library, or did you have to upload your own?  If you used your own, where did you get it?

tennvoltennvol
I used the Salesforce icons, but I had to download them individually and store them as a resource. There was probably a way to use them directly, but I didn't want to be dependent on undocumented resources.
ac_astadiaac_astadia

After doing a little research, I found out how to use the SFDC icons without having to create my own resource file. The icons are all stored in 1 PNG file, and they use CSS to determine which one to show.  To make this work with my VF page, I just needed to link to just 1 CSS file.  I modified your class to make it work.

 

public class ContentVersionWrapper
    {
    	private Map<String, String> fileTypeMap = new Map<String, String>
    	{
	        'BMP' => 'Image (BMP)',
	        'CSV' => 'Comma Separated Values (CSV)',
	        'EXCEL' => 'Excel (XLS)',
	        'EXCEL_X' => 'Excel 2007 (XLSX)',
	        'EXE' => 'Executable (EXE)',
	        'GIF' => 'Image (GIF)',
	        'JPG' => 'Image (JPG)',
	        'LINK' => 'External Link',
	        'MOV' => 'Video (MOV)',
	        'MP4' => 'Video (MP4)',
	        'PDF' => 'PDF',
	        'PNG' => 'Image (PNG)',
	        'POWER_POINT' => 'PowerPoint (PPT)',
	        'POWER_POINT_X' => 'PowerPoint 2007 (PPTX)',
	        'RTF' => 'Rich Text Format (RTF)',
	        'TEXT' => 'Text',
	        'UNKNOWN' => 'Unknown',
	        'VISIO' => 'Visio (VSD)',
	        'WORD' => 'Word (DOC)',
	        'WORD_X' => 'Word 2007 (DOCX)',
	        'XML' => 'XML',
	        'ZIP' => 'Zip'
		};
       
		private Map<String, String> fileTypeStyleMap = new Map<String, String>
		{
	        'BMP' => 'sprite-doctype_image_16',
	        'CSV' => 'sprite-doctype_csv_16',
	        'EXCEL' => 'sprite-doctype_excel_16',
	        'EXCEL_X' => 'sprite-doctype_excel_16',
	        'EXE' => 'sprite-doctype_exe_16',
	        'GIF' => 'sprite-doctype_image_16',
	        'JPG' => 'sprite-doctype_image_16',
	        'LINK' => 'sprite-doctype_link_16',
	        'MOV' => 'sprite-doctype_video_16',
	        'MP4' => 'sprite-doctype_mp4_16',
	        'PDF' => 'sprite-doctype_pdf_16',
	        'PNG' => 'sprite-doctype_image_16',
	        'POWER_POINT' => 'sprite-doctype_ppt_16',
	        'POWER_POINT_X' => 'sprite-doctype_ppt_16',
	        'RTF' => 'sprite-doctype_rtf_16',
	        'TEXT' => 'sprite-doctype_txt_16',
	        'UNKNOWN' => 'sprite-doctype_unknown_16',
	        'VISIO' => 'sprite-doctype_visio_16',
	        'WORD' => 'sprite-doctype_word_16',
	        'WORD_X' => 'sprite-doctype_word_16',
	        'XML' => 'sprite-doctype_xml_16',
	        'ZIP' => 'sprite-doctype_zip_16'
		};
       
		public ContentVersionWrapper(ContentVersion CV)
		{
			origContentVersion = CV;
			friendlyFileType = fileTypeMap.get(CV.FileType);
			fileTypeStyle = fileTypeStyleMap.get(CV.FileType);
		}

		public ContentVersion origContentVersion { get; private set; }
		public String Id
		{
			get
			{
				return origContentVersion.ContentDocumentId;
			}
			private set;
		}
		public String FileName
		{
			get
			{
				return origContentVersion.ContentDocument.Title;
			}
			private set;
		}	
		public String FileType
		{
			get
			{
				return origContentVersion.FileType;
			}
			private set;
		}
		public String TagCsv
		{
			get
			{
				return origContentVersion.TagCsv;
			}
			private set;
		}
		public String friendlyFileType { get; private set; }
		public String fileTypeStyle { get; private set; }
    }

 VF page:

<apex:page controller="SalesMeetingPlannerController" name="Sales Meeting Planner">
<link href="/sCSS/25.0/sprites/1346435804000/Theme3/default/gc/chatterExtended.css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet" type="text/css"/>
<apex:repeat id="rDocs" value="{!ContentVersionWrapper}" var="Doc">
    <span class="fileTypeIcon">
	<img src="/s.gif" alt="{!Doc.friendlyFileType}" width="16" height="16" class="{!Doc.fileTypeStyle}" style="vertical-align: middle; margin-right: 0.4em;" title="{!Doc.friendlyFileType}"/>&nbsp;
    </span>
    <a href="/{!Doc.Id}">{!Doc.FileName}</a>
</apex:repeat>
</apex:page>

 

tennvol88tennvol88

Nice. Thanks for the update.