Did you ever needed a chat region for your Oracle APEX application? There is actually a Classic Report Comments template that produces almost that. With few simple steps you can turn Comments template into a real chat. Follow the steps below to create an excellent Chat region in APEX using just built-in components and a pinch of CSS.
Turn Comments into a Chat
🔸 Classic Report with Comments Template
🔸 Slightly modified SQL query, specifying which message are your own and which are not
🔸 A special CSS class, assigned to the Classic Report, which will be used for styling it
select user_name,
comment_text,
comment_date,
apex_string.get_initials(user_name) 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'
else null
end comment_modifiers
from chat_messages
order by comment_date asc
Final step — some CSS to style your Chat region. It can be placed into your page’s Inline CSS, a static CSS file that you use for your application or other fancy places that you can imagine. Ideally I would place it into my own CSS file in Shared Components.
/* 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%;
}
/* END comments/chat region styles */
Add sending messages functionality
As a second step of transforming the Classic Report Comments template into fully functional Oracle APEX Chat region, we will be adding the functionality to add messages.
What’s next? Adding a Text Field and a button to enable sending messages. I think the layout above works best for this purpose. Make sure you set Static IDs as follows:
🔸 Chat region — functional_chat
🔸 Chat messages — chat-messages
🔸 Send button — post-message-btn
Final step — add some Dynamic Actions that will be used to push your messages to the database, refreshing the Classic Report Chat region and setting the focus back to the messages Text Field.
begin
-- Proceed to insert the message in the table
insert into chat_messages (user_name, is_owner, comment_text, comment_date)
values ('Luis Eduardo', 'Yes', :P19_MESSAGE, sysdate);
commit;
end;
apex.message.showPageSuccess("Message sent.");
apex.region("chat-messages").refresh();
apex.item("P19_MESSAGE").setValue("");
apex.item("P19_MESSAGE").enable();
apex.item("P19_MESSAGE").setFocus();
// Trigger button click
$("#post-message-btn").click();
Demo
What is a blog post without a good demo … Check my Demo page and test the Chat region.
As always, done using the free workspace, provided by the Oracle APEX team.
Due to the many requests I got for providing an application export, here it is.
Take note that this application was exported from an Oracle APEX instance, running version 23.1 (Compatibility mode => 19.2 / 20.1 / 20.2 / 21.1) at apex.oracle.com.
📑 https://github.com/plamen9/APEX-Chat
In case you have any question or missing some step in the process, please let me know in the comments section or follow me on Twitter (@plamen_9) for more tips and tricks on Oracle APEX.
APEX App Lab - Blog 
Do have APEX install script for this app?
LikeLike
Hi Mike, you can check my GitHub repository:
https://github.com/plamen9/APEX-Chat
LikeLike
Hi Plamen,
Good day, It is great job in a few steps, thanks a lot and please let me ask you how I can make auto refresh on my chat classic report if another user send me a messagemoh
LikeLiked by 1 person
It’s a good question
LikeLiked by 1 person
Good question indeed! There are several ways to achieve this – some simpler, others more complicated.
– By running a Dynamic action that refreshes the Chat region every X seconds – the most straightforward and easy one, but not so user friendly
– By creating an Automation that runs every X seconds and updates a flag (might be an Application Global Item) if there are new messages. Then on the page with the Chat region – a Dynamic Action, running every X seconds and depending on the value of the Application Item, triggers a refresh of the Chat region – a bit more complex solution, but will trigger a refresh only when there are new messages, a lot better UX
– By using a Service Worker or Webhooks to “listen” for different events, such as new message being received. it could then trigger a specific action – that’s the most complex solution
LikeLike
Thanks for your reply
LikeLiked by 1 person
Hello,
I did all above but unfortunately row reverse didn’t work
would you please give me hint about why it could be happened
LikeLike
Hi I Need To Give Some Explain about above words
I Mean Rows To Be The Newest One In The Bottom and The Oldest One To Be In The Above
LikeLike
Check the Classic Report query in the post. It is the ORDER BY that is controlling what you ask for.
They should be ordered ascending by date – order by comment_date asc.
LikeLike
Thanks for your kind reply 🙂
Actually i sort data by date as your recommendation in this blog
and it is sorted successfully
but what I mean is to reverse classic report top to be down near the item(chat-messages)
look like WhatsApp application the last message appear in the bottom not in the top of report
LikeLike
I see what you mean. You should create a Dynamic Action, triggered on Region Refresh.
Add the following True Action:
Execute Javascript Code: $(“#chat-messages .t-Region-body”).scrollTop($(“#chat-messages .t-Region-body”)[0].scrollHeight);
* chat-messages is the Static ID of the Chat Region.
LikeLike
It is working very well .. Many thanks 🙂
LikeLike
It is working very well .. Many thanks 🙂
LikeLiked by 1 person
Hi, Can I get the Apex install script? demo matches my requirement.
Thank You
LikeLike
Hi Arun, you can check my GitHub repository:
https://github.com/plamen9/APEX-Chat
LikeLike
hello, please i used a process to insert into my table. all messages display on the right. it is not able to seperate the messages from sender and receipient
LikeLike
sme question
LikeLike
Look at the sample query above:
select user_name,
comment_text,
comment_date,
apex_string.get_initials(user_name) 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’
else null
end comment_modifiers
from chat_messages
order by comment_date asc
You should have a column (like comment_modifiers) that has a different value, depending on who has sent the message. You should also follow the steps above and add the necessary CSS code and CSS class to the Report.
LikeLike
Thanks for your reply, I followed the above steps and added the necessary CSS code and CSS class to the report but it does not appear as above. Please send us your awesome chat app.
LikeLike