Monday, September 14, 2015

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:



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;  
 }  

12 comments:

David said...

Awesome stuff, Dimitri. Any idea on how to make the carousel auto-rotate every few seconds?

Dimitri Gielis said...

Hi David,

We could add a Template Option to the template to do that.
I'll try to do it when I find some time - but will be after the launch of APEX Office Print :)

Thanks,
Dimitri

fac586 said...

I demonstrated dynamic carousel in response to a question on the APEX forum a couple of months ago.

By tweaking the region template in addition to creating the custom report template it's possible to utilize all of the existing Carousel template options (including auto-rotate).

Jochen said...

Hallo Dimitri

ist this "back to top" circle button a built in option in APEX 5?
Where can you enable it?

Thanks,
Jochen

Gaurav Prasad said...

Hi Dimitri

Can you please provide a working example of using JSON in Oracle APEX to get feature similar to partial submit like when we type in few letters in Google and We get suggestions

Thanks,
Gaurav

Penwick said...

In one page I as a developer saved 3 public default reports with different filters for each report . so when users go there , they can select the reports from the report drop down. However the users can see the filter /Highlight settings just below the search box and users can even remove these filter. How can I hide this filter mark so that users cannot see the filter settings and make any changes on these public reports but same time they should be able to save private reports and this should have those filter/highlight settings visible
I added this code #apex_control_panel{display:none;} and set the static ID for report as "apex" in the page's CSS- Inline as per one past posting. This is working and completely removed the filter/highlight settings from the report. But the problem is if and end user create a private report just for that user, He cannot even remove or edit that report when I apply this CSS code.

How can I remove this filter/highlight settings only Public Report , Keep that settings for private reports ?

Please help. I Posted on Oracle Apex forum, but didn't get any reply
George

Mihai Ioachim said...

Hi Dimitri,

As my APEX do not have your template (I think I have 5.0.1 0r 5.0.2), the Column Template is missing, I used the following tutorial:
https://community.oracle.com/thread/3770441?tstart=0

But, I took your sql code to fill the report, unfortunately the line:
dbms_lob.getlength(PHOTO) as image

returns only the lengths of the images (and not the jpg photos), what am I missing ? Maybe the error it's in the template formatting ?

I have a rotating carousel which display only numbers ... Please tell me what to do ? Thank you.

Dimitri Gielis said...

Hi Mihai,

You have to go to the details of your column and select image instead of Text.

Hope that helps,
Dimitri

Mihai Ioachim said...

Thank you, I already done that, but it was the fac586's answer : "Use the declarative BLOB IMAGE format mask to display the image ..." that did the trick.

Thank you.

HUBAIB NEDUVANCHERI said...

Hi Mihai,
Can you guide me how to make use of Row template instead of column template as in Dimitri.

Or should we create report container?

Thank you much ,
Hubaib

Mihai Ioachim said...

Hi Hubaib, I'm at work for now, once at home I will create a tutorial with pictures for the required steps.

Thank you.

Mihai Ioachim said...

Hi Hubaib,

The tutorial is ready:
http://misurex.blogspot.ca/2016/04/apex-5-carousel-with-dynamic-content_12.html


Enjoy.