May 29, 2012

Using Standard Salesforce CSS and JavaScript to Style HTML Tables

I recently needed to create a visualforce table that displays a list of records, but also had a permanent editable first row through-which a user can quickly add new records. I used an HTML table shell and a visualforce REPEAT to create the rows. However, since I did not use one of the the normal visualforce table elements, I had to use the standard Salesforce CSS and javascript elements in order to mimic the Salesforce table look and feel. The standard CSS and javascript libraries are included on every visualforce page (unless specified otherwise), so all you need to do is add some classes and events to your table tags.

Here is a list of useful table-related styles you can use. Salesforce styles are case sensitive.
  • .list - add to <table> along with border="0" cellspacing="0" cellpadding="0".
  • .headerRow - add to <tr> to display column headings
  • .dataRow - add to <tr> to display record rows.
  • .dataRow last - add to <tr> to display record rows without line separation between rows. Usage: class="dataRow last".
  • .dataCell - add to <td> to display cells (this is normally not needed).
  • .CurrencyElement - helpful in <td> and <th> when displaying currency in cells.
  • .PhoneNumberElement - helpful in <td> and <th> when displaying phone numbers in cells.
  • .DateElement - helpful in <td> and <th> when displaying date/datetimes in cells.
  • .btn - Not related to tables, but useful to format anchors as buttons.

If you also want the standard onMouseOver effect in your table (row changes color on when you hover over it), you'll need to add the following to your table row:
A quick note before the sample... Salesforce stylesheets documentation is limited (and outdated in some places). Salesforce actually discourages you from using the standard stylesheets, saying that the stylesheets are not versioned and may change without notice. I think that the styles don't change often enough to be too concerned about it, and when they do, you can quickly figure out what they changed to. If you are more paranoid than I am, you can duplicate the sfdc styles in your own CSS instead - the latest Salesforce standard stylesheets are located in the following address: https://<instance>/dCSS/Theme3/default/common.css.

Here is a simplified sample that puts it all together:

May 5, 2012

Merging Cases in Salesforce

Although very important and needed, salesforce.com does not currently have a built in merge case functionality. There are several options in the AppExchange and several open ideas that are gathering speed. However, I haven't seen anything from Salesforce that makes me thing that this is going to be available any time soon.

I recently needed to create a merge method that can take all related records of a duplicate case and merge them into a master case. The sample below is the main apex code - nothing complex but there is a lot of code because you are dealing with lots of objects.

Here are some important notes regarding this sample:
  • This code sample assumes that the dup case is not significant, just it's related records.
  • The ParentId for attachments, CaseComments and EmailMessage is creatable but not updateable, so it is not possible to change case association by changing this field. That means that you have to duplicate the records, which leads to some loss of context like the comment created date and with email attachments. This can be handled by adding some text/links to the new records, which I've done some in this sample, but not a lot of it.
  • You may need to drop the 'with sharing' for the class if any of the involved objects are set to private in sharing rules.