BlogForce9: October 2014

Thursday, October 30, 2014

Finally after a really long dormant period, I have made quite a few changes in Visualstrap. Along with some minor changes, Visualstrap now works with PDF.

Main Site

http://visualstrap-developer-edition.ap1.force.com/apex/VisualStrapPdfComponentsIframe

How to use ?

Just set theme as "pdf" from importvisualstrap component and you are all set.

 <c:importvisualstrap theme="pdf" />

Updated Packages

I have pushed the latest source code to git and unmanaged package will follow soon.
However I am still waiting for a fix of https://success.salesforce.com/apex/issues_view?id=a1p30000000Sp4YAAS to push update for the managed package

Demo : http://visualstrap-developer-edition.ap1.force.com/apex/VisualStrapPdfComponentsIframe
Github : https://github.com/Avinava/VisualStrap

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.

	<apex:page controller="PBE1KRemoting_Con">
	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/>
	<apex:includeScript value="https://rawgithub.com/BorisMoore/jsrender/master/jsrender.min.js"/>

	<script>

	function getContacts(callback){
	Visualforce.remoting.Manager.invokeAction(
	'{!$RemoteAction.PBE1KRemoting_Con.getContacts}',
	function(result, event){
	callback(result);
	},
	{escape: false}
	);
	}


	//on document ready call query and render the template
	$(function(){
	getContacts(function(result){
	var html = $("#contactTableRowTmpl").render(result);
	//replace the table body with rendered html
	$("#contactTableBody").html(html);
	initPageBlockTableEnhancerADV();
	});
	})
	</script>

	<!-- JS Render Template -->
	<script id="contactTableRowTmpl" type="text/x-jsrender">
	<tr class="dataRow" onmouseover="if (window.hiOn){hiOn(this);} " onmouseout="if (window.hiOff){hiOff(this);} " onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}">
	<td class="dataCell">{{>Name}}</td>
	<td class="dataCell">{{>FirstName}}</td>
	<td class="dataCell">{{>LastName}}</td>
	<td class="dataCell">{{>Phone}}</td>
	<td class="dataCell">{{>Email}}</td>
	</tr>
	</script>
	<pbe:PageBlockTableEnhancerADV targetPbTableIds="contactsTable"/>
	<apex:pageBlock >
	<apex:sectionHeader title="Display more than 1K Records" subtitle="Using JSRemoting with JSRender"/>
	<!-- Borrow some styling from Pageblock table -->
	<table class="list" border="0" cellpadding="0" cellspacing="0" id="contactsTable">
	<thead class="rich-table-thead">
	<tr class="headerRow ">
	<th class="headerRow">Name</th>
	<th class="headerRow">FirstName</th>
	<th class="headerRow">LastName</th>
	<th class="headerRow">Phone</th>
	<th class="headerRow">Email</th>
	</tr>
	</thead>
	<tbody id="contactTableBody">

	</tbody>
	</table>
	</apex:pageBlock>

	</apex:page>

view raw PBE1KRemoting.page hosted with ❤ by GitHub

	public class PBE1KRemoting_Con {
	@RemoteAction
	public static List<Contact> getContacts(){
	return [SELECT Name,FirstName,LastName,Phone,Email FROM Contact];
	}
	}

view raw PBE1KRemoting_Con.cls hosted with ❤ by GitHub

How it works ?

The page loads and brings data using Remoting method "getContacts"
Once data is available the data is converted into HTML using JSrender and HTML template that is defined
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

BlogForce9

Pages

Introducing Visualstrap PDF Support!