Convert Classic Report Card Template and Card List Template into Flip Card Animated Templates

With apex 18 Universal theme, we have got few Card templates. It re-presents the information in Card format. Click here to see few examples of different types of Card.

You can find card template in List Templates and Classic Report Templates. Objective of this blog is, how we can further enhance existing Card template such that we can add animation like Flip.

Here is my little innovation on Card template for both List and Classic report:



Click here to see demo app.

1. List Template with Flip Card:


  • Create new list template as copy of Cards List template
  • Add following codes under Each Section in new Flip Card List template:
    • Template Options:
    • Before List Entry

<style>.flipcard {  position: relative;  width: 220px;  height: 160px;  perspective: 500px;}.flipcard.v:hover .front, .flipcard.v.flip .front{  transform: rotateX(180deg);}.flipcard.v:hover .back, .flipcard.v.flip .back{  transform: rotateX(0deg);}.flipcard.v .back{  transform: rotateX(-180deg);}.flipcard.h:hover .front, .flipcard.h.flip .front{  transform: rotateY(180deg);}.flipcard.h:hover .back, .flipcard.h.flip .back{  transform: rotateY(0deg);}.flipcard.h .back{  transform: rotateY(-180deg);}.flipcard .front, .flipcard .back{  position:absolute;  width: 100%;  height: 100%;  box-sizing: border-box;  transition: all 0.5s ease-in;  backface-visibility: hidden;}</style><ul class="t-Cards #COMPONENT_CSS_CLASSES#">

    • Template Defination > List Template Current
<li class="t-Cards-item is-active #A04#">  <div class="t-Card flipcard h">    <a href="#LINK#" class="t-Card-wrap" #A05#>      <div class="front">        <div class="t-Card-icon u-color #A06#"><span class="t-Icon #ICON_CSS_CLASSES#"><span class="t-Card-initials" role="presentation">#A03#</span></span></div>        <div class="t-Card-titleWrap"><h3 class="t-Card-title">#TEXT#</h3><h4 class="t-Card-subtitle">#A07#</h4></div>        <div class="t-Card-body">          <div class="t-Card-desc">#A01#</div>          <div class="t-Card-info">#A02#</div>        </div>        <span class="t-Card-colorFill u-color #A06#"></span>      </div>      <div class="back">        <div class="t-Card-titleWrap"><h3 class="t-Card-title">#A08#</h3></div>        <div class="t-Card-body">          <div class="t-Card-desc">#A09#</div>          <div class="t-Card-info">#A10#</div>        </div>      </div>    </a>  </div></li>
    • Template Definition > List template Noncurrent
<li class="t-Cards-item #A04#">  <div class="t-Card flipcard h">    <a href="#LINK#" class="t-Card-wrap" #A05#>      <div class="front">        <div class="t-Card-icon u-color #A06#"><span class="t-Icon #ICON_CSS_CLASSES#"><span class="t-Card-initials" role="presentation">#A03#</span></span></div>        <div class="t-Card-titleWrap"><h3 class="t-Card-title">#TEXT#</h3><h4 class="t-Card-subtitle">#A07#</h4></div>        <div class="t-Card-body">          <div class="t-Card-desc">#A01#</div>          <div class="t-Card-info">#A02#</div>        </div>        <span class="t-Card-colorFill u-color #A06#"></span>      </div>      <div class="back">        <div class="t-Card-titleWrap"><h3 class="t-Card-title">#A08#</h3></div>        <div class="t-Card-body">          <div class="t-Card-desc">#A09#</div>          <div class="t-Card-info">#A10#</div>        </div>      </div>    </a>  </div></li>
    • Attribute Description


  • Now create new Dynamic List under Shared Component with following SQL. You may also create Static list, but please make sure to set value of Attribute 09 and Attribute 10

SELECT null,        ENAME label,        null target,        'YES' is_current,        '#APP_IMAGES#del.gif' image,        'width="20" height="20"' image_attrib,        ENAME image_alt,       '' attribute1,       '' attribute2,       SUBSTR(ENAME,1,1) attribute3,       '' attribute4,       '' attribute5,       '' attribute6,       '' attribute7,       'Flip Title' attribute8,       'Flip Description' attribute9,       'Flip Secondary Information' attribute10FROM  emp ORDER BY ename
  • Now, create new list region for above list and make sure you select newly created List template. You are done, ENJOY !!!

2. Classic Report template with Flip Card:


  • Create new classic report template as copy of Card classic report.
  • Add following code under Each Section in new Flip Card Classic Report template:
    • Template Options:
    • Row Templates > Row template 1

<li class="t-Cards-item #CARD_MODIFIERS#">  <div class="t-Card flipcard h">    <a href="#CARD_LINK#" class="t-Card-wrap"><div class="front">      <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><h4 class="t-Card-subtitle">#CARD_SUBTITLE#</h4></div>      <div class="t-Card-body">        <div class="t-Card-desc">#CARD_TEXT#</div>        <div class="t-Card-info">#CARD_SUBTEXT#</div>      </div>      <span class="t-Card-colorFill u-color #CARD_COLOR#"></span>    </div>      <div class="back">        <div class="t-Card-titleWrap"><h3 class="t-Card-title">#CARD_FLIP_TITLE#</h3></div>        <div class="t-Card-body">          <div class="t-Card-desc">#CARD_FLIP_TEXT#</div>          <div class="t-Card-info">#CARD_FLIP_SUBTEXT#</div>        </div>      </div>    </a>  </div></li>
    • Row Template > Row template 2
<li class="t-Cards-item #CARD_MODIFIERS#">  <div class="t-Card flipcard h">    <div class="t-Card-wrap"><div class="front">      <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><h4 class="t-Card-subtitle">#CARD_SUBTITLE#</h4></div>      <div class="t-Card-body">        <div class="t-Card-desc">#CARD_TEXT#</div>        <div class="t-Card-info">#CARD_SUBTEXT#</div>      </div>      <span class="t-Card-colorFill u-color #CARD_COLOR#"></span>      </div>      <div class="back">        <div class="t-Card-titleWrap"><h3 class="t-Card-title">#CARD_FLIP_TITLE#</h3></div>        <div class="t-Card-body">          <div class="t-Card-desc">#CARD_FLIP_TEXT#</div>          <div class="t-Card-info">#CARD_FLIP_SUBTEXT#</div>        </div>      </div>    </div>  </div></li>
    • Before first and after last row text > Before rows
<style>.flipcard {  position: relative;  width: 220px;  height: 160px;  perspective: 500px;}.flipcard.v:hover .front, .flipcard.v.flip .front{  transform: rotateX(180deg);}.flipcard.v:hover .back, .flipcard.v.flip .back{  transform: rotateX(0deg);}.flipcard.v .back{  transform: rotateX(-180deg);}.flipcard.h:hover .front, .flipcard.h.flip .front{  transform: rotateY(180deg);}.flipcard.h:hover .back, .flipcard.h.flip .back{  transform: rotateY(0deg);}.flipcard.h .back{  transform: rotateY(-180deg);}.flipcard .front, .flipcard .back{  position:absolute;  width: 100%;  height: 100%;  box-sizing: border-box;  transition: all 0.5s ease-in;  backface-visibility: hidden;}</style><ul class="t-Cards #COMPONENT_CSS_CLASSES#" #REPORT_ATTRIBUTES# id="#REGION_STATIC_ID#_cards" data-region-id="#REGION_STATIC_ID#">
  • Now create new Classic Report region with following SQL.
SELECT null,        ENAME CARD_TITLE,        SUBSTR(ENAME,1,1) CARD_INITIALS,       null target,        'Flip Title' CARD_FLIP_TITLE,       'Flip Description' CARD_FLIP_TEXT,       'Flip Secondary Information' CARD_FLIP_SUBTEXTFROM  emp ORDER BY ename
  • Now, set newly created classic report region from Attribute section. You are done, ENJOY !!!

Hope this helps!

Regards,
Jaydip Bosamiya
jbosamiya@gmail.com

Comments

Post a Comment

My photo
Jaydip Bosamiya
I am Oracle APEX Consultant, Blogger and Integrator. All-rounder in building small, medium and enterprise applications. Extensive knowledge in various area of web-driven applications in Back-end (PL/SQL, SQL, Java), Front-end (Oracle APEX, HTML, JavaScript, CSS, jQuery, OracleJET, ReactJS), RESTful APIs, Third-party library integrations (Apex Office Print (AOP), Payment Gateways, Syncfusion, HighCharts) and APEX Plugins (HighChart, StarRating)

Popular posts from this blog

Oracle APEX - Interactive Report - Scrollbars on Top

How to create your own customized nested report regions using jQuery

Oracle APEX - Warn unsaved changes for custom fields