Creating a Chat region in Oracle APEX

Oracle APEX, Quick Tips 2 Minutes

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.

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.

Published by Plamen Mushkov

Published

22 thoughts on “Creating a Chat region in Oracle APEX”

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

    Reply

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

    Reply

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

    Reply

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

    Reply

      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

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

    Like

    Reply

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

      Like

      Reply

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

        Like

  9. Pingback: Oracle APEX: How to implement live automated chat with either webhooks, service workers or automation? - TechTalk7

  11. Hi Plamen

    Thanks for informative post.
    Can I add an icon instead of initial?
    I tried but looks like it doesn’t work with icon!

    Thanks

    Like

    Reply

Leave a comment