CSS Archives - Dave Helgerson

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.

Continue reading →

Visualforce Datepicker Manipulation and Day of Week Display

18 Dec

Hide the Datepicker Link for the Current Date


   
   
      
         

            
            
               
               
                  
                     
                  
                  {!BirthdateDOW}
               
            
     
            
            
               
               
                  
                     
                     
                  
                  {!StringDateDOW}

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.

{!$ObjectType.Account.Fields.Phone.InlineHelpText}

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.

Example:

 
  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 www.kollermedia.at/archive/2008/03/24/easy-css-tooltip/ 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