Oracle Apex: Creating Card Layout Report with Images

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:


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

This Post Has 8 Comments

  1. Funso

    Thanks Vinish for sharing this.

  2. haseeb

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

    1. Vinish Kapoor

      You should create a List instead of Classic Card report, then you would be able to do this.

    2. haseeb

      can u provide some topic or article regarding this

    3. Vinish Kapoor

      I will soon write for it then will provide you.

    4. haseeb

      tnx i will wait your post

  3. Zakariaa SADEK

    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||'" >');

  4. mayur

    How to download pdf of this report without overlap content..! Please help if possible...

Comments are closed.