Tuesday, September 9, 2014

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>


No comments :

Post a Comment

Labels

visualforce page ( 13 ) apex integration ( 5 ) apex trigger ( 4 ) csv file from vf page ( 4 ) javascript ( 4 ) csv visualforce page ( 3 ) Too many ( 2 ) call out ( 2 ) integration ( 2 ) rest api ( 2 ) salesforce rest api ( 2 ) salesforce to salesforce integration ( 2 ) sfdc rest api ( 2 ) trigger ( 2 ) 15 digit to 18 digit ( 1 ) DML rows in Apex ( 1 ) Date Conversion ( 1 ) Date/Time conversion ( 1 ) Deploy ( 1 ) Objects to Future Annotated Methods ( 1 ) SFDC limits ( 1 ) Sobject to Future Annotated Methods ( 1 ) Test Class ( 1 ) TimeZone Conversion ( 1 ) Too many dml rows ( 1 ) Too many future calls ( 1 ) annotations ( 1 ) apex code ( 1 ) closed opportunities ( 1 ) commit ( 1 ) convert ( 1 ) create records ( 1 ) csv create records ( 1 ) custom setting ( 1 ) deployment ( 1 ) deployment changeset ( 1 ) disable apex class ( 1 ) disable apex trigger ( 1 ) disable in production ( 1 ) document ( 1 ) download ( 1 ) field name ( 1 ) formula fields ( 1 ) iframe ( 1 ) inactive ( 1 ) intellisense ( 1 ) jsforce ( 1 ) limits ( 1 ) matrix report in vf page ( 1 ) multi select ( 1 ) multi select salesforce ( 1 ) multiselect ( 1 ) paypal ( 1 ) picklist ( 1 ) record type ( 1 ) rollback ( 1 ) salesforce limits ( 1 ) salesforce list ( 1 ) salesforce map ( 1 ) salesforce rest ( 1 ) salesforce set ( 1 ) salesforce1 ( 1 ) sandbox deployment ( 1 ) sfdc collection ( 1 ) sfdc list ( 1 ) sfdc map ( 1 ) sfdc rest ( 1 ) sfdc set ( 1 ) uncommitted ( 1 ) updated field ( 1 ) user ( 1 ) validation rule opportunity ( 1 ) validation rules opportunities ( 1 ) vf page ( 1 )

Ad