Report Carousel in APEX 5 UT [ Dynamic Content ]

                         Report Carousel in APEX 5 UT [ Dynamic Content ]

Overview: 1. Purpose. 2. Benefits. 3. Steps to pass URL in a new window. 4. Browser Related Issues & Solutions.  5. Sample screen shots. 6. Conclusion.

1.  Purpose:

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 than on dynamic content.

So I build a report template that would be shown as 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 Screen Shots:

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.