Wednesday, 24 April 2019

Highlight 'current' card in APEX

Earlier today I posted a solution that required a bit of jQuery to execute after refresh of a report.

Avoiding post-processing is always nice, so here's an example that is resolved during render.

I would like to highlight the 'current' card in this classic report:

Cards Classic Report

The SQL that dynamically defines these cards includes the following column, with some decider over which record is deemed the current selection.
,case when :P17_ITEM = 'SOMETHING' then 'is-active ' end AS card_modifiers
Then we can include some CSS relevant to that card group, identified here by Static ID 'my_cards_r'.
#my_cards_r div.t-Card
  {background-color : green;}
This solution should also reflect appropriately after any refresh of the card region.
If you define a declarative List region, it also uses the is-active class when the list entry is current, so this CSS could also apply.

This is different to the #CARD_COLOR# substitution string, that drives the colour of the circles where your icon/initials are.
Here I used:
,'u-color-12' card_color
Do you have a preferred solution?


Tyson Jouglet said...

Generally speaking when solving a problem with CSS I avoid using IDs and instead make a class to associate with the intended target. In doing so, I am now free to add the class to any card report region and include the css styles to activate it.

With the following CSS: ".t-Cards--tyson-highlight-active .t-Card{ ... }"

I am free to add "t-Cards--tyson-highlight-active" to a card report to change its properties in some way.

Scott Wesley said...

That's a good point that I need to emphasise more, ensuring one-off demonstrations are also find to use everywhere else.