Skip to Main Content

Standard Comments Template

  • Nuno Gomes 5/13/2024
    Hey, what's up?
  • Luis Eduardo 5/14/2024
    I need some help.
  • Luis Eduardo 5/15/2024
    What is my schedule?
  • Nuno Gomes 5/16/2024
    For next week?
  • Luis Eduardo 5/17/2024
    Yes.
  • Luis Eduardo 5/18/2024
    And next month too.
  • Nuno Gomes 5/19/2024
    Give me a minute.

Comments Template Modified

  • Nuno Gomes 5/13/2024
    Hey, what's up?
  • Luis Eduardo 5/14/2024
    I need some help.
  • Luis Eduardo 5/15/2024
    What is my schedule?
  • Nuno Gomes 5/16/2024
    For next week?
  • Luis Eduardo 5/17/2024
    Yes.
  • Luis Eduardo 5/18/2024
    And next month too.
  • Nuno Gomes 5/19/2024
    Give me a minute.

Chat region

  • Gabriel Batistuta 1.8 years ago
    Hey, what's up?
  • Filippo Inzaghi 1.8 years ago
    I need some help.
  • Filippo Inzaghi 1.8 years ago
    What is my schedule?
  • Francesco Totti 1.8 years ago
    For next week?
  • Filippo Inzaghi 1.8 years ago
    Yes.
  • Filippo Inzaghi 1.8 years ago
    And next month too.
  • Gabriel Batistuta 1.8 years ago
    Use the button next to the title to clear the newest chat messages :)

Put this in your page CSS > Inline section, static CSS file, etc.

/* 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: rgba(130, 130, 130, 0.3);
  border-right-color: rgba(0,0,0,0);
  right: none;
  left: 100%;
}
/* END comments/chat region styles */

Create a Classic Report with a query like the one below. Pay attention to the comment_modifiers column. It should have the t-Chat--own class in case it's own message. This will be used to position the messages on the right.

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_own
        when 'Yes' then 't-Chat--own'
        else null
       end comment_modifiers
  from dummy_data
  order by comment_date asc 

Add the t-Chat class to your Classic Report Appearance > CSS Classes field

Link to my blog Creating a Chat region in Oracle APEX