Pages

▼

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 .t-Cards-item.is-active 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?

2 comments:

  1. Tyson Jouglet6 May 2019 at 08:02:00 GMT+8

    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-Cards-item.is-active .t-Card{ ... }"

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

    ReplyDelete
  2. Scott Wesley6 May 2019 at 10:16:00 GMT+8

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

    ReplyDelete