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:

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:

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:

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:

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:

Related tutorial:

Oracle Apex Interactive Report Tutorial