I’ll admit it, it’s fine. Not gonna lie, no secrets here. I am obsessed with beautiful Card-based User Interfaces. Honestly? If a website gives me my data in a gorgeous, clean and slick card format, I’ll click on those BUY, SUBSCRIBE, JOIN or WHATEVER YOU WANT ME TO DO buttons, just to see the card magic that unfolds.
So when somebody recently asked a question about how to include BLOB images in their Card template report, I was NOT just gonna stop at ‘Declarative BLOB support’ or ‘APEX_UTIL.GET_BLOB_FILE_SRC‘ comments. I wanted to make some drool-worthy APEX cards with images and buttons.
I also wanted to see if I could manage with only minimal customization of the Universal Theme – Card Report template. Here’s what I did.
The APEX Card Report template is expecting a query with columns named a certain way. You will find that information here.
I wanted my image to fill the ‘title’ space of my card, so I used the card_title column of my query for my BLOB image display. Please note that this query assumes that I have a page 4 in my application, where item P4_IMAGE_BLOB is bound to the BLOB column I want to display. Please refer to the APEX_UTIL documentation for more information on this.
I put the actual title in the CARD_SUBTITLE column, and then I used the CARD_SUBTEXT column for my little buttons. I gave my ‘HEART’ button a class of ‘add-favorite’, and my trash can icon a class of ‘trash-me’. This allows me to use Dynamic Actions to fire, and, you know: create a bit of that card magic I like so much :-)
My query might not be super intuitive because of the way I fudge the column names, but again, I wanted to re-use the standard template without having to make a ton of changes to support my cards with BLOB images the way I wanted them.
apex_util.prepare_url( '#' ) CARD_LINK,
'fa-heart' CARD_ICON, /* this could be anything */
'<img src="'||APEX_UTIL.GET_BLOB_FILE_SRC('P4_IMAGE_BLOB',CARD_PK)||'" width="100%" />' CARD_TITLE,
'<button id="fav_'||card_pk||'" class="t-Button t-Button--noLabel t-Button--icon add-favorite" type="button">
<button id="del_'||card_pk||'" class="t-Button t-Button--noLabel t-Button--icon trash-me" type="button">
</button>' card_subtext /* I wanted those cute buttons in the footer of my cards! */
Even just using the standard template, things were looking pretty cute! Obviously I made sure to select ‘Display Icons’ and ‘Display subtitle’ in my Template Options.
I was already pretty happy with this result, but really kind of wanted those pretty images to fill the whole space, have my heart icons on top, and make those subtitles, that actually in MY case, are my titles, bigger. So I tweaked the template a teeeeeny bit to make it this: