Home ยป OrclApex ยป Oracle Apex: Highlight Row Based on Condition

Oracle Apex: Highlight Row Based on Condition

In this tutorial, I will show you how to highlight the rows using the Highlight function from the Action menu at runtime.

Highlighting Rows in Report Based on Condition in Oracle Apex

To demonstrate this example, I am using the following Product Detail report:

Product detail report in Oracle Apex.

Now suppose we have a requirement to highlight the rows having a list price > 100. To do this follow these steps:

Click on the Actions menu to open, then point to Format > Highlight. The following dialog will open, then specify the condition and settings according to your requirement, as shown in the below image:

Oracle Apex report condition example.

After setting all the properties, click on the Apply button, and then immediately, the report will take effect as per the condition. Below is the screenshot:

Oracle Apex report row highlighting demo.

So our report condition is being applied correctly, and in the same way, you can apply more conditions to this report.

But you can see the above condition name displayed with a Star icon and Close button. If the user clicks on the Close button, the report highlight will be removed.

If you do not want to show this condition box above the report, use the following CSS trick. Follow these steps:

Hide the condition name region of the report.

To hide the conditional region, open your report in Oracle Apex page designer and specify the Static ID for the report, as shown in the below image:

Specify static id for the report in Oracle Apex.

Now add the following CSS code into the Inline CSS section of the page:

div#productReport_control_panel {
    display: none;

But please note, I specified the Static ID productReport, so I used the ID for div#productReport_control_panel in the CSS code above. It means whatever is the Static ID, you will append the string _control_panel to it. For example, if you will specify the report Static ID, then the CSS code would be:

div#myReport_control_panel {
display: none;

Now our report will display without the report condition control panel as shown in the below image:

Oracle Apex report highlight with hidden control panel.

This is looking much better, right?

But our job to create a report based on the condition is not finish yet.

Because this report is currently visible to you only, to make this report changes permanent and to visible every user, you need to save it as the Primary Report. To do this, follow these steps:

Click on the Actions Menu > Report > Save Report option. Then select the Default Report Settings option, as shown in the below image:

Oracle Apex save report.

After selecting the above option, it will show you the two options Primary and Alternative. Select the Primary option and click on the Apply button.

Now it is done, and your conditional report will be visible to every user of Oracle Apex.

Related tutorials:

9 thoughts on “Oracle Apex: Highlight Row Based on Condition”

    1. I came up with a solution similar to the indicated link, and it worked correctly. In my case it is a grid informing the scale of a group of people and I would like to print (pdf / html using native resources of the tool) the same with the background or font changed according to my need and in this case it does not. I checked with the highlight works, but there are many cases to deal with, because my grid is too big, to do one by one.

      Obs .: The report is messy, because I haven't changed the layout yet.

    2. The reports seem really huge. Why don't you join the orclqa.com community and help other members with your skills ๐Ÿ˜Š

    3. It does not matter whether we are a beginner or experienced; when we share our knowledge, it grows ๐Ÿ˜Š

  1. You can hide the highlight control without hiding the entire IR control panel.

    This works for me:

        display: none

  2. Gerardo jaen castillo

    Hello everyone, comment that with the code that is shown on the page it did not work for me I have oracle apoex 21.1 it worked for me by deleting the part of div and leaving the code in the following way.

    #IR_ORDERS_control_panel {
       display: none;

Comments are closed.