Report Carousel in APEX 5 UT

The Universal Theme in APEX 5.0 is full of nice things.

Did you already see the Carousel template for Regions? 

When you add a region to your page with a couple of sub-regions and you give the parent region the “Carousel Container” template it turns the regions into a carousel, so you can flip between regions.

I was asked to have the same functionality but than on dynamic content.

So I decided to build a report template that would be shown as carousel. Here’s the result:

You can see it in action at https://www.apexrnd.be/ords/f?p=ADVANCED_UT:REPORT_CAROUSEL:0:::::

I really like carousels :)

Here’s how you can have this report template in your app:

1. Create a new Report Template:

Make sure to select Named Column for the Template Type:

Add following HTML into the template at the given points:

That’s it for the template.

Now you can create a new report on your page and give it the template you just created.
Here’s the SQL Statement I used:

select PRODUCT_ID          as id,
       PRODUCT_NAME        as title,
       PRODUCT_DESCRIPTION as description,
       product_id,       
       dbms_lob.getlength(PRODUCT_IMAGE) as image,
       ‘no-icon’           as icon,
       null                as link_url 
  from DEMO_PRODUCT_INFO

Note 1: that you have to use the same column aliases as you defined in the template.
Note 2: make sure you keep the real id of your image in the query too, as otherwise you’ll get an error (no data found)

To make the carousel a bit nicer I added following CSS to the page, but you could add it to your own CSS file or in the custom css section of Theme Roller.

Note: the carousel can work with an icon or an image. If you want to see an icon you can use for example “fa-edit fa-4x”. When using an image, define the icon as no-icon.

Eager for more Universal Theme tips and tricks? check-out our APEX 5.0 UI training in Birmingham on December 10th. :)

For easier copy/paste into your template, you find the source below:

 *** Before Rows ***  
 <div class="t-Region t-Region--carousel t-Region--showCarouselControls t-Region--hiddenOverflow" id="R1" role="group" aria-labelledby="R1_heading">  
  <div class="t-Region-bodyWrap">  
   <div class="t-Region-body">  
   <div class="t-Region-carouselRegions">  
 *** Column Template ***  
 <div data-label="#TITLE#" id="SR_R#ID#">  
  <a href="#LINK_URL#">  
   <div class="t-HeroRegion " id="R#ID#">  
        <div class="t-HeroRegion-wrap">  
         <div class="t-HeroRegion-col t-HeroRegion-col--left">  
          <span class="t-HeroRegion-icon t-Icon #ICON#"></span>  
          #IMAGE#  
         </div>  
         <div class="t-HeroRegion-col t-HeroRegion-col--content">  
          <h2 class="t-HeroRegion-title">#TITLE#</h2>  
          #DESCRIPTION#  
         </div>  
         <div class="t-HeroRegion-col t-HeroRegion-col--right"><div class="t-HeroRegion-form"></div><div class="t-HeroRegion-buttons"></div></div>  
        </div>  
   </div>    
  </a>    
 </div>    
 *** After Rows ***  
   </div>  
   </div>  
  </div>  
 </div>  
 *** Inline CSS ***  
 .t-HeroRegion-col.t-HeroRegion-col--left {  
  padding-left:60px;  
 }  
 .t-HeroRegion {  
  padding:25px;  
  border-bottom:0px solid #CCC;  
 }  
 .t-Region--carousel {  
  border: 1px solid #d6dfe6 !important;    
 }  
 .t-HeroRegion-col--left img {  
  max-height: 90px;  
  max-width: 130px;  
 }  
 .no-icon {  
  display:none;  
 }