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:
- CARD_TITLE
- CARD_TEXT
- 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:
Thanks Vinish for sharing this.
hi mr vinish
Kindly tell me how can i add quantity and item on collection when i click the card
You should create a List instead of Classic Card report, then you would be able to do this.
can u provide some topic or article regarding this
I will soon write for it then will provide you.
tnx i will wait your post
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>');
How to download pdf of this report without overlap content..! Please help if possible...