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:
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
product_image as the
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
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: