Display images on visualforce page from the attachment/document

The image can be displayed in the VF page by using <apex : image> tag. Image source is specified by "URL" attribute.
But the url should be in the form : " /servlet/servlet.FileDownload?file=xxxxxxxxxxx" where  xxxxxxxxxxx is the the unique id of theDocument/Attachment record containing the image.


Example :

A sample Visual Force page along with the custom controller. For this example, I have stored an image in the Document object with name"sample pic".

Controller :
=================================
public with sharing class ImageController {
 public String imageURL{get;set;}
 
  public ImageController()
  {
    imageURL='/servlet/servlet.FileDownload?file=';
    List< document > documentList=[select name from document where
                                    Name='SamplePic'];
 
    if(documentList.size()>0)
    {
      imageURL=imageURL+documentList[0].id;
    }
  }
}
====================================

Here I have taken a String variable declared as public. I am initializing this variable in controller with "servlet/servlet.FileDownload?file=" value. This variable will be used in VF page as a URL parameter in <apex : image> tag.

The controller fetches the document record from the Document object based on the "name" field specified in the SOQL query.

The only thing remaining in the imageURL is the unique id of document record. So after fetching record from the object, append "id" to the imageURL variable.



Visual Force Page :
=====================

<apex:page controller="ImageController" showheader="false" sidebar="false">

    <apex:form>
      <apex:image url="{!imageURL}">
    </apex:image></apex:form>

</apex:page>
========================

Here we are binding the imageURL ( String variable of controller class ) to the url attribute of <apex : image> tag.

Query Using Java Script and display in Pageblock Table using custom html

Sometime we need to create table in visual force page with html elements with same look and feel as standard pageblocktable. So we did not need to add extra style class in html table. We can do it with the standard style classes.

the data to the pageblocktable will be queried from the javascript using sforce.execute.query

We need to do a little work to search the standard class name from pageblockTable and add those classes to custom html table:

As I have taken a simple example to show how to use the standard style class:

Visual Force page code:

<apex:page >
<style>
    tr.dataRow {
       background-color:white;
    }
    tr.dataRow:hover {
       background-color: #e3f3ff;
    };
</style>
<script type="text/javascript">
        var __sfdcSessionId = '{!GETSESSIONID()}';
    </script>
<script src="../../soap/ajax/31.0/connection.js" type="text/javascript"></script>
<script type="text/javascript">
    window.onload = setupPage;
    function setupPage() {
           sforce.connection.query("Select Id,Name,BillingCity,BillingState from  Account 1000",
           {onSuccess : layoutResults,
              onFailure : queryFailed,
                  source : {
                         output : document.getElementById("output"),
                         startTime : new Date().getTime()
                     }
              });
 }
    function queryFailed(error, source) {
       source.output.innerHTML = "<font color 'red'>An error has occurred: </font> <p>" + error;
       }
       
                     
function layoutResults(queryResult, source) {

     if (queryResult.size > 0) {
     var output = "<table class='list' border='0' cellpadding='0' cellspacing='0'><tr class='headerRow'>";
         output +="<th class='headerRow'> Account Name</th><th class='headerRow'> Billing City </th><th class='headerRow'> Billing Country</th>";

     //get the records array
     var records = queryResult.getArray('records');

     //loop through the records and construct html string
     for (var i = 0; i < records.length; i++) {
          var account = records[i];
          output += "<tr class='dataRow'><td class='dataCell'>"+ account.Name + "</td><td class='dataCell'>" + account.BillingCity +
            "</td><td class='dataCell'>" + account.BillingState + "</td></tr>";
     }
        output =output+"</td></tr></table>"
     //render the generated html string
     source.output.innerHTML = output;
     }
}
</script>
<apex:pageBlock >
     <div id="output"  ></div>
</apex:pageBlock>

</apex:page>