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.


2 thoughts on “Creating a Chat region in Oracle APEX

Leave a 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