Dienstag, 18. April 2017

How to setup a new/message list and clickable like in APEX Using Custom Template?

Do you want to use a dataList like in the Home Page for Oracle Apex?

To achieve that, we can use a Custrom Template.

Let's start.

1- Go to the Home Page for Oracle Apex and inspect the New/Message Data-List like in the below Picture



We can see that the dateList code for the Oracle APEX Home Page Look like
  <li class="a-DateList-item"> 
   <div class="a-MediaBlock"> 
    <div class="a-MediaBlock-graphic"> 
     <span class="a-DateList-date"> <span class="a-DateList-day">17</span> <span class="a-DateList-month">Apr</span> </span> 
    </div> 
    <div class="a-MediaBlock-content"> 
     <span class="a-DateList-desc">qweafg</span> 
     <span class="a-DateList-attribute">tom</span> 
     <span class="a-DateList-attribute">14 hours ago</span> 
    </div> 
   </div> </li>

2- Create a custom Template with this Code: 

Go to -> Shared Components -> Templates -> Create -> Report -> From Stratch

                         Name: Date List

                         Template Class : Custom1

                         Template Type: Named Column

                          Row Template 1: Set this Code

  <li class="a-DateList-item"> 
   <div class="a-MediaBlock"> 
    <div class="a-MediaBlock-graphic"> 
     <span class="a-DateList-date"><a href="#EVENT_LINK#"> <span class="a-DateList-day">#EVENT_DAY#</span> <span class="a-DateList-month">#EVENT_MON#</span></a> </span> 
    </div> 
    <div class="a-MediaBlock-content"> 
     <span class="a-DateList-desc">#EVENT_DESC#</span> 
     <span class="a-DateList-attribute">#EVENT_ATTR#</span> 
     <span class="a-DateList-attribute">#EVENT_POSTED#</span> 
    </div> 
   </div> </li>
  

                          Before Row: Set this Code

  <div id="report_#REGION_STATIC_ID#_catch"> 
   <ul class="a-DateList">
  

  
                           After Row: 
</ul>
</div>


                          Cascade Style Sheet:

  &IMAGE_PREFIX.apex_ui/css/Core.min.css
&IMAGE_PREFIX.apex_ui/css/Theme-Standard.min.css


3- Create your Report. In my Case it is

SELECT
        to_char( p.created ,'DD' ) event_day
        ,to_char( p.created ,'MON' ) event_mon
        ,'test' event_desc
        ,p.created_by event_attr
        ,p.created event_posted /* set the format mask attribute on this column to "SINCE" */
        ,apex_util.prepare_url (
            'f?p=' || : APP_ID || ':14:' || : APP_SESSION || ':::14:P23_ID:' || p.id
        ) EVENT_LINK
        ,p.id
    FROM
        eba_ut_chart_projects p


4- Select under Attributes your Template Data List.

5- Add Custrom CSS

.a-DateList-item {
  min-height:104px !important;
  padding:16px 12px;
}

.a-DateList-month {
  font-size:14px !important;
  display:block;
  line-height:15px !important;
  padding-bottom:4px;
  text-transform:uppercase;
}

.a-DateList-day {
  font-size:14px !important;
  display:block;
  line-height:25px !important;
  padding-top:4px;
}

.a-DateList-date,
.a-DateList-icon {
  display:block;
  width:62px !important;
  height:62px !important;
  border-radius:100%;
  text-align:center;
  background-color:rgb(255,255,255);
  box-shadow:0 0 0 1px rgba(0,0,0,.05) inset;
}

a:hover { text-decoration:none !important; }

.a-DateList-item .a-MediaBlock-content {
  line-height:0;
  padding-top:9px;
}





6- Demo

https://apex.oracle.com/pls/apex/f?p=123868:13

Keine Kommentare:

Kommentar veröffentlichen