Dynamic Actions on cards in Oracle APEX cards region

Oracle APEX card templates and card regions already have quite a few options you can set via the APEX Builder.

In a card region, a card can have an action, but the options are limited to a link to another page or URL. What if you just want to click on a card and draw attention to the selected card and set some item value based on that selection? Something like this:

This approach needs some custom Dynamic Actions and CSS.

Create the card region

Let's start with the card region.

First upload some images as static application files (or any other location).

Next create a page with a card region. For this example, I simply used this query for the card region:

select 'A' combi, '#APP_IMAGES#CombiA.png' image from dual union all

select 'B', '#APP_IMAGES#CombiB.png' from dual union all

select 'C', '#APP_IMAGES#CombiC.png' from dual union all

select 'D', '#APP_IMAGES#CombiD.png' from dual

The cards only use the Media attributes:

Source: Image URL
URL: &IMAGE.

Next, you want to make the unselected cards a bit smaller, so a selected card can get the normal card size. For that, add this class to the card:

card-unselected

(the CSS will follow later).

Add an action to the cards:

Type: Full Card
Link: Redirect to URL
Target: #

Since we do not really want to go to some other page, we need to modify the behaviour of the link a bit. To do that, set this value in the Link Attributes:

data-action=select data-value=&COMBI.

Create a Dynamic Action

Now we can create a Click Dynamic Action.

Name: Get selected card
Selection Type: jQuery Selector
jQuery Selector: [data-action='select']

The first action is a Set Value to copy the card value to a page item.

Set Type: JavaScript Expression
JavaScript Expression:  this.triggeringElement.dataset.value

The second action increases the size of the selected card to the normal size, and to make it bit more fancy, also sets a drop shadow. This action also has to reset the previously selected card to the smaller size.

Action:Execute JavaScript Code
Code:

$(".a-CardView").removeClass( "card-selected" );
$(".a-CardView").addClass( "card-unselected" );
this.triggeringElement.parentElement.classList.remove("card-unselected");
this.triggeringElement.parentElement.classList.add("card-selected");

Add the CSS

Define CSS on the page. The padding on a-CardView-items is needed to allow box-shadow on the right most card

.card-unselected {

   height:80%;

   border-style:none;

}

.card-selected {

   height:100%;

   border-style:none;

   box-shadow: 5px 10px 8px #888888;

}

.a-CardView-items{

  padding:10px;

}