Creating a Chat region in Oracle APEX

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

Here are the settings for your Classic Report with Comments template applied
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.

The following CSS styles can be added in multiple places in your APEX application. I would prefer to do it in a global css file, usually stored in Application files or Workspace files 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.

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.


14 thoughts on “Creating a Chat region in Oracle APEX

  1. 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

    Liked by 1 person

  2. 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

    Like

  3. Hello,
    I did all above but unfortunately row reverse didn’t work
    would you please give me hint about why it could be happened

    Like

  4. 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

    Like

      1. 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

        Like

      2. 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.

        Like

Leave a Reply to Mike Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s