Access Salesforce Content on your VF Page

Recently I came across the Salesforce Content Related requirement, Salesforce only provide limited access to the content (ContentVersion object). It does not allow you to access the Content & show in your custom VF page.

Here Me & my friend Vinod did a lot of Rnd & found a easy solution. This post will save your lot of time if you are doing this kind of task with Content.

To implement its example, take a div

<div class="centerContent" id="myDiv"></div>

There are two simple JS function which will help to get salesforce content –

function OpenDoc(docId){

 

var htmlString = '<div id="chatterFileViewerPanel" class="chatterFileViewerPanel"><br/><br/> <embed height="500px" align="middle" width="500px" type="application/x-shockwave-flash" wmode="transparent" pluginspage="http://www.adobe.com/go/getflashplayer" allowfullscreen="true" allowscriptaccess="sameDomain" ' +

'name="renditionLarge" bgcolor="#f3f3f3" quality="high" id="renditionLarge" '

+'flashvars="shepherd_prefix=/sfc/servlet.shepherd&amp;v='+docId+'&amp;mode=chatterfilepreview&amp;in_tests=false" src="/static/101210/sfc/flex/DocViewer.swf" /> </div> ';

           

        document.getElementById('myDiv').innerHTML =  htmlString;

        PrepareFlexComponent(docId);

       

       

}

function PrepareFlexComponent(docId){

        insertFlexComponent('/static/102010/sfc/flex/DocViewer',

                'shepherd_prefix=/sfc/servlet.shepherd&v='+docId+'&mode=chatterfilepreview&
                amp;in_tests=false','500px', '500px', '#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 = '/static/102010/sfc';

        Ninja.Flex.ShepherdController = '/sfc/servlet.shepherd';

}  

Put below script as it is in your page

<script type="text/javascript" src="/static/101210/js/functions.js"></script>

<script  src="/EXT/ext-3.0.0/ext.js" type="text/javascript"></script>

<script  src="/jslibrary/1294273133000/main.js" type="text/javascript"></script>

<script  src="/jslibrary/1289945557000/Chatter.js" type="text/javascript"></script>

<script  src="/jslibrary/1289346548000/ChatterFiles.js" type="text/javascript"></script>

<script  src="/jslibrary/labels/1295420058000/en_US.js" type="text/javascript"></script>

<script type="text/javascript" src="/static/101210/desktop/desktopAjax.js"></script>

             

<script type="text/javascript" src="/static/101210/sfc/javascript/lib/AC_OETags.js"></script>

 

<script>

   function postSubDocument(url, internal) {

      var form = document.getElementById("formSubDocument");

      form.action = url;

      form.internal.value = internal;

      form.submit();

    }

             

    function hideFlex() {

        document.getElementById('IE6Confirm').style.display = "block";

    }

                    

    function showFlex() {

        document.getElementById('IE6Confirm').style.display = "none";

    }

                    

    function cancelDownload(url) {

        showFlex();

    }

                    

    function triggerDownload(url) {

        window.open(url);

    }

                    

    function downloadDocForIE6() {

        showFlex();

        triggerDownload(_url);

    }

                    

    function downloadDoc(url) {

        var isIE6 = (navigator.userAgent.indexOf("MSIE 6") != -1);

        if (isIE6) {

            _url = url;

            hideFlex();

        }

        else {

           triggerDownload(url);

        }

     }

  </script>

It’s done! Now call function OpenDoc by passing a ContentId & you can see your Content on VF page :)

It will show the content same as the salesforce standard way.

Enjoy..!!