Highlight Tags using Template Directives In Oracle APEX Cards
Developers can add template directives in Cards Advanced Formatting. The page used in the video uses TAGS column which contains comma separated values of the employee focus area. The Cards Body uses an HTML Expression: that dynamically creates a list of tags only if there are any tags present in the "TAGS" column. It loops through each tag, formats them as list items, and displays them within an Unordered list. The Full Card Action is also included. Clicking on any card, opens up the Employee Detail page, which is a form page.
Create Table
====================================
CREATE TABLE "EBA_DEMO_CARD_EMP"
( "EMPNO" NUMBER NOT NULL ENABLE,
"ENAME" VARCHAR2(255),
"JOB" VARCHAR2(255),
"MGR" NUMBER,
"HIREDATE" DATE,
"SAL" NUMBER,
"COMM" NUMBER,
"DEPTNO" NUMBER,
"PROFILE_IMAGE" BLOB,
"MIMETYPE" VARCHAR2(255),
"FILENAME" VARCHAR2(400),
"IMAGE_LAST_UPDATE" DATE,
"TAGS" VARCHAR2(4000),
CONSTRAINT "EBA_DEMO_CARD_EMP_PK" PRIMARY KEY ("EMPNO")
USING INDEX ENABLE
) ;
ALTER TABLE "EBA_DEMO_CARD_EMP" ADD CONSTRAINT "EBA_DEMO_CARD_EMP_DEPT_FK" FOREIGN KEY ("DEPTNO")
REFERENCES "EBA_DEMO_CARD_DEPT" ("DEPTNO") ENABLE;
ALTER TABLE "EBA_DEMO_CARD_EMP" ADD CONSTRAINT "EBA_DEMO_CARD_EMP_MGR_FK" FOREIGN KEY ("MGR")
REFERENCES "EBA_DEMO_CARD_EMP" ("EMPNO") ENABLE;
Inline CSS
==================================
.a-tags {
list-style: none;
}
.a-tag {
background-color: #ebe7e7;
color: #666;
border-radius: 5px;
padding: 5px;
margin: 3px;
display: inline;
}
HTML Expression [Use Angled Brackets as shown in video]
==================================================
{if TAGS/}
ul class="a-tags"
{loop "," TAGS/}
li class="a-tag" &APEX$ITEM. /li
{endloop/}
/ul
{endif/}
Image Attribution
======================================
https://www.freepik.com/free-vector/b..." Freepik
https://www.freepik.com/free-ai-image..." Image By freepik
