Cards – New Region Type in APEX 20.2

Priyanka Choudhary Jan 26, 2021 9:50:00 AM
Find out how we can help you build solutions using Oracle APEX with our award winning application development and consultancy services.
Book a meeting with an Oracle APEX expert

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.

Oracle APEX Create Cards

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.

Oracle APEX Create Cards

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

Oracle APEX Create Cards

 

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.

Oracle APEX Customisation

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.

Oracle APEX Customisations

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

Oracle APEX Customisations

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

Oracle APEX Customisations

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’:

Oracle APEX Adding Links

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

Oracle APEX Adding Links

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

Oracle APEX Adding Links

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

Oracle APEX Faceted Search

Click ‘Next’ and select the table you want:

Oracle APEX Faceted Search

Select Display as – ‘Cards’

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

Oracle AAPEX Faceted Search

Create and run the page:

Oracle APEX Faceted Search

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!


Need help with your Oracle APEX applications? Speak to one of our Oracle APEX experts, get in touch through enquiries@dsp.co.uk or book a meeting...

Book a meeting with an Oracle APEX expert


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.