Some of you may like the Shuttle Item in APEX, some may not.

But what if you really want to use it and additionally show a lot of data?

Moreover, you want this data to be clearly visible on smaller screens.

We need to add extra data as a tooltip, like that:

Native [not so nice] solution

I want to assign hardware to my company's employees. However, I want to see the brand, model, and specifications of it. And it has to be a Shuttle Item.

Seems easy in APEX:

Looking ugly in the application:

But if you have a smaller screen, it's useless:

Solution [Nice one]

My solution is to show less data directly in the shuttle item, but display extra values in the tooltip when the user hovers the mouse over a list item. Like that:

Do it yourself - step by step.

Create a Hidden Item that will store values for your tooltip. Set it as shown on the screen, especially the data type, which should be CLOB. I called mine P5_HARDWARE_SPECIFICATIONS_JSON.

Create a Before Region Process that will set JSON values in item P5_HARDWARE_SPECIFICATIONS_JSON.
- h.hardware_id - is my return column from the select list in my shuttle (P5_HARDWARE_ASSIGNED)
- h.specifications - is my column with long values with hardware specifications

declare
    l_clob CLOB;
begin

    select JSON_OBJECTAGG(TO_CHAR(h.hardware_id) VALUE h.specifications)
    into l_clob
    FROM hardware h
    where h.hardware_type = 'SMARTPHONE';

    :P5_HARDWARE_SPECIFICATIONS_JSON := l_clob;

end;

In my shuttle item P5_HARDWARE_ASSIGNED, I reduced my query to columns with less data.

The last thing we need is Dynamic Action on Page Load.

The first TRUE action is called “left shuttle”, Action → “Execute JavaScript Code”

//Tolltips for left side of Shuttle Level 1
var tooltipJson = $v('P5_HARDWARE_SPECIFICATIONS_JSON');
var tooltips = tooltipJson ? JSON.parse(tooltipJson) : {};

$('#P5_HARDWARE_ASSIGNED_LEFT option').each(function() {
  var val = $(this).val();
  $(this).attr('title', tooltips[val] || '');
});

The second TRUE action is called “right shuttle”, Action → “Execute JavaScript Code”

//Tolltips for left side of Shuttle Level 1
var tooltipJson = $v('P5_HARDWARE_SPECIFICATIONS_JSON');
var tooltips = tooltipJson ? JSON.parse(tooltipJson) : {};

$('#P5_HARDWARE_ASSIGNED_RIGHT option').each(function() {
  var val = $(this).val();
  $(this).attr('title', tooltips[val] || '');
});

If you wonder what the items “P5_HARDWARE_ASSIGNED_RIGHT” and “P5_HARDWARE_ASSIGNED_LEFT ” are in the above JS, have a look at how the shuttle item (P5_HARDWARE_ASSIGNED) is identified for the left part (similarly to the right part)