Showing more than 1K records using PBE - Part 1 Remoting

Tuesday, October 21, 2014

I have got this question several times from emails, to tweets and from lots of comments in blogs that "How can show more than 1000 records in table show that I can do more with PBE". PBE does add a lot of client side features like sorting, export, pagination etc but totally rely on data on the page to make it work, it cannot bring data from controller. So we need to bring as much as data we can to the page but to do this we need to overcome the 1K limit of list on VF.

If you haven't read about PBE (Pageblock table enhancer) you can read it here

So how can we overcome the 1K limit of list in VF pages ? 

There are basically two ways

• JSRemoting : Use remoting and templating library like JSRender to create a table and initialize PBE on the same. I did a small blog on something very similar where you can display records using Remote objects, but for this we need to replace the data source from remoteobjects to remoting because 100records query limit
• Using List<List<T>> : This is complete VF approach where we try to replicate the structure of pageblock table using apex:repeats.

JS Remoting

Pros

• Very fast and lightweight
• Can bring upto 15mb data
• No overhead of viewstate
• Ideal for showing long list of data

There is no better way to explain then jumping into the code.

How it works ?

1. The page loads and brings data using Remoting method "getContacts"
2. Once data is available the data is converted into HTML using JSrender and HTML template that is defined
3. After load we call the initPageBlockTableEnhancerADV method to init PageblockEnahncer which reinitializes  the PBE

Screenshot

Demo

http://blogforce9dev-developer-edition.ap1.force.com/PBE1kRemoting

Find PageblockEhancer on Appexchange by clicking on this link

PageBlockTableEnhancerADV : Yes we have the export now!

Thursday, January 16, 2014

A bit of Introduction 

PageBlockTableEnhancerADV is a plugin that lets you convert a normal VisualForce pageblock table into a datatable. The component internally uses the Datatables plugin to bring in features like sorting, filtering and pagination.

So what's new ?

So as planned this post is all about File Exports!, Yes files export is being ported from Datatables to PageBlockTableEnhancerADV. To export files PageBlockTableEnhancerADV uses the Datatable plugin TableTools. TableTools is very flexible plugin that hooks in to the Datatables API to give in an amazing set of exporting option.

So this version of PageBlockTableEnhancerADV with the help of TableTools brings in 

• Export to PDF
• Export to CSV
• Export to Excel
• Printable view
• Copy to clipboard

If you are not aware about the PageBlockTableEnhancerADV or PageBlockTableEnhancer you can read about the same from the below links

• PageBlockTableEnhancerADV
• PageBlockTableEnhancer

List of Parameters 

• targetPbTableIds : comma-separated Ids of the target Pageblock tables 
• paginate : Assign true if you want to use the pagination feature,default value is true.
• pageSizeOptions : A comma separated list of integer values that will displayed as dropdown for page size
•  defaultPageSize : Default page size that needs to be selected (at page load).
• enableExport : Set this option to true to enable export toolbar (new in v2)
• exportFileName : Default filename to use when a user uses the export feature. (new in v2)

Syntax

<c:PageBlockTableEnhancerADV targetPbTableIds="mid,mid2" paginate="true" defaultPageSize="5" pageSizeOptions="5,10,20,30,40,50,100" enableExport="true" exportFileName="myFile"/> 

Demo,Source And Installation Link : http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009M3zR

PageBlockTableEnhancerADV : Yet another Pageblock table Enhancer Component

Thursday, November 28, 2013

On my quest to create a perfect PageBlockTable, I tried a lot of jQuery plugin available out there. The main moto was to bring as many as feature I can. Some of them were good but were almost dead and were at end of their lifetime. Others were not compatible with Visualforce, some were not able to pick the standard pageblock table and other had css issues. Finally after long search I stopped on two plugins

• TableSorter
   Description : tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.
  
  I find it very interesting because its very minimal and doesn't changes the DOM much and easily attaches itself VF Pageblocktable. All the version of PageblockTableEnhancer uses this to add Sorting and Pagination capability to a standard VF Pageblocktable. The combination really went well and I guess many of out there are using it now. This plugin is still actively developed and well be enhanced further but I don't think there is much scope to bring new features because its architecture is bit limiting
  

• Datatables
  Description : DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table
  
  
  

  

  Datatable - looks futuristics isn't it ?

  
  
  Well Datatables ! everybody out there working on Dynamic Tables can't stop talking about it because of the amazing flexibilty and combination of features this gives. Features like Sorting,Pagination,Search can easily be implemented on very large table just using this table. And there is no boundaries support PDF/CSV export has been recently added and everyday some new plugin is introduced. Its the plugin of the future! Its still actively developed, there are lot of user already using this, new features are added and I see a lot of scope here!

So whats new ? 

I have been trying to combine Datatables with Standard VF Pageblock table. But somehow wasn't able to make them work together. But finally I was able to combine them and result is just awesome looking new table!.  Yes I was successfully able to combine them and create a new component called PageblocktableEnhancerADV(adv for Advanced, lol I know that sounds a bit funny ) .

I kept both of the plugin alive because people can choose from which one they want. If you like the Default look and feel you can go with PageblockTableEnhancer  else you can use the new PageblocktableEnhancerADV.

Personally I feel like there is lot of scope in PageblocktableEnhancerADV, since its based on Datatables there is lot scope and there is a long list feature waiting to be ported.

So Introducing the "PageblocktableEnhancerADV" with the backbone of "PageblocktableEnhancer", same ease of use, same set of parameters, just one line and  you are ready to rock!

Detail about the PageBlockTableEnhancerADV Component
(If you are using the PageblocktableEnhancer you should be aware about the basic parameters)

Here is what is new with this plugin

1. Pagination Support.
2. Support for specifying available page sizes.
3. Support for choosing default page size on page load.
4. Dynamic Search/filter
5. No Coding and Changes Required in existing code.
6. Hassle free installation

List o Parameters

• targetPbTableIds : comma-separated Ids of the target Pageblock tables
• paginate : Assign true if you want to use the pagination feature,default value is true.
• pageSizeOptions : A comma seperated list of integer values that will displayed as dropdown for page size
• defaultPageSize : Default page size that needs to be selected (at page load).

Ajax/Rerender support

• This version brings in support for rendering, the earlier version wasn't able to handle this. So incase you are rerendering your table or the parent components, you can call the "initPageBlockTableEnhancerADV()" method from "oncomplete" even of your commandButtons/actionFunctions/actionSupport/commandLink .
  
  

  <apex:commandButton value="Rerender" reRender="mid" oncomplete="initPageBlockTableEnhancerADV()"/>

Basic Syntax

The basic syntax remains same, just few added params.

<c:PageBlockTableEnhancerADV targetPbTableIds="mid,mid2" paginate="true" defaultPageSize="5" pageSizeOptions="5,10,20,30,40,50,100"/>    
   <apex:pageBlock >   
     <apex:pageBlockTable value="{!contacts}" var="con" id="mid">   
      <apex:column value="{!con.Name}"/>   
     </apex:pageBlockTable>    
     <apex:pageBlockTable value="{!contacts}" var="con" id="mid2">   
      <apex:column value="{!con.Name}"/>   
     </apex:pageBlockTable>     
   </apex:pageBlock>  

PageBlockTableEnhacerADV - Optimized version of Datatable for VF

Demo,Source And Installation Links : http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009M3zR

Future Enhancements

• Export to CSV and PDF
• Copy to clipboard
• Print