I am trying to create a page control for selecting an action to apply to a data item.
The possible actions are sourced dynamically from a database query depending on the item state, and the options are mutually exclusive. So the answer is obvious, right? A Radio Group item based on a dynamic LOV. Not so fast ... the problem is that we want the options to include an icon like this:
Just adding icon mark-up to the LOV output doesn't work, because APEX always HTML escapes LOV display values, since option elements in select list and shuttle controls can only contain plain text. This overlooks the fact that LOV labels are used in other places that can contain nested HTML elements (checkbox and radio button labels; report column text look-ups), and that option elements can legitimately contain HTML character entities.
@patrick-wolf-oracle suggested a hack to work round this, but I have never found that to actually work.
This restriction has bugged me for years but is particularly annoying in this case as the radio group + pill template option + unescaped icon mark-up does exactly what is required.
I have already tried various other built-in alternatives, but they are all less elegant than a working radio group item would be. We only need this on two pages so building an item plug-in would be overkill.
- Radio Group (unescaped icon mark-up)
- Dynamic data source.
- Options are mutually exclusive.
- Would look right.
- Fails due to unnecessary APEX escaping.
- Radio Group (pill +
**::first-letter** CSS)
- Dynamic data source.
- Options are mutually exclusive.
- Would look right.
- Seemed like a cunning plan: include the Unicode character for each icon at the start of the LOV display value and add the formatting using the CSS
::first-letter pseudo-element selector. Fails because ::first-letter does not apply to flex containers.
- Tab List
- Dynamic data source.
- Looks right.
- Requires additional coding to capture user selection, highlight selection, and enforce mutually exclusive options.
- Navigation Bar List
- Dynamic data source.
- Looks OK.
- Requires additional coding to capture user selection, highlight selection, and enforce mutually exclusive options.
- Button Group
- Requires additional rendering code (report or dynamic content region) to dynamically display buttons.
- Looks OK.
- Requires additional coding to capture user selection, highlight selection, and enforce mutually exclusive options.
Any thoughts? Need something that will work on 19.2 initially and not break on upgrade to 22.2.