Building a Real-Time Chatroom in Oracle APEX Using the Comments Template

Introduction

Enterprise applications often require collaboration between different business roles such as Requesters, Buyers, and Suppliers. One effective way to enable collaboration is by integrating a chat-style communication module directly inside the application.

In this article, we will implement a fully functional Chatroom in Oracle APEX with the following features:

• Real-time chat interface

• Message status indicators (Sent / Read)

• Reply option

• Role-based recipients

This solution uses Oracle APEX Comments Template with custom SQL and PL/SQL logic. 

Architecture of the Chat Module

The chat implementation consists of the following components:

Component	Purpose
Chat Table	Stores messages
Classic Report	Displays messages
Comments Template	Chat-style UI
Dynamic Actions	Send / Refresh messages
PL/SQL Process	Save messages & attachments
CSS	Chat styling
Message Status	Sent / Read indicators

Step by Step Approaches

Step 1 - Chat Table Structure

The chat module uses a custom table:

XX_CHAT_MESSAGES_T

Important columns:

Column	Purpose
MESSAGE_ID	Unique message
USER_NAME	Sender username
SENDER_NAME	Employee name
COMMENT_TEXT	Message content
ATTACHMENT	File BLOB
FILENAME	Attachment name
MIMETYPE	File type
RECIPIENTS	Message recipients
MSG_STATUS	SENT / READ

This design allows the same chat system to work for PR, RFQ, and PO workflows.

Step 2 - Creating the Chat Region

Create a Classic Report region.

Region settings:

Region Name: Chat messages
Region Type: Classic Report
Template: Comments

Important configuration:

CSS Classes: t-Chat
Static ID: chat-messages

The Static ID is required because it will be used later for dynamic refresh using JavaScript.

Step 3 - Creating the Chat Query

The chat messages displayed in the interface are retrieved using a Classic Report SQL query.

This query performs several important tasks:

• Fetches chat messages from the database

• Displays the message text and timestamp

• Generates user avatar icons dynamically

• Aligns the current user’s messages on the right side

• Applies styling using the Comments Template

The query reads data from the table:

XX_CHAT_MESSAGES_T

which stores all chat conversations.

Chat Query Implementation

Create a Classic Report region and add the following SQL query.

CODE:

select user_name,

       comment_text,

       comment_date,

             case 

        when upper(user_name) = (:APP_USER) then

       '<div style="background-color:#2b5401;">' 

       ||apex_string.get_initials(user_name)

       ||'</div>'

       else '<div style="background-color:#4f0639;">'

       ||apex_string.get_initials(user_name)

       ||'</div>'

       end user_icon,

        null                     as actions,

      null                     as attribute_1,

       null                     as attribute_2,

       null                     as attribute_3,

       null                     as attribute_4, 

       /* case is_owner

        when 'Yes' then 't-Chat--own' */

           case 

        when upper(user_name) = (:APP_USER) then 't-Chat--own'

        else null

       end comment_modifiers

  from xx_chat_messages_t

  order by comment_date asc 

Understanding the Chat Query

The query is structured to support the Oracle APEX Comments Template, which expects specific columns.

Column	Purpose
user_name	Displays sender name
comment_text	Chat message
comment_date	Message timestamp
user_icon	Avatar icon
actions	Optional action buttons
attribute_1–4	Extra template attributes
comment_modifiers	Controls message alignment

Step 4 - Styling the Chat Interface Using CSS

To improve the chat interface layout, custom CSS is added to modify the behavior of the Oracle APEX Comments Template.

This CSS helps achieve:

• WhatsApp-style message alignment

• Proper avatar positioning

• Chat container scrolling

• Clean message bubble layout

Add the following CSS under:

Page → CSS → Inline

CSS CODE :

/* BEGIN comments/chat region styles */
.t-Chat .t-Chat--own .t-Comments-icon {
  margin-right: 0;
  margin-left: 12px;
}
.t-Chat .t-Chat--own {
  flex-direction: row-reverse;
}
.t-Chat .t-Chat--own .t-Comments-body {
  align-items: flex-end;
}
.t-Chat .t-Chat--own .t-Comments-comment:after {
  border-left-color: var(--ut-comment-chat-background-color);
  border-right-color: rgba(0,0,0,0);
  right: none;
  left: 100%;
}
.t-Chat .t-Comments {
   height: 470px;
   overflow: scroll;
}
/* END comments/chat region styles */ 
.u-Processing {
display:none !important;
}
.t-Region-header
{
    background-color: #6172F3;
}

What this CSS does

CSS Rule	Purpose
t-Chat--own	Aligns current user messages to the right
flex-direction: row-reverse	Moves avatar to right side
align-items: flex-end	Aligns message bubble properly
height: 470px	Creates scrollable chat window

Step 5 - Auto Refresh the Chat Messages

To simulate real-time chat behavior, we refresh the chat region every few seconds.

Add the following JavaScript under:

Page → Function and Global Variable Declaration
CODE :
function setRefresh() {
  apex.region("chat-messages").refresh();
  
  setTimeout(function() {
    setRefresh();  
  }, 5000);

}

Then add this code under:
Execute when Page Loads
setRefresh();

How it works

Function
Purpose
apex.region().refresh()
Reloads the chat report
setTimeout()
Runs refresh every 5 seconds
setRefresh()
Recursive refresh loop
This ensures that new messages appear automatically without reloading the page.

Step 6 - Creating the Message Input Item

Next, create a Text Field item for typing chat messages.
Item configuration:
Item Name: P45_MESSAGE
Type      : Text Field
Label     : (Hidden)
Placeholder: Enter your message...
This item allows users to type messages before sending them.

Step 7 - Creating the Send Button

Create a button to submit messages.
Button configuration:
Button Name : SEND
Label       : Send
Button Template : Icon
This button triggers a Dynamic Action to insert the message into the database.

Step 8 - Sending Messages Using Dynamic Action

Create a Dynamic Action on the SEND button.
Configuration:
Event : Click
Selection Type : Button
Button : SEND
Add the following True Actions.
Action type: Execute Server side code
Item to Submit : P45_MESSAGE
begin
 -- Proceed to insert the message in the table
 insert into eg_office_chat_messages_t (user_name, is_owner, comment_text, comment_date)
   values (initcap(:APP_USER), 'Yes', :P45_MESSAGE, sysdate);
 commit;
end;

Action type: Execute Javascript code
apex.message.showPageSuccess("Message sent.");
apex.region("chat-messages").refresh();
apex.item("P45_MESSAGE").setValue("");
apex.item("P45_MESSAGE").enable();
apex.item("P45_MESSAGE").setFocus();

Final Output - Group Chat Interface in Oracle APEX

After completing all the previous steps, the chat module is fully functional and provides a real-time group chat experience inside the Oracle APEX 
application. Users can send messages, view conversations, and see messages aligned based on the sender.

Conclusion

In this blog, we implemented a fully functional chat module in Oracle APEX using the Comments Template. By combining SQL queries, dynamic actions, CSS customization, and JavaScript auto-refresh, we created a simple yet powerful chat interface inside an APEX application.
This approach can be used in many enterprise use cases such as:
Internal team communication
Approval workflow discussions
Project collaboration
Customer support chat
The implementation is lightweight, easy to maintain, and fully integrated with the Oracle APEX framework.