Dienstag, 18. April 2017

How to make a Custom Report Template

Let's Start

1- Create a custom Template with this Code:
 Go to -> Shared Components -> Templates -> Create -> Report -> From Stratch

                         Name: MY_REPORT

                         Template Class : Custom1

                         Template Type: Named Column

                          Row Template 1: Set this Code

  <li class="trip relative"> <a href="#BLA_LINK2#" class="trip-search-oneresult js-tracktor-search-result"> 
    <meta itemprop="url" content="#BLA_LINK3#" /> 
    <article class="row"> 
     <div class="ProfileCard ProfileCard--condensed span2"> 
      <div class="ProfileCard-head"> 
       <div class="ProfileCard-picture"> 
        <div class="PhotoWrapper PhotoWrapper--medium"> 
         <img src="#BLA_AVATAR#" width="72" height="72" alt="" class="PhotoWrapper-user PhotoWrapper-user--medium u-rounded " /> 
        </div> 
       </div> 
       <div class="ProfileCard-infosBlock"> 
        <h2 class="ProfileCard-info ProfileCard-info--name u-truncate"> #BLA_NAME# </h2> 
        <div class="ProfileCard-info">
          #BLA_OLD#
         <br /> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="description span5"> 
      <h3 class="time u-darkGray" itemprop="startDate" content="2017-04-23"> #BLA_DATE# </h3> 
      <h3 class="fromto" itemprop="name"> <span class="trip-background">#BLA_SOURCE#</span> <span class="arrow-ie"></span> <span class="from trip-roads-stop">#BLA_SOURCE1#</span> <span class="arrow-ie"></span> <span class="trip-roads-stop">#BLA_SOURCE2#</span> <span class="arrow-ie"></span> <span class="trip-background">#BLA_SOURCE3#</span> </h3> 
      <dl class="geo-from"> 
       <dt> 
        <i class="bbc-icon2-circle first size16 green" title="Treffpunkt"></i> 
       </dt> 
       <dd class="js-tip-custom" data-hasqtip="58" oldtitle="Abfahrt" title="" aria-describedby="qtip-58">
         #BLA_DESC# 
       </dd> 
      </dl> 
      <dl class="geo-to"> 
       <dt> 
        <i class="bbc-icon2-circle first size16 red" title="Zielort"></i> 
       </dt> 
       <dd class="js-tip-custom" data-hasqtip="59" oldtitle="Ankunft" title="" aria-describedby="qtip-59">
         #BLA_DESC1# 
       </dd> 
      </dl> 
     </div> 
     <div class="offer span2 u-alignRight"> 
      <div class="price price-black" itemprop="location"> 
       <strong> <span class=""> #PREIS# </span> </strong> 
       <span class="priceUnit">#PREIS_TRAVEL#</span> 
      </div> 
      <div class="availability"> 
       <strong></strong> 
       <span>#PLACE#</span> 
      </div> 
      <i class="bbc-icon2-comfort-plus size26 u-blue u-cell u-right no-margin-right tip" aria-hidden="true" data-hasqtip="80" title=""></i> 
      <span class="u-visuallyHidden">#BLA_DESC4#</span> 
     </div> 
    </article> </a> </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


2- Custom CSS for the Report


a:focus { outline:none !important; }

.trip {
  list-style:none;
  border:0;
  border-bottom:1px solid rgb(221,221,221) !important;
  text-decoration:none !important;
}

.no-margin-right { margin-right:0 !important; }

.size26 { font-size:26px !important; }

.u-right { float:right !important; }

.u-cell { display:table-cell; }

.u-blue { color:rgb(0,134,191) !important; }

.fa-car {
  text-align:center;
  font-size:3rem;
  color:rgb(0,151,204);
  padding-left:3rem;
}

.trip-search-oneresult .price strong {
  font-size:34px;
  line-height:30px;
  font-family:Arial,Helvetica,sans-serif;
  font-weight:bold;
}

.trip-search-oneresult .price {
  margin-bottom:1px;
  min-height:61px;
}

.price-black { color:rgb(65,61,53); }

.ST.fa-dot-circle-o { color:#004c40; }

.EF.fa-dot-circle-o { color:red; }

.trip-roads-stop { color:black; }

.u-darkGray { color:rgb(0,144,153); }

.trip {
  list-style:none;
  border:0;
  border-bottom:1px solid rgb(221,221,221) !important;
}

.trip-search-oneresult:hover {
  color:rgb(114,114,114);
  background:rgb(239,248,253);
}

.ProfileCard-infosBlock { padding-left:9px; }

.ProfileCard-head {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  margin-bottom:15px;
}

.ProfileCard { display:block; }

.ProfileCard--condensed .ProfileCard-info { max-width:90px; }

.ProfileCard-info--name {
  font-weight:bold;
  font-size:1.14em;
  color:rgb(65,61,53);
  margin:0;
}

.ProfileCard-info {
  display:block;
  max-width:196px;
}

.u-truncate {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.PhotoWrapper img { border-radius:50%; }

.trip-search-results .trip {
  list-style:none;
  border:0;
  border-bottom:1px solid rgb(221,221,221);
}

.relative { position:relative; }

li { line-height:18px; }

.trip-search-oneresult {
  padding:12px 0;
  display:block;
  color:rgb(114,114,114);
  border-right:4px solid rgba(0,0,0,0);
}

.ProfileCard--condensed { width:190px; }

.ProfileCard { display:block; }

.span2 { width:140px; }

[class*=span] {
  float:left;
  min-height:1px;
  margin-left:50px;
}

.trip-search-results article { background:rgba(0,0,0,0) url(/images/search/trip-user-separator.png) repeat-y 205px 0; }

.row { margin-left:-20px; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section { display:block; }



3- Create your Report. I have Used in my Case Static SQL, because i have not at this Moment in my Database to Use. But you can Use Data for Database too.

In my Case i have used this Code:


SELECT
        '#APP_IMAGES#imagep.png' BLA_AVATAR
        ,'Alli Pierre' BLA_NAME
        ,'18 Year' BLA_OLD
        ,'So. 23. Apr. -11:30' BLA_DATE
        ,'LONDON' BLA_SOURCE
        ,'PARIS' BLA_SOURCE2
        ,'ITALIEN' BLA_SOURCE1
        ,'GERMANY' BLA_SOURCE3
        ,'  you can place Font Awesome icons just about anywhere with the' BLA_DESC
        ,'  you can place Font Awesome icons just about anywhere with the' BLA_DESC1
        ,'143 €' PREIS
        ,'pro Mitfahrer/in' PREIS_TRAVEL
        ,'3 Plätze frei' PLACE
        ,'' BLA_DESC4
        ,apex_util.prepare_url (
            'f?p=' || : APP_ID || ':14:' || : APP_SESSION
        ) BLA_LINK2
    FROM
        dual
UNION
SELECT
        '#APP_IMAGES#imagep1.png' BLA_AVATAR
        ,'Frank N' BLA_NAME
        ,'23 Year' BLA_OLD
        ,'So. 23. Apr. -11:30' BLA_DATE
        ,'LONDON' BLA_SOURCE
        ,'PARIS' BLA_SOURCE2
        ,'ITALIEN' BLA_SOURCE1
        ,'GERMANY' BLA_SOURCE3
        ,'  you can place Font Awesome icons just about anywhere with the' BLA_DESC
        ,'  you can place Font Awesome icons just about anywhere with the' BLA_DESC1
        ,'153 €' PREIS
        ,'pro Mitfahrer/in' PREIS_TRAVEL
        ,'4 Plätze frei' PLACE
        ,'' BLA_DESC4
        ,apex_util.prepare_url (
            'f?p=' || : APP_ID || ':14:' || : APP_SESSION
        ) BLA_LINK2
    FROM
        dual
UNION
SELECT
        '#APP_IMAGES#imagep2.png' BLA_AVATAR
        ,'Tom E' BLA_NAME
        ,'56 Year' BLA_OLD
        ,'So. 23. Apr. -11:30' BLA_DATE
        ,'LONDON' BLA_SOURCE
        ,'PARIS' BLA_SOURCE2
        ,'ITALIEN' BLA_SOURCE1
        ,'GERMANY' BLA_SOURCE3
        ,'   you can place Font Awesome icons just about anywhere with the' BLA_DESC
        ,'  you can place Font Awesome icons just about anywhere with the' BLA_DESC1
        ,'123 €' PREIS
        ,'pro Mitfahrer/in' PREIS_TRAVEL
        ,'5 Plätze frei' PLACE
        ,'' BLA_DESC4
        ,apex_util.prepare_url (
            'f?p=' || : APP_ID || ':14:' || : APP_SESSION
        ) BLA_LINK2
    FROM
        dual
UNION
SELECT
        '#APP_IMAGES#imagep3.png' BLA_AVATAR
        ,'Alli P' BLA_NAME
        ,'34 Year' BLA_OLD
        ,'So. 23. Apr. -11:30' BLA_DATE
        ,'LONDON' BLA_SOURCE
        ,'PARIS' BLA_SOURCE2
        ,'ITALIEN' BLA_SOURCE1
        ,'GERMANY' BLA_SOURCE3
        ,'   you can place Font Awesome icons just about anywhere with the' BLA_DESC
        ,'  you can place Font Awesome icons just about anywhere with the' BLA_DESC1
        ,'123 €' PREIS
        ,'pro Mitfahrer/in' PREIS_TRAVEL
        ,'3 Plätze frei' PLACE
        ,'' BLA_DESC4
        ,apex_util.prepare_url (
            'f?p=' || : APP_ID || ':14:' || : APP_SESSION
        ) BLA_LINK2
    FROM
        dual
UNION
SELECT
        '#APP_IMAGES#imagep4.png' BLA_AVATAR
        ,'Judith M' BLA_NAME
        ,'90 Year' BLA_OLD
        ,'So. 23. Apr. -11:30' BLA_DATE
        ,'LONDON' BLA_SOURCE
        ,'PARIS' BLA_SOURCE2
        ,'ITALIEN' BLA_SOURCE1
        ,'GERMANY' BLA_SOURCE3
        ,'   you can place Font Awesome icons just about anywhere with the' BLA_DESC
        ,'  you can place Font Awesome icons just about anywhere with the' BLA_DESC1
        ,'163 €' PREIS
        ,'pro Mitfahrer/in' PREIS_TRAVEL
        ,' 6 Plätze frei' PLACE
        ,'' BLA_DESC4
        ,apex_util.prepare_url (
            'f?p=' || : APP_ID || ':14:' || : APP_SESSION
        ) BLA_LINK2
    FROM
        dual




Demo:

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


















































Keine Kommentare:

Kommentar veröffentlichen