Forum Stats

  • 3,770,908 Users
  • 2,253,180 Discussions
  • 7,875,653 Comments

Discussions

How to change column's color on Interactive report

user7911366
user7911366 Member Posts: 49 Green Ribbon

How to set the foreground and background colors of a column in an interactive report based on table, according to variable values of one or more columns?

You cannot use the IR Highlight Item functionality as the values can change and therefore would have to keep resetting.

Scenario : I created in a test table 2 more columns with the desired foreground and background colors to facilitate. The region and columns have Static Id for reference. This is the app without color treatment:

If I use the Column Formatting HTML Expression property:

<span style="width: auto;color:#FCOLOR#;background-color:#BCOLOR#;">#ID#</span>

The result is:

If I change the Column Formatting HTML Expression property to:

<td style="width: auto;color:#FCOLOR#;background-color:#BCOLOR#;">#ID#</td>

The result is:


How to remove or replace this td tag?

I've seen all Oracle tutorials on Javascript and none show how to do this. I've also searched a lot on Youtube but the closest I found was the span tag solution, which doesn't solve my need. In APEX there are several properties for HTML, CSS and Javascript, all without any documentation explaining what they are for and when and how to use them.

Every minute I gained creating the application with low code I now waste days mining information that should be present in the documentation and with easy access and simple and practical examples. For a problem as simple as setting screen item colors in Oracle Forms I just set a property without having to use any undocumented magic tricks...

Tagged:

Best Answer

  • user7911366
    user7911366 Member Posts: 49 Green Ribbon
    Accepted Answer

    Okay HPJJ, you got me really scared this time. I promise to try to be as grown up as you are and also learn your tricks of copying others' ideas and presenting them in a fancy way to look original.

    Thank you very much for the tips !

«1

Answers

  • Billy Verreynne
    Billy Verreynne Software Engineer Member Posts: 28,603 Red Diamond

    Use a calculation in the SQL projection as the column value to use as colour. Fully flexible as you determine the colour (or colours) to use as part of the output for that specific row from the SQL cursor.

    Hide this column in the interactive report. No reason to have it viewable by user.

    For the relevant column to colour code, use the the colour column to set the CSS class to use to style and colour that column value.

    E.g. the SQL column COLOR_CODE is use for colouring column NAME:


    As for wasting your time on this - perhaps basic ignorance of how to use CSS classes in HTML DOM element rendering is the problem. Not APEX so-called lack of documentation and examples.

  • user7911366
    user7911366 Member Posts: 49 Green Ribbon

    Did you not read or understand the problem? What about wasting time, if I have to become an expert in HTML, CSS, Javascript etc just to do something as trivial as setting colors, yes I am wasting my time looking for undocumented information. In no APEX manual is there clear information about the properties mentioned. If you don't want to help, please don't give rude answers...

    And by the way, your solution doesn't work as demonstrated in the examples I've shown.

  • Billy Verreynne
    Billy Verreynne Software Engineer Member Posts: 28,603 Red Diamond

    My example works very well in all APEX versions since v5. May also have worked in prior versions. Try it.

    You obviously seem unaware of https://apex.oracle.com/pls/apex/apex_pm/r/ut/design-overview.

    Your approach fails because you do not seem to understand the basics of HTML5 and CSS3 - why inject a TD element into the report table? Use a SPAN element as shown.

    Do not manually code style via the STYLE attribute of an element. It is horribly inflexible and unmaintainable. Use the CLASS attribute to assign the classes to use for styling that element.

    Where possible use APEX Universal Theme classes as shown in https://apex.oracle.com/pls/apex/apex_pm/r/ut/color-and-status-modifiers and https://apex.oracle.com/pls/apex/apex_pm/r/ut/layout-modifiers and https://apex.oracle.com/pls/apex/apex_pm/r/ut/content-modifiers.

    Stick to the basics that is provided instead of steamrolling ahead with what you perceive should work.

  • TexasApexDeveloper
    TexasApexDeveloper Member Posts: 7,815 Gold Crown

    Wow, Billy I guess user7911366 doesn't know how to at least say THANK YOU for an assist.. Ever heard of he fact ths is a FREE support forum? If you keep this up, not too many people will flocking to help you in the future..


    Thank you,

    Tony Miller

    White Rock, NM

  • user7911366
    user7911366 Member Posts: 49 Green Ribbon

    Oh, I'm sorry if I hurt your feelings towards Billy, but the point is that I didn't ask for an assessment of my knowledge but help with something I obviously don't know, after all this is a forum to resolve doubts and not to chat or show its supposed superiority. If the answer had only solved the problem despite the unnecessary rudeness, as well as yours, of course I would have appreciated it. If you are not going to help please don't be posting useless nonsense. Have a nice end to the day.

  • user7911366
    user7911366 Member Posts: 49 Green Ribbon


    "My example works very well in all APEX versions since v5. May also have worked in prior versions. Try it."

    Sorry, as I said before, your example doesn't works.

    "Your approach fails because you do not seem to understand the basics of HTML5 and CSS3 - why inject a TD element into the report table? Use a SPAN element as shown."

    The desired result is to color the cell and not just the content, the test with the td tag was to show the effect I got in my tests and not to say that this is the correct solution.

    Thanks for the links but there is no solution there.

  • Billy Verreynne
    Billy Verreynne Software Engineer Member Posts: 28,603 Red Diamond

    You need to style the class via CSS.

    Here is an example. Report query with:


    The HTML expression for column OBJECT_NAME:

    And the HTML expression for column STATUS:


    2 new CSS classes are introduced - type-table and type-index. The style is added to the page attribute CSS Inline:

    The report looks as follows:


    Unfortunately there are no means as far as I know in CSS to style the parent element of the span element with class type-table for example. Thus you cannot colour code the parent TD element via CSS.

    You can however use a JQuery selector - select all type-table class elements with a TD parent element, and style the TD element. Example code added to page attribute:


    This now colour codes the TD element only when the page loads - you also need to do the same when the report region dynamically changes via sorting, filter, and other changes. This will need to be done via a dynamic Javascript action fired after the report refresh event.

    Report looks as follows with using the JQuery selector to colour code the TD elements:


  • user7911366
    user7911366 Member Posts: 49 Green Ribbon

    Thanks again for your example but it doesn't meet the requirements. Please read my post again, what I need is to dynamically define the fore and background colors of a cell using the colors recorded in the BCOLOR and FCOLOR columns in the same record. These colors can be changed by the user, who can also include and exclude records. The region has to be base table because it will be automatically generated by APEX after executing the creation script.

    Therefore, any solution that uses a query with CASE, DECODE, etc. will not meet the need because the definitions will be typed HARD CODE inside the query, which can never contain all the possible color combinations that the user wants to configure.

    The solution must exist but it is clear that it is not a question of basic knowledge of CSS, HTML or JavaScript. The Highlights functionality itself does something similar, but I haven't found a way to configure it to do this dynamically using the colors of the current record. If the colors change or new records with new colors are inserted the Highlights will fail.

    In fact, if you look closely at the open console in my example, you'll notice that the td tag I created works but APEX creates another one or modifies the original one leaving no configuration, creating a phantom column that shifts everything to the right.

    If a simple problem doesn't have a simple solution then the product has failed!

    If simple information cannot be found quickly then the product has failed!

    Someone at Oracle hasn't done their homework...

  • Billy Verreynne
    Billy Verreynne Software Engineer Member Posts: 28,603 Red Diamond
    edited Jun 18, 2021 12:17PM

    what I need is to dynamically define the fore and background colors of a cell using the colors recorded in the BCOLOR and FCOLOR columns in the same record. 

    Where does the actual BCOLOR and FCOLOR values come from? Will each cell (column value in a row) have its own unique FCOLOR and BCOLOR value?

    These colors can be changed by the user, who can also include and exclude records. 

    How? Where does the user input of colours come from? How does the user define the condition(s) to evaluate the row and/or column to determine what colours to use?

    Therefore, any solution that uses a query with CASE, DECODE, etc. will not meet the need because the definitions will be typed HARD CODE inside the query, which can never contain all the possible color combinations that the user wants to configure.

    Disagree. SQL projection is an ideal mechanism in APEX to evaluate user supplied predicates to evaluate and determine rendering classes (or manual styles) to apply.

    In fact, if you look closely at the open console in my example, you'll notice that the td tag I created works but APEX creates another one or modifies the original one leaving no configuration, creating a phantom column that shifts everything to the right.

    Exactly. You very rudely are disrupting the defined HTML TABLE element structure by inject a new column (TD element) into the table body, without also providing a column header in the table header for that new column.

    And this clearly points to a lack of basic understanding of HTML.

    If a simple problem doesn't have a simple solution then the product has failed! If simple information cannot be found quickly then the product has failed!

    A ridiculous statement. The problem statement does not determine the simplicity of the solution. Else we would have solved the simplistic problem statement of containing nuclear fusion with magnetic fields - enabling us to provide unlimited energy via nuclear fusion to mankind.

    Someone at Oracle hasn't done their homework...

    You have two basic choices. Whine and complain while wallowing in ignorance. Or take this as a learning opportunity to gain experience and skills that will make you a better software developer.

    And getting frustrated and upset will not solve your problem.

    I like technical problems. I love taking them apart, figuring out the internal working components, isolate the issue, and trying to fix it. I'm keen to help you solve your problem.

    But getting upset at Oracle, APEX, me and whatever else, do not detail the actual problem you are trying to solve. How about giving us the business requirement that you are trying to address with this user-can-dynamically-and-magically-colour-code report columns solution?

  • TexasApexDeveloper
    TexasApexDeveloper Member Posts: 7,815 Gold Crown

    Billy, chalk this one off to a spoiled little man who has no idea how ask for help. He will continue to whine and stomp his feet as apposed to ACTUALLY trying your solution. Again, since I have been here in the forums a few years, and have seen a few people like this show up. They either will change their tune or not asking for help up here..


    I for on thank you for at least TRYING to show this user the answer.. If they cant be bothered to at least try what you have suggested that is their problem, NOT yours.


    Thank you,


    Tony Miller

    White Rock, NM

This discussion has been closed.