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

By
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

By
Image
I have been came across an interested requirement ( which is very valid ) to add scrollbars on the top of the regions! I have seen many times when you want to scroll right to see further data of first few records, you will scroll vertically to get to the horizontal scroll-bars. And then you do horizontal scroll and then vertical scroll to go top of the region. Aren't you ??? :-) So, to ease the user interaction with IR - we should have a scrolling option somewhere on the top of the region ? - For Sure So, how can we add scrollbars on top of the report for an Interactive Report ? By default IR Fix the column headers to the page. This setting gives us an opportunity to add scroll-bars just below the column header as well. Just by adding following CSS line you should get a beautiful scroll-bars just below you header and it works really great as well. #MYIR .t-fht-thead{   overflow: auto !important; } I am also trying to find a way to add same function
Read more

How to create your own customized nested report regions using jQuery

By
Image
Here is how you can create cool nested reports in Oracle APEX and jQuery, which looks like below: For this example, I have used DEPT & EMP example where as a nested report it will show all the child records of employee under department record. To start with, first create a new classic report region with query like " select * from dept ". Add a new derived column of type = Link to that report and set following attributes: Link: javascript: void(0); Link Text: <i class="fa fa-users" alt="Employees" title="Employees"></i> Link Attribute: class="viewEmp" data-deptno="#DEPTNO#" Add new page item to hold deptno value and call it PX_DEPTNO Create new classic report region (this will be your nested region) and set query like " select * from emp where deptno = :PX_DEPTNO " and set following attributes: Static ID:  EMPLOYEES Custom Attributes:  style="display: none" Page Items t
Read more

Make your RESTful APIs Secured with OAuth2 - Basic, Simple and Easy Steps

By
Its been a while since my previous article. So, here is my first blog post of 2020. Oracle APEX has an out-of-box and declarative support to create RESTful Web Services using ORDS. Within no-time, you can build and publish your RESTful APIs. Use of ORDS has gradually increased with common standard across different technology strongly adopted via RESTful Web Services and JSON formatted input/output. With the flexibility of data sharing across the technology or within application, we must also think of how secure my RESTful APIs are. We do believe in strong security of our applications using Authentication and Authorization. But, many times we miss the level of security we should implement in our RESTful APIs. So, here is the very simple and basic steps to secure your ORDS RESTful APIs using OAuth2: We will use a default oracle.example.hr web service module to add OAuth2 for this blog. Navigate to SQL Workshop > RESTful Services. From the left side of tree - click on "Ro
Read more