Saturday, November 23, 2013

How to add Content related list in visualforce page

If you need to add content related list in you visualforce page try the following...

<apex:relatedlist list ='content__r'>

Friday, November 8, 2013

Table Using JSON in Salesforce

Send the list data to the page from a controller using JSON.Serialize() function and using the following script traverse through the JSON string display in using a table.

Demo Here 

$(document).ready(function(){

     $("#userdata tbody").html(""); 
   
        var json = {!jsonString};        
        var tr;
        for (var i = 0; i < json.length; i++) {
                        
            var tblRow =
                        "<tr>"
                        +"<td>"+json[i].Accountid+"</td>"
                        +"<td>"+json[i].AccountData+"</td>"                        
                        +"</tr>";
            $(tblRow).appendTo("#userdata tbody");
        }
});

The Page:


 <apex:pageBlock title="Table Using JSON" id="TableUsingJSon">
                <apex:pageBlockSection columns="2">               
                    <apex:outputPanel >
                         <center>
                            <table id="userdata" border="1">
                                <thead>
                                    <th>Account id</th>
                                    <th>Account Name</th>
                                </thead>
                                <tbody></tbody>
                            </table>    
                         </center>    
                    </apex:outputPanel>
                           
                    <apex:pageBlockSectionItem >
                        <apex:outputPanel >
                           {!jsonString} 
                        </apex:outputPanel>
                    </apex:pageBlockSectionItem>
                </apex:pageBlockSection> 
            </apex:pageBlock>

Filter for pageblocktable in salesforce

Often when we create a pageblock table in a visualforce page we wish to filter the records if it is having many records.To filter such a pageblock table we normally use one picklist field or selectlist field and filter the records by passing the selected values to the controller to query the records.

But we can also do this simply by writing a jQuery function.please follow below steps

1)Create a picklist/select list first

2)Write a jQuery function so as to compare the selected value from the picklist and the table values.

3)This can be done by defining a id for the column header in the pageblocktable and in the jQuery funtion traverse through the child elements. Compare both values.

4)If the values are same display the Parent i.e. The current ro else hide.by defining the css display property.
Thus pageblock table can be filtered out very quickly.

JQuery Function:

 $("[id$='AccountFilter']").change(function() {
    var selval=$(this).val();
    $("[id$='AccNameHeader']").each(function(){
          var t= $(this).children('span').text();
           if(selval != 'All'){
             if(selval == t){
                    $(this).parent().css('display','');
             }else{
                    $(this).parent().css('display','none');
             }
           }else{
                $(this).parent().css('display','');
           }                    
        }); 
    });


Visualforce page:

<apex:pageBlock title="JQuery Filter For PageblockTable" id="AccountNamewithFilter">
     <apex:form >
        <apex:selectList value="{!AccPick}" size="1" id="AccountFilter">
             <apex:selectOptions value="{!AccNames}"/>                        
        </apex:selectList>
     </apex:form>
     <apex:pageBlockTable value="{!AccountList}" var="a">
        <apex:column headerValue="Account Name" id="AccNameHeader">
             <apex:outputText styleClass="AccountNameClass" value="{!a.Name}" id="AccName"/>         </apex:column>
        <apex:column headerValue="Phone">
             <apex:outputText styleClass="AccountNameClass" value="{!a.Phone}"/>            
        </apex:column>        
     </apex:pageBlockTable>
</apex:pageBlock>


please check out the live action in my Demo page here.
Pros:
  1. Filtered very quickly.
  2. No need to Query the DB each time.


Cons:
  1. Real time data wont be returned.for this we can keep a refresh button to refresh the page.