+ Start a Discussion
ericmonteericmonte 

Content Previewer in Visualforce

Anyone know how to put a content Previewer on Visualforce page?

Best Answer chosen by Admin (Salesforce Developers) 
ericmonteericmonte

So fortunately, i found a solution to allow Documient Preview in Visualforce. I was able to expect the Content Preview and able to see the Scripts and swf information referencing the Document Preview. Here is the following code that I am using to leverage Content Preview and preview of my VF Page:

 

<apex:page standardController="ContentVersion" sidebar="false" showHeader="false" >
    <apex:pageBlock >
        <apex:pageBlockSection title="{!ContentVersion.Title} - {!ContentVersion.Id}" >
            <apex:outputField value="{!ContentVersion.Title}"/>
            <apex:outputField value="{!ContentVersion.TagCSV}"/>
            <apex:outputField value="{!ContentVersion.CreatedDate}"/>
            <apex:outputField value="{!ContentVersion.Description}"/>
            <apex:outputField value="{!ContentVersion.FileType}"/>
            <apex:outputField value="{!ContentVersion.Title}"/>
        
        </apex:pageBlockSection>
    </apex:pageBlock>


<div id="dpvPreviewWrapper" align="center">
<h2 class="filePreviewHeading">Preview</h2>
<div class="chatterFileViewerPanel" id="chatterFileViewerPanel">

<embed src="/DocViewer.swf"  id="renditionLarge" quality="high" bgcolor="#f3f3f3" name="renditionLarge" allowscriptaccess="sameDomain" allowfullscreen="true" pluginspage="http://www.adobe.com/go/getflashplayer" wmode="opaque" type="application/x-shockwave-flash" align="middle" height="700px" width="800px"/><noembed><p>Flash file preview</p></noembed></div>
<script>insertFlexComponent('/_swf/121310/sfc/flex/DocViewer', 'shepherd_prefix=/sfc/servlet.shepherd&v={!ContentVersion.Id}&mode=chatterfilepreview&in_tests=false', '700px', '400px', '#f3f3f3', 'chatterFileViewerPanel', 'renditionLarge', false, { adobeFlashVersionLbl : 'You must enable or download Adobe Flash Player version 9.0.115 or later to use this feature.', downloadAdobeLbl : 'Download Adobe Flash Player', downloadAdobeLinkLbl : 'Click the link below to download the Adobe Flash Player:', closeDialogLbl : 'Cancel'}); Ninja.Flex.ContentStaticResourcesBase = '/_swf/121310/sfc';Ninja.Flex.ShepherdController = '/sfc/servlet.shepherd';</script>
</div>




</apex:page>

 

This is hacky solution and not sure if SFDC supports, but it works for me and I know down the line if something changes with this in SFDC I am screwed and I need to make changes. 

All Answers

Vinita_SFDCVinita_SFDC

Hello,

 

As of now there is no tag available in visualforce for implementing preview, there is an idea posted on ideaexchange portal for the same.

 

Although you can implement this with the help of jQuery, Javascript. Refer following links:

 

http://salesforce.stackexchange.com/questions/4715/document-preview-with-visualforce

 

http://papermashup.com/create-a-dynamic-form-preview/

 

I would suggest you to vote for the idea at: https://success.salesforce.com/ideaView?id=08730000000Y1QLAA0

ericmonteericmonte

So fortunately, i found a solution to allow Documient Preview in Visualforce. I was able to expect the Content Preview and able to see the Scripts and swf information referencing the Document Preview. Here is the following code that I am using to leverage Content Preview and preview of my VF Page:

 

<apex:page standardController="ContentVersion" sidebar="false" showHeader="false" >
    <apex:pageBlock >
        <apex:pageBlockSection title="{!ContentVersion.Title} - {!ContentVersion.Id}" >
            <apex:outputField value="{!ContentVersion.Title}"/>
            <apex:outputField value="{!ContentVersion.TagCSV}"/>
            <apex:outputField value="{!ContentVersion.CreatedDate}"/>
            <apex:outputField value="{!ContentVersion.Description}"/>
            <apex:outputField value="{!ContentVersion.FileType}"/>
            <apex:outputField value="{!ContentVersion.Title}"/>
        
        </apex:pageBlockSection>
    </apex:pageBlock>


<div id="dpvPreviewWrapper" align="center">
<h2 class="filePreviewHeading">Preview</h2>
<div class="chatterFileViewerPanel" id="chatterFileViewerPanel">

<embed src="/DocViewer.swf"  id="renditionLarge" quality="high" bgcolor="#f3f3f3" name="renditionLarge" allowscriptaccess="sameDomain" allowfullscreen="true" pluginspage="http://www.adobe.com/go/getflashplayer" wmode="opaque" type="application/x-shockwave-flash" align="middle" height="700px" width="800px"/><noembed><p>Flash file preview</p></noembed></div>
<script>insertFlexComponent('/_swf/121310/sfc/flex/DocViewer', 'shepherd_prefix=/sfc/servlet.shepherd&v={!ContentVersion.Id}&mode=chatterfilepreview&in_tests=false', '700px', '400px', '#f3f3f3', 'chatterFileViewerPanel', 'renditionLarge', false, { adobeFlashVersionLbl : 'You must enable or download Adobe Flash Player version 9.0.115 or later to use this feature.', downloadAdobeLbl : 'Download Adobe Flash Player', downloadAdobeLinkLbl : 'Click the link below to download the Adobe Flash Player:', closeDialogLbl : 'Cancel'}); Ninja.Flex.ContentStaticResourcesBase = '/_swf/121310/sfc';Ninja.Flex.ShepherdController = '/sfc/servlet.shepherd';</script>
</div>




</apex:page>

 

This is hacky solution and not sure if SFDC supports, but it works for me and I know down the line if something changes with this in SFDC I am screwed and I need to make changes. 

This was selected as the best answer
Dilip SinghDilip Singh
Hi ericmonte,
Good explaination and your code is working fine for the browsers, but it not working in iPad because swf not supported by iPad.. have any idea or code need your help...
 
unidhaunidha
Hi,

Has anyone found any solution for this. I 've tried to copy @ericmonte code but it give me error
Error: The value of attribute "pluginspage" associated with an element type "embed" must not contain the '<' character.

 
Madhav KuchimanchiMadhav Kuchimanchi
Hi ,
Iam having issues with document preview in SFDC and it was working fine before .Does anyone know if flash plugin is having issues with VF Pages.
 
@Ashish Narang@Ashish Narang
Flash based preview is still working for us but looking for non flash solution.
Any suggestions ?