Oracle APEX 26.1

List Link Attributes and Menu Buttons

Two small things landed in APEX 26.1 that I now use all the time. One lets a List put your own attributes on each link. The other turns a plain button into a tidy drop down menu. Here is what they do and how I built a quick demo for each one.

Introduction

I have been going through the Oracle APEX 26.1 features one by one and writing down what I find. This post is the next one in that run. This time it is about two small changes, one for Lists and one for Buttons.

I will show what each one does and then walk through a small demo for both, step by step.

Why it helps

What this used to take

Before 26.1, if I wanted one list link to open in a new tab, or carry a small data value for a click, I had to edit template attributes or write extra JavaScript. And when I had five related actions, I added five buttons and the page started to look busy. These two features clean up both of those everyday pains.

Feature 1

List Entry Custom Link Attributes

A List turns each entry into a link tag on the page. In 26.1 you can now put any HTML attributes you want right on that link. A static list gets a new field called Link Attributes. A dynamic list gets a new column called link_attributes. Whatever you type there is written straight onto the link.

🔗Open in new tab

🏷Tooltip text

🧩Data values

♿Accessibility

For my demo I used a dynamic list of employees. Each link gets a small data value and a tooltip, and it opens the employee in a modal page when clicked.

1
Create a dynamic list
Go to Shared Components, Lists, Create, From Scratch, and pick type Dynamic. Then paste the query below.
3
Make a modal page
Create a Form page on EMP and set Page Mode to Modal Dialog. The list link will open it.
4
Show the list
Add a List region to a page, point it at your list, and run it.

SQL

select
    null      as lvl,
    e.ename   as label,
    apex_page.get_url(p_page => 3, p_items => 'P3_EMPNO', p_values => e.empno, p_clear_cache => '3') as target,
    null      as is_current,
    'fa-user' as image,
    null as image_attr,
    null as image_alt,
    null as a01, null as a02, null as a03, null as a04, null as a05,
    null as a06, null as a07, null as a08, null as a09, null as a10,
    'data-sub="' || e.job || ' - $' || e.sal || '"' as link_attributes
from emp e
order by e.ename

Tip. Give every column a name. If you leave plain null values without an alias, you get a duplicate column error. And keep the link attributes value as the 18th column, or the value lands in the wrong slot and never reaches the link.

Tip. Do not put a class in Link Attributes. The list template already puts a class on the link, and a browser keeps only the first class it sees. Use a data attribute as your click hook instead, like the data-sub above.

A static list works the same way. Instead of a column you fill the new Link Attributes field on each entry by hand. For example, to open one entry in a new tab you just type:

Link Attributes

target="_blank" rel="noopener"

Bonus

A click that reacts

If you also want a click to do something on the page, add a Dynamic Action on the data attribute. The selector is the attribute name in square brackets, and the code reads the value off the clicked link.

JavaScript

this.browserEvent.preventDefault();
apex.message.showPageSuccess('You clicked employee ' + this.triggeringElement.dataset.empno);

Tip. In a Dynamic Action the event object is this.browserEvent, not this.event. This one caught me out for a while.

Feature 2

Declarative Menu Buttons

Buttons now have two new settings. Type can be Standard or Menu. When you pick Menu, APEX adds a Menu under the button in the tree, and the button opens a small drop down of actions. There is also a switch called Show as Disabled, which renders a button greyed out instead of hiding it when its condition is false.

For the demo I built an employee report with one Actions menu button that filters by job, plus a Clear button that greys out when no filter is set.

1
Report and a hidden item
Create a page with a hidden item for the job filter, and a Classic Report on EMP using the query below.
2
Make the menu button
Add a button named Actions and set Type to Menu. A Menu node appears under the button.
3
Add the entries
Under that Menu, add one entry per job. Each entry redirects back to the page and sets the filter item.
4
Use Show as Disabled
Add a Clear button, give it a server condition that the filter is not null, and turn Show as Disabled on.

SQL

select empno, ename, job, sal, deptno
from emp
where (:P14_JOB is null or upper(job) = upper(:P14_JOB))
order by ename

Good to know. The menu button does not run an action by itself. Clicking it just opens the drop down. Each entry inside runs its own action. So five filter buttons become one neat button with five choices.

Quick notes

Things worth remembering

🔢

A dynamic list reads columns by position. Keep link_attributes as the 18th column and give every column an alias.

🔗

Use a data attribute as your click hook, not a class. The template already owns the class on the link.

⚡

In a Dynamic Action use this.browserEvent to reach the click event.

📋

Type Menu groups many actions into one clean button. Great for toolbars that were getting crowded.

🔒

Show as Disabled keeps a button on screen but greyed when its condition is false, instead of hiding it.

Try it yourself

Both demos are live below. Open them, click around, and see how each link and button behaves.

▶ Live Demo: Link Attributes ▶ Live Demo: Menu Button

Search This Blog

Narmadha D