Wednesday, April 19, 2017

How to make a Custom Card Template with Oracle APEX

1- Go to Shared Components -> Templates -> Card and Copy the Card Template

2- Customize this Template. In my Case i have the below Code in Row Template 2


<li class="t-Cards-item #CARD_MODIFIERS#">
  <div class="t-Card">
      <span class="badge badge--new">#BADGE#</span>//I have add a Badge
      <span class="rating rating--new">#RATING#</span>// I have add the Rating
    <div class="t-Card-wrap">
      <div class="t-Card-icon u-color #CARD_COLOR#"><span class="t-Icon fa #CARD_ICON#"><span class="t-Card-initials" role="presentation">#CARD_INITIALS#</span></span></div>
      <div class="t-Card-titleWrap"><h3 class="t-Card-title">#CARD_TITLE#</h3></div>
      <div class="t-Card-body">
        <div class="t-Card-desc">#CARD_TEXT#</div>
          <div>
             
          <span class="t-Card-info">#CARD_SUBTEXT#</span>
              <span class="t-Card-info1">#CARD_SUBTEXT1#</span>// I have add this Span for the Price
         
          </div>
      </div>
      <span class="t-Card-colorFill u-color #CARD_COLOR#"></span>
    </div>
  </div>
</li>


3- Create your Report

select '<img src="#APP_IMAGES#imagep.png">' card_title,
'Alli Pierre' CARD_TEXT,
'GERMANY' CARD_SUBTEXT,
'143 €' CARD_SUBTEXT1,
 '<span class="STEA fa fa fa-star"></span> <paul>2,6/5</paul>' RATING,
 'neu' BADGE
               

from dual

union
select '<img src="#APP_IMAGES#imagep1.png">' card_title,
'Frank N' CARD_TEXT,
'USA' CARD_SUBTEXT,
'153 €' CARD_SUBTEXT1,
 '<span class="STEA fa fa fa-star"></span> <paul>4,6/5</paul>' RATING,
  'top' BADGE

from dual

union
select '<img src="#APP_IMAGES#imagep2.png">' card_title,
'Tom E' CARD_TEXT,
'PARIS' CARD_SUBTEXT,
'123 €' CARD_SUBTEXT1,
 '<span class="STEA fa fa fa-star"></span> <paul>4,6/5</paul>' RATING,
  'neu' BADGE

from dual

union
select '<img src="#APP_IMAGES#imagep3.png">' card_title,
'Alli P' CARD_TEXT,
'ITALIEN' CARD_SUBTEXT,
'123 €' CARD_SUBTEXT1,
 '<span class="STEA fa fa fa-star"></span> <paul>3,6/5</paul>' RATING,
  'neu' BADGE
             

from dual


union
select '<img src="#APP_IMAGES#imagep4.png">' card_title,
'Judith M' CARD_TEXT,
'ITALIEN' CARD_SUBTEXT,
'163 €' CARD_SUBTEXT1,
 '<span class="STEA fa fa fa-star"></span> <paul>4,3/5</paul>' RATING,
  'top' BADGE

from dual


4- Add Custom Css for the Look and Feel

.t-Card-info1 {
    float: right;
    background: rgb(60, 175, 133);
    color: rgb(255, 255, 255);
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
    -webkit-transform: rotate(-20deg);
    font-size: 2rem;
    padding-top: 5px;
    padding-bottom: 5px;
}


.t-Card-info1{
    float:right;
}

.fa-star{
    padding-top: 16px;
    color:rgb(254, 209, 65) !important;
}

img {
    border: 0;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}



a {
    color: rgb(223, 189, 106);
    text-decoration: underline;
}




.pl .badge {
    width: 38px;
    height: 38px;
    font-size: 12px;
    line-height: 37px;
}

.badge--new {
    color: rgb(255, 255, 255);
    background-color: rgb(73, 169, 225);
}

.badge {
    position: absolute;
    z-index: 10;
    top: 3px;
    left: 3px;
    width: 50px;
    height: 50px;
    font-size: 13px;
    font-weight: bold;
    line-height: 50px;
    border-radius: 50%;
    /* padding-left: 9px; */
    text-align: center;
}

.rating {
    position: absolute;
    z-index: 10;
    top: 3px;
    right: 3px;
    width: 50px;
    height: 50px;
    font-size: 13px;
    font-weight: bold;
    line-height: 50px;
    border-radius: 50%;
    /* padding-left: 9px; */
    text-align: center;
}


@media only screen and (max-width: 1250px) {
   
    img {
   
    width: 100px !important;
    height: 100px !important;
 
}
   
}


Demo
https://apex.oracle.com/pls/apex/f?p=123868:16:15585191075860:::::


5 comments:

  1. I have tries many time but layout is not proper as per your instruction can you help me more.

    ReplyDelete
  2. hola, gracias por tan preciada informacion-
    Estoy desarrollando ahorita una aplicacion estructurada de varias regiones, las cuales en cada una estoy usando informes con cards, pero no logro encontrar en la comsulta sql la sintaxis correcta para que me muestre en cada coumna(crad) las imagenes correspondientes que se encuentran en una tabla.
    aca te muestro el codigo sql:

    select "CPPROD"
    ,P.NOMBREPROD "CARD_TEXT"
    ,'f?p=&APP_ID.:17:&SESSION.::&DEBUG.:RP:P17_CPPROD,P17_CODTAR:'||P.CPPROD||','||NULL||'#' CARD_LINK
    ,'#' btn_link_2
    ,upper(regexp_replace(P.NOMBREPROD,'(^| )([^ ])([^ ])*','\2')) "CARD_INITIALS"
    ,NULL content
    ,P."FOTO"
    ,P."MIMETYPE"
    ,P."FILENAME"
    ,P."IM_LAST_UPDATE"
    ,null title
    ,'#' btn_link_1
    ,null btn_label_2
    ,NULL "CARD_SUBTEXT"

    --,decode(nvl(dbms_lob.getlength(p.foto),0),0,null,'') Im

    ,decode(nvl(dbms_lob.getlength(p.foto),0),0,null,'') CARD_TITLE

    FROM "#OWNER#".PRODUCTO P
    WHERE EXISTS (SELECT 1 FROM "#OWNER#".PROD_PLAN PP WHERE PP.CPPROD = P.CPPROD AND PP.INDICADORCOTIZA = 'S' AND P.INDCOBRO = 'N')

    ORDER BY 2

    te agradezco una orientacion para solucionar ese detalle.
    muchas gracias de antemano.
    Atte, Isa-
    PD: la palabra im hace referencia a IMG ya q en este mensaje no me lo permite como etiqueta.

    ReplyDelete
  3. Hola que tal como consigo el Plugin Dialog??? esta muy bueno

    ReplyDelete
  4. Thanks for sharing this great information I am impressed by the information that you have on this blog. Same as your blog i found another one Oracle APEX . Actually, I was looking for the same information on internet for
    Oracle Apex Interview Questions and Answers and came across your blog. I am impressed by the information that you have on this blog. It shows how well you understand this subject.

    ReplyDelete