Montag, 17. April 2017

how to setup a new/message list like in APEX?

Do you want to make a new/message list like in APEX in the Home Page?

  1. First create your Classic Report. In my Case , i use the below SQl
   '<span class="a-DateList-day">'||to_char(p.created,'DD')||'</span>'
          ||'<span class="a-DateList-month">'||case when to_char(p.created,'MM')='01' then ' APR' END||'</span>' USER_AVATAR, 
  p.created EVENT_DATE,
  p.created_by USER_NAME,
  t.task_name EVENT_TITLE,
  t.created created,
  t.created_by owner,
  null EVENT_DESC,
  case status                                             
    when 'Open' then 'fa fa-clock-o'
    when 'Closed' then 'fa fa-check-circle-o'
    when 'On-Hold' then 'fa fa-exclamation-circle'
    when 'Pending' then 'fa fa-exclamation-triangle'
  case status 
    when 'Open' then 'is-new'
    when 'Closed' then 'is-removed'
    when 'On-Hold' then 'is-updated'
    when 'Pending' then 'is-updated'
  status EVENT_TYPE,
  'u-color-'||ora_hash(p.created_by,44)||'-txt' USER_COLOR
  eba_ut_chart_tasks t,
  eba_ut_chart_projects p
  t.project =
and rownum<20
order by p.created

2- Use the Timeline Template

3- Use this CSS

.t-Timeline-avatar {
    width: 50px !important;
    height: 50px !important;
    overflow: hidden;
    border-radius: 100%;
    float: left;
    line-height: 60px !important;
    font-size: 14px;
    margin-right: 12px;
    box-shadow: 0 0 0 1px inset;
    text-align: center;
    background-color: rgb(255, 255, 255);


.a-DateList-day {
    font-size: 14px;
    display: block;
    line-height: 1;
    padding-top: 4px;

.a-DateList-month {
    font-size: 11px;
    display: block;
    line-height: 20px;
    padding-bottom: 4px;
    text-transform: uppercase;
    color: rgb(255, 0, 0);
.u-color-6-text, .u-color-6-txt {
    color: rgb(112, 112, 112);

.t-Timeline--compact .t-Timeline-content {
    padding: 12px 8px;
    display: table-cell;
    width: 70%;
    vertical-align: top;
    display: none;

4- Demo


Keine Kommentare:

Kommentar veröffentlichen