Conditional colors for fontawesome in Card List

Jon Barwell

I want to use fontawesome icons in a card list but I want to change the color of the icon depending on certain conditions.  How can I do this within the Apex framework?

fac586

Jon Barwell wrote:

I want to use fontawesome icons in a card list but I want to change the color of the icon depending on certain conditions.  How can I do this within the Apex framework?

What is the card list based on? Is is static or dynamic?

The basic approach would be to implement the conditional logic using CASE expressions in a dynamic list query to return class/colour information in the image/class or custom attribute columns. A custom list template and style sheet might also be required to apply the necessary colours.

Jon Barwell

I am going to create a dynamic list.

I have included the following as inline CSS to test

*.icon-red {color: red}

*.icon-green {color: green}

And then in the SQL query I was using

'fa-check icon-green' AS image

to set the check icon to green to test but it stays the default color.

What am I doing wrong?

Marko Goricki

Remove asterisk from CSS selectors and try to add !important after color, for example:

.icon-red {color: red !important}

.icon-green {color: green !important}

You can use some browser developer tool (like FireBug) to see/debug which style is used for icon color.

fac586

Jon Barwell wrote:

I am going to create a dynamic list.
I have included the following as inline CSS to test
*.icon-red {color: red}
*.icon-green {color: green}

And then in the SQL query I was using
'fa-check icon-green' AS image
to set the check icon to green to test but it stays the default color.

What am I doing wrong?

Your CSS rules are being overridden by theme rules with a higher specificity. You can try using the !important directive to overcome this, but I suspect the results may still not be what you are looking for.

.icon-red {color: red !important}
.icon-green {color: green !important}

The cards list is quite a complicated component, with some of the presentation determined by fixed classes in the template and some that is modifiable through the List Template Options in the list definition. We therefore need to know which options are being used, and what values are being generated in the region source. Obviously the best way to do this is to create and share an example on apex.oracle.com.

Jon Barwell

Thanks for reply.  Based on your response my alternative is to use icon view in the interactive report as I want my solution to be simple and use standard functionality where possible.  I have a fixed list of objectives that specific users have to achieve and I wanted to change the icons like a traffic light to indicate their level of monthly achievements.  Your explanation of thow the Cards List works has convinced me that this is not the correct solution.

Thanks,

Jon

fac586

I've taken a closer look at the Cards list option, and implemented a "traffic light" RAG colour scheme using a new template option and custom CSS.

1. Create a copy of the Cards list template called Cards w/ RAG colors.

2. Add a new template option to the Cards w/ RAG colors template:

Sequence: 20

Group: Color Accents

Display name: Use RAG Colors

Option Identifier: USE_RAG_COLORS

CSS classes: t-Cards--RAG

3. Add the custom CSS for the RAG colours to the template Inline CSS property:

.t-Card--RAG .RAG-red .t-Card-icon .t-Icon,
.t-Cards--RAG .RAG-red .t-Card .t-Card-icon .t-Icon {
  background-color: #c0504d;
}
.t-Card--RAG .RAG-amber .t-Card-icon .t-Icon,
.t-Cards--RAG .RAG-amber .t-Card .t-Card-icon .t-Icon {
  background-color: #f79646;
}
.t-Card--RAG .RAG-green .t-Card-icon .t-Icon,
.t-Cards--RAG .RAG-green .t-Card .t-Card-icon .t-Icon {
  background-color: #9bbb59;
}

4. Compute the "traffic light" RAG class conditionally in the list source query, returning the value in the list's attribute4 position, which the template uses to apply a class to the list entry via the #A04# substitution string:

select
   ...
  , case
      when d.employees < 3 then 'RAG-red'
      when d.employees < 7 then 'RAG-amber'
      else 'RAG-green'
    end attribute4
...

Jon Barwell

Works brilliantly :-)

Thanks

Jon