6 Replies Latest reply on Oct 16, 2015 6:11 AM by MortenBraten

    Conditional colours in cards report (5.0)

    Scott Wesley

      After reading through a suggested solution here

      Conditional colors for fontawesome in Card List

      I thought there might be a way to do this without creating a new template.

      Note in my case I was using report, not list.

       

      Using compact with no icons, I found the CSS had to refer to the :before selector as t-Icon seemed to get ignored/overwritten, even though it showed up in the DOM

      .t-Cards .RAG-green .t-Card .t-Card-wrap:before {  
        background-color: #9bbb59;  
      }  
      

      Then I included the CSS in my dynamic SQL for the report

      ,'RAG-green' card_attributes
      

       

      This worked and required minimal customisation. Any future updates to the template should not affect directly the result.

       

      Can anyone see a problem with this solution? Or a way to improve it?

       

      I'm still curious as to why we have a report and list cards template, and which one is easier.

        • 1. Re: Conditional colours in cards report (5.0)
          fac586

          swesley_perth wrote:

           

          After reading through a suggested solution here

          Conditional colors for fontawesome in Card List

          I thought there might be a way to do this without creating a new template.

          Note in my case I was using report, not list.

          Could you show a demo on apex.oracle.com?

          Using compact with no icons, I found the CSS had to refer to the :before selector as t-Icon seemed to get ignored/overwritten, even though it showed up in the DOM

          1. .t-Cards .RAG-green .t-Card .t-Card-wrap:before {   
          2.   background-color: #9bbb59;   
          3. }   

           

          I'm not clear on that. Can you explain further? I used t-Icon in my list template.

           

          Where did you put this style sheet?

          Then I included the CSS in my dynamic SQL for the report

          1. ,'RAG-green' card_attributes 

           

          I don't see how that can affect the report. Do you mean CARD_MODIFIERS rather than CARD_ATTRIBUTES? There is no CARD_ATTRIBUTES column substitution string in the Cards report template:

           

          <li class="t-Cards-item #CARD_MODIFIERS#">
            <div class="t-Card">
              <a href="#CARD_LINK#" class="t-Card-wrap">
                <div class="t-Card-icon"><span class="t-Icon #CARD_ICON#"><span class="t-Card-initials" role="presentation">#CARD_INITIALS#</span></span></div>
                <div class="t-Card-titleWrap"><h3 class="t-Card-title">#CARD_TITLE#</h3></div>
                <div class="t-Card-body">
                  <div class="t-Card-desc">#CARD_TEXT#</div>
                  <div class="t-Card-info">#CARD_SUBTEXT#</div>
                </div>
              </a>
            </div>
          </li>
          

          This worked and required minimal customisation. Any future updates to the template should not affect directly the result.


          Can anyone see a problem with this solution? Or a way to improve it?

          I'll reserve comment until I have a clearer idea of exactly what you've done and see some results.

          I'm still curious as to why we have a report and list cards template, and which one is easier.

          My first thought was that by APEX convention navigation is inherent in a list, and that the report would by default provide a "read-only" display with no links, unless links were specified using standard column link functionality. This however is not the case. Links are hard-coded into both the list and report templates, which in terms of their HTML structure are identical. They are two implementations of the same Cards design pattern, so to understand why we have both, we need to consider the differences between lists and reports:

           

          • Lists support either static entries or dynamic entries sourced from a database query. Reports only support dynamic content retrieved from the database.
          • The entire contents of a list is output when a list region is rendered, whilst report output can be limited and navigated using pagination.
          • Authorization schemes and conditions are applied to list entries for static lists, and to columns in reports. Authorization schemes and conditions cannot be applied declaratively to dynamic list entries.
          • Lists support alternative templates for current page entries.
          • Static lists support click counting.
          • Report contents can be exported in different formats.
          • Reports can be printed in different formats and layouts.

           

          From which I would draw the not unsurprising conclusions that the list implementation is the best option for using the Cards pattern in a navigational context, where the entries are static or comprised of a small number of (probably familiar) dynamic values.  The report version is better suited for displaying larger/unknown volumes of data in the Cards format, and where there's a requirement to export the data or provide high-fidelity printed output.

          1 person found this helpful
          • 2. Re: Re: Conditional colours in cards report (5.0)
            Scott Wesley

            Firstly to address my poorly worded question

            workspace: swesley

            user: otn

            pass: forum

            https://apex.oracle.com/pls/apex/f?p=88776:4

             

            Inline CSS:

            /* Parameterise card colour using card_modifier */
            .t-Cards .RAG-red .t-Card .t-Card-wrap:before { 
              background-color: #c0504d; 
            } 
            .t-Cards .RAG-amber .t-Card .t-Card-wrap:before { 
              background-color: #f79646; 
            } 
            .t-Cards .RAG-green .t-Card .t-Card-wrap:before { 
              background-color: #9bbb59; 
            } 
            .t-Cards .RAG-blue .t-Card .t-Card-wrap:before { 
              background-color: blue; 
            } 
            

            Classic report with cards template, compact

            select job card_title, ename card_text
            ,'Sal:'||sal card_subtext, null card_link
            ,case
              when sal < 1000 then 'RAG-red'
              when sal < 2000 then 'RAG-amber'
              else  'RAG-green' end card_modifiers
            ,null card_icon, null card_initials
            from emp
            order by sal
            

             

            Works a treat, for this specific problem. Untested with icons/initials.

            • 3. Re: Re: Conditional colours in cards report (5.0)
              Scott Wesley

              That's a great summary of the differences. Templates aside, it's really back to the fundamental differences between lists and reports.

              This template just lends itself to being handy in both circumstances, where other templates not so much.

              • 4. Re: Conditional colours in cards report (5.0)
                fac586

                swesley_perth wrote:

                 

                Firstly to address my poorly worded question

                workspace: swesley

                user: otn

                pass: forum

                https://apex.oracle.com/pls/apex/f?p=88776:4

                In addition to the list/report implementation, we're also changing the presentation in different ways. My template is changing the icon colours rather than applying an accent to the card body: https://apex.oracle.com/pls/apex/f?p=UNIVERSAL_THEME:RAG_CARDS

                Works a treat, for this specific problem. Untested with icons/initials.

                That's where I think your problems will begin. Change the theme options in your report to

                 

                • Color Accents: Use Theme Colors
                • Icons: Display Icons (or Initials)

                 

                and the RAG colours disappear from the cards. As I said in the other thread:

                Your CSS rules are being overridden by theme rules with a higher specificity...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.

                Having determined how it worked I figured that since a colour setting existed in the template then that was where all of the colour options had to be implemented, to avoid inconsistency between what the developer saw/selected in the template options and what was actually displayed. After all of the dire warnings from Oracle about not unsubscribing themes or modifying Universal Theme templates, that meant I had to create a new template.

                 

                Although at first this seems more complex than just adding some CSS overrides, it has a number of benefits.

                 

                • Using mutually exclusive classes for each of the choices within a template option eliminates gnarly selector specificity conflicts that might occur between the template CSS and any ad hoc overrides that are applied (as I suspect is happening when the icon and colour options are selected with your report).
                • The template is modular, allowing the CSS for custom template options to be entered into the template Inline or referenced File URLs (however much I may dislike where that CSS code ends up in the page).
                • Modularity enables reusability and portability. The template can be reused on pages or copied into another app containing everything needed for it to be immediately operable, which is an improvement over multiple instances of inline CSS.

                 

                I've never had a problem with creating templates, and with template options providing an additional level of customisation I'm not going to stop now.

                This template just lends itself to being handy in both circumstances, where other templates not so much.

                Badge List is another UI pattern with dual list/report implementations (the latter is not demonstrated in the Universal Theme Sample Application). From what I've seen so far there are more stylistic differences between them than there are with Cards. The Badge List report is distinctly bland compared to the list.

                1 person found this helpful
                • 5. Re: Conditional colours in cards report (5.0)
                  Scott Wesley

                  I realise the presentation may be different, which is why I said I tested it only using certain template options.

                  The lack of colour for icons was fixed by adding more CSS, similar to your original.

                   

                  The issue with it being overwritten with the "use theme colours" selection is probably the balances to be made between having an unmodified template that can be customised with CSS/SQL changes, but only work in given template options vs creating a new template (which I'm also not against, but want to minimise).

                   

                  Badges probably make the problem worse given their UI differences between Lists and Reports.

                   

                  Thanks for your input, it's interesting to think about.

                  • 6. Re: Conditional colours in cards report (5.0)
                    MortenBraten

                    I had the same/similar problem a few months back, and I asked Shakeeb about it on Twitter, but I didn't really get a solution. Based on his reply, it appears that it is supposed to be possible, but as I've shown it's not working out of the box. That means this is a bug/feature that needs to be fixed for Apex 5.1 (or even 5.0.2!).

                     

                    https://twitter.com/mortenbraten/status/623125998339555328

                     

                    - Morten