Custom html for an APEX generated item? jQuery to the rescue
The APEX application I’m working on has a search filter on a report page that looks like this:
The list of values is based on a user-defined “ref codes” table, which includes an option “Show By Default”. This option is currently set on the “Closed” and “Deleted” status and means that transactions with that status will not normally be listed in the report, unless the user explicitly selects either of those statuses, e.g.:
If no checkboxes are selected, the report shows all transactions by default, except for Closed or Deleted transactions.
To indicate this behaviour, I added an asterisk (*) next to the label on those checkboxes. I also wanted some hover text so that a user who has forgotten what the asterisk means can get an idea, e.g.:
<td> <input type="checkbox" id="P23_FTS_STATUS_7" name="p_v05" value="CLOSED"> <label for="P23_FTS_STATUS_7" title="* not shown by default">Closed*</label> </td>
To add the hover text I simply add this to the Execute when Page Loads page attribute:
$("label[for*='P23_FTS_STATUS']:contains('*')") .attr("title","* not shown by default")
This searches for all label nodes where the “for” attribute contains my item name (“P23_FTS_STATUS”), where the text contains a “*”. It then adds the “title” attribute with my desired value.