Press "Enter" to skip to content

Oracle Apex: Creating Card Layout Report with Images

In this tutorial, I will show you how to create a card layout report with images in Oracle Apex.

By saying with images, I mean, we will create a card layout report based on a table having the BLOB column containing images and having other columns with other information.

Creating a Card Layout Report with Images in Oracle Apex

To create a card layout report, open your application in Oracle Apex, and create a blank page.

Then do the right-click on the region node and select Create Region option from the shortcut menu.

Set the region type as Classic Report because a card layout report can be created using the Classic Report.

Set its source type to SQL Query and add the following query into it:

Select product_Id, product_name card_title, 
       product_description card_subtext, 
       sys.dbms_lob.getlength(product_image) card_text
From demo_product_info

In Oracle Apex, for a card layout report the query must have the following three column aliases in its SQL query:

  1. CARD_TITLE
  2. CARD_TEXT
  3. CARD_SUBTEXT

Because a card layout template has already substituted these three column names as you can see in the below image:

Oracle Apex card layout template.

So that is why I defined the alias card_title for the product_name column and product_description column as card_subtext and the blob column product_image as the card_text.

And you can definitely change the order of the columns, for example, you can make the product_image column as card_title to show the image first.

Remember, for the BLOB columns; you need to pick the column as its length by using the dbms_lob.getlength() function.

The following is the screenshot for the above settings:

Oracle Apex classic report SQL query.

As you can see in the above image, I made the product_id column as the hidden column because it is not needed in the report, but it is required for the image column because it is the primary key column. If you have multiple primary key columns then you can use the ROWID for the primary key column.

Now click on the CARD_TEXT and set the properties as shown in the below image:

Card layout report image column settings.

Now click on the Attribute node and set the following properties:

  • Template Type: Theme
  • Template: Cards

Then click on the Template Options button and set the properties as shown in the below image:

Card attributes in Oracle Apex.

You can customize the above template as you like.

You are all set. Now save the changes and run the report to test the output would be as shown in the below image:

Card Layout report featured image.

Related tutorial:

Oracle Apex Interactive Report Tutorial

Have you found the answer to your question? If not, you can discuss it with me in the comments section below or join my Q&A community OrclQA.com for developers and ask your question. It is FREE.

Vinish Kapoor

Follow

Hi, I am a full stack developer and writing about development. I document everything I learn and help thousands of people. foxinfotech.in is created, written, and maintained by me; it is built on WordPress, and hosted by Bluehost. Connect with me on Facebook, Twitter, GitHub, and get notifications for new posts.

guest
7 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Funso
Funso
6 months ago

Thanks Vinish for sharing this.

haseeb
haseeb
6 months ago

hi mr vinish
Kindly tell me how can i add quantity and item on collection when i click the card

haseeb
haseeb
Reply to  Vinish Kapoor
6 months ago

can u provide some topic or article regarding this

haseeb
haseeb
Reply to  Vinish Kapoor
6 months ago

tnx i will wait your post

Zakariaa SADEK
Zakariaa SADEK
1 month ago

Hello Vanish , I want to show blob type column as image. I mean i don’t to create a report , I want to list All images + description from the DataBase using only PLSQL Cursor ,
How shall I proceed ? Thanks in advance
Something Like this :

htp.p(‘<img src=”‘||cursor.image||'” >’);
htp.p(‘<p>’||cursor.descriptionText||'</p>’);