Visualforce Table with Alphabet Filter and Sortable Columns

16 Feb

This Visualforce page contains apex:pageBlockTable to demonstrate a few different concepts.

  • Sortable Columns in an apex:pageBlockTable
  • Alphabet Filter that filters on the current sorted column
  • Use of the ApexPage StandardSetController
  • Selecting an individual record in the table using a link
  • Selecting multiple records with a column of checkboxes using a Sub Class(Wrapper Class) to hold the boolean value.

Both single and multiple record selection were included for demonstration. Most actual projects would only require one type, and I thought it would be easy to cut whatever was not needed. The search for the Billing Address fields was consolidated into one field to make the interface simpler. Below is an example of what the Visualforce table looks like with the alphabet filter, sorted columns, address search, and checkbox record selection.

Sortable apex:pageBlockTable, alphabet filter, checkbox selection and link selection
Continue reading

Visualforce Datepicker Manipulation and Day of Week Display

18 Dec

datepicker with past years and no date link

Hide the Datepicker Link for the Current Date




Visualforce Help Text and a Popup Tool Tip

21 Oct

Visualforce Field Help Text

The help icon can be added to a Visualforce field within an apex:pageBlockSectionItem. Access the help text using the $ObjectType api. Put it in the helptext attribute of the apex:pageBlockSectionItem.



Easy Hover Tooltip

The following may help if you are not using the apex:pageBlockSectionItem. I’ve used this technique in the past to put help text on an image in a apex:pageBlockTable and on plain text in a page.


Hover Over Me
your message here

  div.tooltip {
    width: 195px;
    float: left;
  div.tooltip:hover {
    background: #ffffff;
    text-decoration: none;
  } /*BG color is a must for IE6*/
  div.tooltip span {
    display: none;
    padding: 2px 3px;
    margin-left: 8px;
    width: 195px;
  div.tooltip:hover span {
    display: inline;
    position: absolute;
    border: 1px solid #cccccc;
    background: #FFC;;
    color: #000000;
Hover Over Me your message here

Thanks to for providing an easy way to add tooltip help. He does it by putting the style on the link tag instead of the div.

March 16, 2014: Here is another tutorial that explains how to do a popup tool tip. Tutsplus – Tooltip