Report Carousel in APEX 5 UT

      Description:

This document describes how to dynamically moves your data from the report in oracle apex 5.

 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 applied the same functionality but then on dynamic content.

So I build a report template that would be shown as a carousel.

 

 

2.   Benefits:

Ø Can able to move your data in a report.

Ø Don’t need to go for old jquery sliders.

Ø In-build Apex 5 Feature but needs modifications in region & report templates level.

 

In Our Apex 5 Internal Application, we used this component in Home > Technology News.

 

 

3. Steps to create a carousel report:

Step1: Create a copy of the Carousel Container region template called Carousel Dynamic Region.

Step 2: Modify lines 14-18 of the template so that the #BODY# substitution string is contained within div.t-Region-carouselRegions.

Step 3: Create a new Report Template [ Carousel Dynamic Report ]. Make sure to select Named Column for the Template Type

Step 4:  Add following HTML into the Row templates :

<div id=”SR_#ID#”>

<div id=”content-#ID#”> 

   <!– Start custom content–> 

     <dl> 

       <h3> #Title#</h3> 

      <dd><span class=”underline”>#POSTED_BY#</span></dd> 

    </dl> 

    <d2> 

     <dd>#Content#</dd> 

    </d2> 

   <!– End custom content –> 

  </div> 

</div>

That’s it for the template.

 

Step 5: Now you can create a new report on your page and give it the template you just created [ Carousel Dynamic Region ]

 

Here’s the SQL Statement I used:

 

SELECT NEWSID “ID”,

(‘<b>’||TITLE||'</h4>’) “Title”,

URL “Link”,

MESSAGE “Content”,

‘Posted by ‘

||initcap(SUBSTR(posted_by,1,INSTR(posted_by,’@’, 1, 1)-1))

||’ on ‘

||TO_CHAR(POSTED_ON,’dd-Mon-yyyy’) “POSTED_BY”,

Posted_On,

‘no-icon’ “ICON”

FROM HR.TECH_NEWSTASK

order by 1 desc;

 

Note 1: You have to use the same column aliases, as you defined in the template.

Note 2: Turn off pagination and partial page refresh in the report attributes.

 

Step 6: Go to Report Attributes and set report Templates as “Carousel Dynamic Report.”

 

 

 

 

 

 

 

 

 

5. Sample ScreenShots:
   

 

6.Conclusion:

Thus a user can able to view a database data in a report, and also we can able to pass a URL links along with this data.

 

Summary: This post explains about Report Carousel in APEX

Queries?

Do drop a note by writing us at contact@doyensys.com or use the comment section below to ask your questions.