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


<style type="text/css">
 .dateFormat {
   display: none; 
 }

.dateFormat {

display: none;

}

Show Years Before the Current Year in a Datepicker

Development would be a lot harder without stackexchange and stackoverflow. Thanks for this post that illustrated how to do this.
http://salesforce.stackexchange.com/questions/7944/standard-datepicker-year-values


  <script>
  (function() {
    var windowOnload = window.onload;
    window.onload = function() {
      if (windowOnload) windowOnload();
      var select = document.getElementById('calYearPicker');
      if (!select) return;

      select.innerHTML = '';
      var startYear = new Date().getFullYear() - 95;
      for (var year = startYear; year < startYear + 105; year++) {
        select.options[select.options.length] = new Option(year, year);
      }
    }
  }());
</script>

(function() {

var windowOnload = window.onload;

window.onload = function() {

if (windowOnload) windowOnload();

var select = document.getElementById('calYearPicker');

if (!select) return;

select.innerHTML = '';

var startYear = new Date().getFullYear() - 95;

for (var year = startYear; year < startYear + 105; year++) {

select.options[select.options.length] = new Option(year, year);

}

}());

</script>

Show a Datepicker on a Text Field

Thanks to these sources for the help figuring this out.
DeveloperForce Boards
Infallibletechie.com


<apex:form id=”myform”>
  <apex:inputText styleClass="cssbody" value="{!MyStringDate}" size="10" id="demo" onfocus="DatePicker.pickDate(false, this, false);" />
</apex:form>

<apex:form id=”myform”>

<apex:inputText styleClass="cssbody" value="{!MyStringDate}" size="10" id="demo" onfocus="DatePicker.pickDate(false, this, false);" />

</apex:form>

Show the Day of Week When a Date is Selected

The day of week is found by converting the input date into a datetime. Then we use the format method to give us the day of the week spelled out.


// use Date.valueOf for date type fields
DOW = DateTime.newInstance( Date.valueOf(MyObject.DateTypeField), Time.newInstance(0, 0, 0, 0) ).format('EEEE');
// use Date.parse for string variables
DOW = DateTime.newInstance( Date.parse(StringField), Time.newInstance(0, 0, 0, 0) ).format('EEEE');

// use Date.valueOf for date type fields

DOW = DateTime.newInstance( Date.valueOf(MyObject.DateTypeField), Time.newInstance(0, 0, 0, 0) ).format('EEEE');

// use Date.parse for string variables

DOW = DateTime.newInstance( Date.parse(StringField), Time.newInstance(0, 0, 0, 0) ).format('EEEE');

Code Examples

The examples below show how to remove the date link, show prior years in the datepicker, and add a datepicker to an field.

ExamplePageController.cls


public with sharing class ExamplePageController {
  public Contact MyContact {get; set;}
  public String StringDate {get; set;}
  public String StringDateDOW {get; set;}
  public String BirthdateDOW {get; set;}
  
  // create a temporary contact 
  public ExamplePageController() {
    MyContact = new Contact();
  }
  
  // find the day of the week for Birthdate.  Date.valueOf can be used with Date fields
  public PageReference FindBirthdateDOW() {
    try {
      BirthdateDOW = DateTime.newInstance( Date.valueOf(MyContact.Birthdate), Time.newInstance(0, 0, 0, 0) ).format('EEEE');
    } catch (exception e) {
      BirthdateDOW = '';
    } 
    return null;
  }
  
  // find the day of the week for StringDate.  Date.parse can be used with String fields
  public PageReference FindStringDateDOW() {
    try {
      StringDateDOW = DateTime.newInstance( Date.parse(StringDate), Time.newInstance(0, 0, 0, 0) ).format('EEEE');
    } catch (exception e) {
      StringDateDOW = '';
    } 
    return null;
  }
}

public with sharing class ExamplePageController {

public Contact MyContact {get; set;}

public String StringDate {get; set;}

public String StringDateDOW {get; set;}

public String BirthdateDOW {get; set;}

// create a temporary contact

public ExamplePageController() {

MyContact = new Contact();

}

// find the day of the week for Birthdate. Date.valueOf can be used with Date fields

public PageReference FindBirthdateDOW() {

try {

BirthdateDOW = DateTime.newInstance( Date.valueOf(MyContact.Birthdate), Time.newInstance(0, 0, 0, 0) ).format('EEEE');

} catch (exception e) {

BirthdateDOW = '';

}

return null;

}

// find the day of the week for StringDate. Date.parse can be used with String fields

public PageReference FindStringDateDOW() {

try {

StringDateDOW = DateTime.newInstance( Date.parse(StringDate), Time.newInstance(0, 0, 0, 0) ).format('EEEE');

} catch (exception e) {

StringDateDOW = '';

}

return null;

}

ExamplePage.page


<apex:page controller="ExamplePageController">
   <style type="text/css">
.dateFormat {
   display: none;
}
</style>
   <script>
  (function() {
    var windowOnload = window.onload;
    window.onload = function() {
      if (windowOnload) windowOnload();
      var select = document.getElementById('calYearPicker');
      if (!select) return;

      select.innerHTML = '';
      var startYear = new Date().getFullYear() - 95;
      for (var year = startYear; year < startYear + 105; year++) {
        select.options[select.options.length] = new Option(year, year);
      }
    }
  }());
  </script>
   <apex:form >
      <apex:pageBlock mode="maindetail">
         <apex:pageBlockSection >

            <!-- on change works for the native date field -->
            <apex:pageBlockSectionItem >
               <apex:outputLabel value="{!$ObjectType.Contact.Fields.Birthdate.Label}" />
               <apex:outputPanel >
                  <apex:inputField value="{!MyContact.birthdate}">
                     <apex:actionSupport event="onchange" action="{!FindBirthdateDOW}" rerender="PanelBirthdateDOW" />
                  </apex:inputField>
                  <apex:outputPanel id="PanelBirthdateDOW" style="margin-left:5px;">{!BirthdateDOW}</apex:outputPanel>
               </apex:outputPanel>
            </apex:pageBlockSectionItem>
     
            <!-- onchange did not work with the text field. onblur will show the day of week when the element changes focus -->
            <apex:pageBlockSectionItem >
               <apex:outputLabel value="String Date" />
               <apex:outputPanel >
                  <apex:inputText value="{!StringDate}" id="TheStringDate">
                     <apex:actionSupport event="onfocus" onsubmit="DatePicker.pickDate(false, this, false);" rerender="nothing" />
                     <apex:actionSupport event="onblur" action="{!FindStringDateDOW}" rerender="PanelStringDateDOW" />
                  </apex:inputText>
                  <apex:outputPanel id="PanelStringDateDOW" style="margin-left:5px;">{!StringDateDOW}</apex:outputPanel>
               </apex:outputPanel>
            </apex:pageBlockSectionItem>

         </apex:pageBlockSection>
      </apex:pageBlock>
   </apex:form>

</apex:page>

<apex:page controller="ExamplePageController">

.dateFormat {

display: none;

}

</style>

(function() {

var windowOnload = window.onload;

window.onload = function() {

if (windowOnload) windowOnload();

var select = document.getElementById('calYearPicker');

if (!select) return;

select.innerHTML = '';

var startYear = new Date().getFullYear() - 95;

for (var year = startYear; year < startYear + 105; year++) {

select.options[select.options.length] = new Option(year, year);

}

}());

</script>

<apex:form >

<apex:pageBlock mode="maindetail">

<apex:pageBlockSection >

<apex:pageBlockSectionItem >

<apex:outputLabel value="{!$ObjectType.Contact.Fields.Birthdate.Label}" />

<apex:outputPanel >

<apex:inputField value="{!MyContact.birthdate}">

<apex:actionSupport event="onchange" action="{!FindBirthdateDOW}" rerender="PanelBirthdateDOW" />

</apex:inputField>

<apex:outputPanel id="PanelBirthdateDOW" style="margin-left:5px;">{!BirthdateDOW}</apex:outputPanel>

</apex:outputPanel>

</apex:pageBlockSectionItem>

<apex:pageBlockSectionItem >

<apex:outputLabel value="String Date" />

<apex:outputPanel >

<apex:inputText value="{!StringDate}" id="TheStringDate">

<apex:actionSupport event="onfocus" onsubmit="DatePicker.pickDate(false, this, false);" rerender="nothing" />

<apex:actionSupport event="onblur" action="{!FindStringDateDOW}" rerender="PanelStringDateDOW" />

</apex:inputText>

<apex:outputPanel id="PanelStringDateDOW" style="margin-left:5px;">{!StringDateDOW}</apex:outputPanel>

</apex:outputPanel>

</apex:pageBlockSectionItem>

</apex:pageBlockSection>

</apex:pageBlock>

</apex:form>

</apex:page>

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}

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


<apex:pageBlockSectionItem helptext="{!$ObjectType.Account.Fields.Phone.InlineHelpText}">
      <apex:outputLabel value="{!$ObjectType.Account.Fields.Phone.Label}" />
      <apex:inputField value="{!Account.Phone}" />
</apex:pageBlockSectionItem>

<apex:pageBlockSectionItem helptext="{!$ObjectType.Account.Fields.Phone.InlineHelpText}">

<apex:outputLabel value="{!$ObjectType.Account.Fields.Phone.Label}" />

<apex:inputField value="{!Account.Phone}" />

</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.

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

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;

}


<div class="tooltip" style="display:inline">
    Hover Over Me
    <span>your message here</span>
</span>

Hover Over Me

<span>your message here</span>

</span>

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