Cards – New Region Type in APEX 20.2

Cards regions are a great way to present a variety of information and prior to the 20.2 APEX release Cards were only available via a classic report using a region template and had very little flexibility for customisation. That’s all changed now as 20.2 APEX has introduced a new Cards report region type with much improved declarative customisation features.

Let’s explore this in detail with the help of examples which demonstrates how easily you can create Cards in an Application.

Creating a Card Page

1. Go to application builder home page and click on ‘Create Page’.
2. Select Report -> Cards and click ‘Next’.
3. Enter Page Name – Cards and click ‘Next’.
4. For Navigation Preference click on the first option – ‘Do not associate this page with a navigation menu entry’ and click ‘Next’.
5. A cards region can be based on local, REST enabled SQL or a REST Data source, we are using local database here.
6. I am using OEHR_CUSTOMERS here for demonstration.

We have three options here to display the results:

• Grid – Arranges the Cards in a grid of columns.
• Float – Cards will wrap when they no longer fit horizontally on the screen.
• Horizontal (Row) – Cards will be positioned on top of each other.

I am choosing the Grid option below (these options can be changed later). To Display Customer Name on the card, choose ‘First Name’ in Title Column and ‘Second Name’ in Body Column. In Icon Initials Column choose ‘First Name’ again.

Click Create, this will create your page with customer card region. Run the page.

Customisations

Now you can create a simple Cards region, let’s see what customisations are available. Go to Page Designer, under Cards attributes and you will see Body and Secondary Body, select ‘City’ and ‘State_Province’ for these.

Under Secondary body, there is a section for Icon and Badge., We already selected Initials and column Cust_firstName for Icon. Explore other options for Icon – you could add customer image too in this case. For Badge Column, I am selecting ‘NLS_Language’ column.

Save and run the page and notice the changes on the Cards:

In Appearance under Card region, notice that template is ‘Cards Container’. In Template options you can select three styles of display:

Adding Links

I find adding a link (such as Card as Link) a very useful feature. In Page Designer, under Rendering select ‘Cards’ -> ‘Action’ -> right-click and select ‘Create Action’. Under Action Properties check ‘type’, you can create actions to link from:

• Button – Adds a button to the Card.
• Full card – Adds a link to the full Card.
• Title – Adds a link to the Card title.
• Subtitle – Adds a link to the Card subtitle.
• Media – Adds a link to the Card media.

There are multiple link actions and more than one button for each of the cards. I am using ‘Full Card’ type here. Under Link click on ‘Target – No Link Defined’:

Add link Details – I have a modal page 101 for customer details to link the Cards to.

Click ‘OK’, save and run the page, click on a Card. A modal page with customer details should open up.

Cards with Faceted Search

Faceted Search was introduced in 19.2. We saw some improvements in 20.1 and now APEX 20.2 has cards with Faceted Search:

Create a new page with report -> Faceted Search

Click ‘Next’ and select the table you want:

Select Display as – ‘Cards’

Click on ‘Next’.Select Icon initials and Badge columns:

Create and run the page:

Summary

Oracle 20.2 has introduced a new region Card report. I can see myself using this feature for many of my applications due to its flexibility and control of the user interface. Its easy-to-customise interface enables you to tailor appearance using Blobs, Media and Badges. Actions on Cards are easy to use and have many options like Full Card, Buttons and Media. The new version is much faster to render as all rendering is carried out on client-side. Also, to customise the layout prior to 20.2 you had to modify the templates using HTML/CSS. Now it can be done declaratively, which is considerably easier and much quicker. In summary, a very welcome new feature!

Author: Priyanka Choudhary

Job Title: Oracle APEX Development Consultant

Bio: Priyanka is a Development Consultant at DSP-Explorer. She has Masters in Computer Applications, in her previous role she worked for leading financial organisation developing banking solutions in PL/SQL, Oracle Forms and Reports. Here at DSP-Explorer she is part of a highly skilled development team providing APEX development solutions and training to both UK and international businesses.