4 Replies Latest reply on Feb 2, 2017 11:59 AM by oos1970

    Conditional colors in cards (classic report) apex 5.1

    oos1970

      After this tread Conditional colors for fontawesome in Card List  helped me a lot to change the colors in a classic report with cards template. I discovered that in APEX 5.1 this neat solution is no longer working. Cards now have a cool option which fills the card with the color of the icon. But this works only as long as you are using the template colors. When you implement the former solution things will not show as you thougth they would.

       

      Diving into the element inspector I noticed a new tag: #CARD_COLOR#.

      <div class="t-Card-icon u-color #CARD_COLOR#">

       

      This is new and perhaps by just referencing it in the sql-statement I would be able to make the color conditional without having to change much in the css stylesheet. And better, without having to use a customized template.

       

      This looked liked it worked. In the report sql give the column the name "CARD_COLOR" with the value 'red' and this will be the line:

       

      <div class="t-Card-icon u-color red">

       

      But it doesn't work either. The class u-color needs to be overwritten. If you look in the css stylesheet. The following code shows:

       

      .t-Card .u-color {

          background-color: #bfbfbf;

      }

       

      So I did the following thing:

       

      1. create a css stylesheet: ie colors.css

       

      And fill it with for example the following lines:

       

      .t-Card .u-color-blue {
      background-color: blue;

      }

      .t-Card .u-color-red {

      background-color: red;

      }

      .t-Card .u-color-orange {

      background-color: orange;

      }

      .t-Card .u-color-yellow {

      background-color: yellow;

      }

       

      2. Save the stylesheet in your application static files and make a reference to it in the cascading style sheets under 'User interface defaults'

       

      3. In your report sql put the following column:

      , case st.s_id

              when 1 then 'u-color-blue'

              when 2 then 'u-color-orange'

              when 3 then 'u-color-red'

              when 4 then 'u-color-yellow'

        end card_color

       

      When running the page you get the nice conditional icon colors.

       

      line in inspector: <div class="t-Card-icon u-color u-color-red"> this overwrites the default u-color.

       

      No need to create a customized template with a custom template option.

       

      Hope this helps by making conditional colored cards.

       

      Regards,

       

      Marco.

        • 1. Re: Conditional colors in cards (classic report) apex 5.1
          fac586

          oos1970 wrote:

           

          After this tread Conditional colors for fontawesome in Card List helped me a lot to change the colors in a classic report with cards template. I discovered that in APEX 5.1 this neat solution is no longer working. Cards now have a cool option which fills the card with the color of the icon. But this works only as long as you are using the template colors. When you implement the former solution things will not show as you thougth they would.

           

          Diving into the element inspector I noticed a new tag: #CARD_COLOR#.

          <div class="t-Card-icon u-color #CARD_COLOR#">

           

          This is new and perhaps by just referencing it in the sql-statement I would be able to make the color conditional without having to change much in the css stylesheet. And better, without having to use a customized template.

           

          This looked liked it worked. In the report sql give the column the name "CARD_COLOR" with the value 'red' and this will be the line:

           

          <div class="t-Card-icon u-color red">

           

          But it doesn't work either. The class u-color needs to be overwritten. If you look in the css stylesheet. The following code shows:

           

          .t-Card .u-color {

          background-color: #bfbfbf;

          }

          I would say that the expectation here is that unchecking the template option and returning built-in colour modifier classes as values in the CARD_COLOR column should enable card and icon colours to be controlled by report query logic. However this doesn't work because the u-color CSS rule has a higher specificity than the colour modifier classes. I think this is a bug, and that the general colour modifier rules should include an !important directive like the stateful modifier rules do. I'd therefore welcome involvement from ShakeebRahman-Oracle in this discussion.

          1. create a css stylesheet: ie colors.css

           

          2. Save the stylesheet in your application static files and make a reference to it in the cascading style sheets under 'User interface defaults'

           

          ...

          This can be achieved with much less effort by adding the required rules to the Custom CSS property in the Theme Roller.

          1 person found this helpful
          • 2. Re: Conditional colors in cards (classic report) apex 5.1
            oos1970

            Hello fac586,

             

            You are quite right about using the build in theme colors. I would have expected them to work too. But as long as this doesn't work, you can use this work-around. Which, by the way, is allready a lot easier than what you had to do in apex 5.0!

             

            As for using theme roller for the css. When you want the user to use his own color style do you need to apply the required rules in every theme roller style css property? If so, I would prefer my solution. That way you need to enter the css stylesheet once.

             

            Kind regards,

             

            Marco.

            • 3. Re: Conditional colors in cards (classic report) apex 5.1
              Sven W.

              Thanks for sharing your solution Marco.

               

              Alternatively you can also use the colors from the color palette directly.

               

              e.g.

              u-color-1-text / u-color-1-background

              u-color-2-text / u-color-2-background

              u-color-3-text / u-color-3-background

              ...

              u-color-15-text / u-color-15-background

               

              Recently I setup a small demo application to see the effect of certain colors.

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

               

              And the official universal theme sample application also has a section about using colors.

              1 person found this helpful
              • 4. Re: Conditional colors in cards (classic report) apex 5.1
                oos1970

                Hello Sven,

                 

                Nice demo. Unfortunately in this case the default reference does not work. Which is probably a bug as said by fac586. So you can use the work-around until someone has come with a better solution .

                 

                Kind regards,

                 

                Marco