Oracle Apex - Show Notification on the Regions

Oracle Apex - Show Notification on the Regions

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.

Usually, we display notifications on the navigation bar. But sometimes, you may require to show the notification on a particular region. Especially on report or chart regions, to show the newly added rows. In this Oracle Apex tutorial, I am giving an example to show the notification on the regions in a page.

To show the notifications on a region in Oracle Apex as shown in the below image, follow these steps:

Displays a notification on a region in Oracle Apex.

Show Notification on a Report Region in Oracle Apex

  1. Open the page and select the region on which you want to show the notification.
  2. Select template type as Standard.
  3. Create a hidden page item in that region. For example, the name of the item is P1_NOTI.
  4. Set the default value for that item and set the type as SQL query, and specify the following SQL query, for example, select count(1) from emp where hiredate = sysdate;
  5. Now specify the region title as follows: My Report <span class="notification" data-count="&P1_NOTI.">&P1_NOTI.</span>.
  6. Specify a static ID to the region—for example, myReport.
  7. You are almost done, now add the below CSS in the page's Inline CSS section:
#myReport .notification {
position: absolute;
top: -13px;
left: 86px;
padding: 6px 12px;
border-radius: 90%;
background: red;
color: white;
}
.notification[data-count="0"]{display:none;}

Save the changes and run the page. You will see the notification as per your data configuration.

You may need to set the CSS part left:86px; according to your title length.

The notification will display if the value is greater than 0; for the 0 value, it will not show the notification.