7 Replies Latest reply on Aug 12, 2015 3:13 PM by Jon Barwell

    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?

        • 1. Re: Conditional colors for fontawesome in Card List
          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.

          • 2. Re: Conditional colors for fontawesome in Card List
            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?

            • 3. Re: Conditional colors for fontawesome in Card List
              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.

              • 4. Re: Re: Conditional colors for fontawesome in Card List
                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.

                • 5. Re: Re: Conditional colors for fontawesome in Card List
                  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

                  • 6. Re: Re: Re: Conditional colors for fontawesome in Card List
                    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
                    ...
                    
                    
                    • 7. Re: Re: Re: Conditional colors for fontawesome in Card List
                      Jon Barwell

                      Works brilliantly :-)

                       

                      Thanks

                       

                      Jon