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;  
 }  

Custom Section Header Icons For VF Pages

Sunday, January 13, 2013

Ever used a Section header in VF Page which is not exposed as a tab?
You will notice a weird thing,
You cant actually control the icon that appears in the section header and it puts a default image(Home Icon) there. To replace the Icon you have to either provide a tabstyle or create a new tab for the VF Page or have to use a standard controller.

Question : What If you want a custom icon instead of the default? Create a new tab with the icon?

Answer : Well that doesn't seem wise enough. To overcome the same I have created a custom section header component that can be used to replace the standard section header component. This custom section header provides the ability to select your own icon or any standard one and best part is you can repeat the component with different icons.

How To Use?
Here is a sample code which shows how to uses the Standard Salesforce Account icon in the custom section header.

 <c:sectionHeader iconsrc="/img/icon/accounts32.png" title="Visualforce Auto-Complete Component" subTitle=" Auto-Complete Demo"/> 

Component Link : http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000007rf3O

Currency Formatting In Visualforce Page

Friday, December 28, 2012

Well few days ago while working with a Visualforce page I came across a requirement of showing currency field using proper currency formatting.


For Example

• 6000 should appear as $6,000.00 in the vf page

After checking the standard Salesforce tags I was unable to find a solution. but somehow figured out that <apex:param> tag can be exploited here.

So do the currency formatting in a vf page you can use the below markup.

<apex:outputText value="${0, number, ###,###,###,##0.00}">  
      <apex:param value="{!Account.Amount__c}"/>  
 </apex:outputText>  

Hoping this helps for your currency formatting need!

Get SobjectType From Salesforce ID

Saturday, December 1, 2012

The Salesforce Winter 13 arrived with loads of new methods and upgrades.
From the long list of methods, Salesforce also  has provided a new method "getSObjectType()" for ID data type. This comes with lot relief as prior to API 26.0 there were no such method available by which we can get the sObject Type from Id of the sObject, instead we have to describe every object and match the prefix with the given sObject. A very resource hungry process.

 Map<String,Schema.SObjectType> gd = Schema.getGlobalDescribe();  
 Schema.DescribeSObjectResult r = gd.get(sObj).getDescribe();  
 String tempName = r.getName();  
 String tempPrefix = r.getKeyPrefix();  
 String ObjId= [SELECT Id FROM Account LIMIT 1];  
 String tPrefix = ObjId.subString(0,3);  
 //Get the Sobject Type  
 String objectType = keyPrefixMap.get(tPrefix);  

                                                                                                                            *above code is no longer needed



But with arrival of Winter 13 / 26.0 API you can directly get the Sobject Type By calling the "getSObjectType()" method.

/*IMPORTANT : replace "sObjId" with your sobject Id, you need not to query the record again,   
 just use the Id field from your record set/ record*/  
 Id sObjId = [SELECT Id FROM Account LIMIT 1].Id;  
 Schema.SObjectType token = sObjId.getSObjectType();  

This new method will be really helpful in writing dynamic apex code for triggers and batches and even for visualforce controllers.

String to Id Conversion

Monday, November 12, 2012

Well someday back, while writing a Visualforce page I came across a situation where I have to convert a string to Id. I tried to check methods for "Id" but couldn't find any thing well after lot tries I actually figured out a way to convert "string" to "Id".

It is super easy, you just need to follow the following code :

 String strId = 'a08A000000ZdZYk';  
 Id myId = strId;  

Hope this helps.

Auto-complete Visualforce Component

Wednesday, November 7, 2012

[Live Demo]

Please Note : A Newer Version of this Package is available here http://blogforce9.blogspot.in/2013/10/auto-complete-visualforce-component-v2.html

Well working with visualforce pages, I was always tempted to replace the boring lookup field with a autocomplete component which searches the records as we enter text in them. 

So I sat done and wrote a component for my visualforce pages to replace the boring lookup fields dialogs with autocomplete component.


Few features of the autocomplete component

• Uses Jquery UI to create the autocomplete component.
• Look And Feel - Has exactly same look and feel as native components
• Uses Js Remoting to populate data and hence the component is very fast and light weight.
• Configurable : The search field can be configured to search fields other than "Name" field. Even the value that is returned to controller can be configured return fields other than record Id.

How to use the component in you Visualforce page?

<c:Autocomplete labelField="Name" valueField="Id" SObject="Contact" targetField="{!targetFieldCon}" /> 

Description

• labelField : The field which is displayed in the component  and against which matching is done with the entered text. In above code snippet Name is displayed in the autocomplete component.
• valueField : The field value which is passed back to targetfield when a record is selected.
• targetField : The field from controller where the selected values is set.
• SObject : The sobject Api Name against which matching/query is done.

For demo purpose you can check the "autocomplete" vf page that is included in package. This page demonstrates the use of the autocomplete component for different sObjects.

Screen : 

Please Note : A Newer Version of this Package is available here http://blogforce9.blogspot.in/2013/10/auto-complete-visualforce-component-v2.html
Package Link :http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000007rf2z