With each new version of Visual Builder we adopt a new version of Oracle JET – which results in new components that you can leverage to enhance your app's user interface. Action Card is a new component in JET that was added to JET in release 9.1, and to Visual Builder in release 21.04. Action Cards provide a visually appealing way to show information and drive action on it with an animation effect during mouse hover/focus.

In the demo below you'll learn how to add an action card to your page, style it, and bind it to a set of data. We start by binding a new SDP to a REST service returning a collection of data, then use a for-each component to iterate over the collection and show a card for each record.

In the second half of the video we show you how to react to selection event on the card. We also show how you can add additional parameters that you are passing to action chains (beyond the default ones), and how to pass values into them.

 

The HTML code for the page in the demo is:


Check out the new component and start incorporating it in your pages.