Enhanced Pableblock Table For Visualforce Pages

Thursday, February 28, 2013

[Update : Have a look at awesome new PageblockTable Enhancer Component here]

Well I am really happy that finally my work on Enhanced Pageblocktable is almost complete.The Sortable Pageblocktable component is now Enhanced Pageblock table with added functionality of pagination , athough the Sortable Pageblocktable component still exists.

Now you can add functionality like pagination, sorting without any extra coding.The component uses the jQuery table sorter plugin to add the sorting and pagination features to the page block tables.

Features of Enhanced Pageblock Table

• Sorting : Supports sorting of columns by clicking at the column header.

• Pagination : Supports client side pagination of the table.

• Native Look And Feel : Enhanced Pageblock table component uses the similar look and feel of a standar pageblock table and mixes with the existing UI easily.

How to use? 

Pretty Simple!, just use the below code.

Parameters
sObjList : List of sObject To display
fieldList : List of field API names to display in the table as column.

<c:EnhancedPageBlockTable sObjList="{!accounts}" fieldList="{!fields}"/>         

Demo 
http://blogforce9dev-developer-edition.ap1.force.com/EnhancedPageBlockTableDemo

Codebase
Unmanaged Package: https://login.salesforce.com/packaging/installPackage.apexp?p0=04t90000000MIJ3

Sort-able Pageblock Table Component for Visualforce v2.0 - Now With Pagination(Sneak Peak)

Sunday, February 24, 2013

Note : A newer version of this plugin is released please check the same by clicking on this link


I started working on this component as a part of my client requirement for giving a Pageblock  Table capability to sort columns by clicking the column header. That was the initial version of the component from the initial version of this component there was not much change but only few minor cosmetic changes.


Well currently am working on a newer version of this component that adds a client side pagination to the Pageblock Table. This post is just sneak peak of the component, about what is coming.
Here is a screenshot of a Pageblock generated by the new Component.

You can check the live demo of the new component here : https://blogforce9dev-developer-edition.ap1.force.com/EnhancedPageBlockTableDemo

Demo And Installation / Unmanaged Package: http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000007rdwd

Would like to really gather some feedback about the component what do you think and what can be included into this component.

Handling Dates in VIsualforce Js Remoting

Saturday, February 16, 2013

Most of the people now a days are using Javascript remoting to bring data from controller to a Visualforce page. This is one of the most fastest way using which data can be brought back to the page. Visualforce remoting makes the page light weight, more responsive and more faster.

But after all its works using js proxies, to handle dates properly dates fields are moved from back and forth the controller using doubles(not using js date objects). This makes the API clean but adds an overhead of converting them back to Date object.

If you have enough experience with Js date,  you will observe that while converting doubles into date a timezone offset is added to the actual date.some thing like  4/4/2013 at 6pm. And you can even observe a shift in date due to addition of timezone offset.

So how to handle this?
Well to fix this I wrote a simple js function which nulifies the effect by subtracting the offset back from the date.

function normalizeDate(mydate){  
   mydate = new Date(mydate );  
   mydate = new Date(mydate - mydate.getTimezoneOffset() * 60000);  
   return mydate;  
 }  

You can use the above function and try doing something like this :

//obj is record returned by js remoting   
  obj.Custom_Date__c = normalizeDate(obj.Custom_Date__c);  

You can also convert the date into readable form.using the below extended js function

function normalizeDateExtended(mydate){  
   mydate = new Date(mydate);  
   data = new Date(mydate - mydate.getTimezoneOffset() * 60000);  
   var d = mydate.getDate();  
   var m = mydate.getMonth()+1;  
   var y = mydate.getFullYear();  
   return ''+ (m<=9?'0'+m:m) +'-' + (d<=9?'0'+d:d)+'-' + y;  
 }