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.
We have three options here to display the results:
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.
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:
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:
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.
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:
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.