APEX item Select Many and groups

A

At times, I need to manage a long list of options; therefore, the logical approach is to organize them into groups rather than having everything in a single list. However, this approach introduces several challenges. Previously I just added another LOV item just with groups, but with multiple items you will quickly clutter your UI.

The groups are sorted alphabetically. So if you want a different order, you have to use this neat trick, which add spaces at the start of your group name, and hence it gets sorted as you wish:

SELECT
    NVL(g.group_name, INITCAP(g.group_code)) AS group_name,
    --
    LPAD(' ', ROW_NUMBER() OVER (  -- reverse r# for proper grouping sets sorting hack
            ORDER BY
                g.order#        DESC NULLS FIRST,
                g.group_code    DESC
        ), ' ')
        || NVL(g.group_name, INITCAP(g.group_code)) AS group_name__,  -- groups sorted, use in LOV as group
    --
    ROW_NUMBER() OVER (
        ORDER BY
            g.order#        NULLS LAST,
            g.group_code
    ) AS r#	 -- the order you want
    --
FROM ... g

You can use the same trick at other places, like on grouping sets in grids.

Another issue is that it is not possible to select or deselect an entire group at once. After several unsuccessful attempts, I found a solution for capturing clicks on a group in Select Many, Select One, and Combo Box components. If all items within a group are selected, they will be deselected; otherwise, all items in the group will be selected. This logic should be placed in the "Execute when Page Loads" section.

(function () {
    document.addEventListener(
        'pointerdown',
        function (e) {
            // target only the group in combo box
            const label = e.target.closest('.a-ComboSelect-group');
            if (!label) return;
            if (e.target.closest('.a-ComboSelect-item')) return;
            //
            e.preventDefault();
            e.stopPropagation();

            // get items and check if they are all selected
            const items = Array.from(label.querySelectorAll('.a-ComboSelect-item'));
            const all   = items.every(item => item.classList.contains('is-selected'));

            // if all selected, deselect all, otherwise select all
            items.forEach(item => {
                const sel = item.classList.contains('is-selected');
                if ((all && sel) || (!all && !sel)) {
                    item.dispatchEvent(new MouseEvent('click', { bubbles: true }));
                }
            });
        },
        true // capture phase
    );
})();

Do you know the difference between Select One/Many and Combobox?

• Combobox does not show the down arrow, so it might be difficult to see that it is a LOV
• Combobox allows you to enter new values and hold them in a dedicated item
• Combobox expands if your values does not fit

Also there is a nice article out there from Jon Dixon about some details including templating.

And if you are wondering, how to restyle default colors:

/* COMBO BOX AND SELECTED ITEMS */
:root {
    --a-combo-select-item-state-background-color: transparent;
    --a-combo-select-item-state-border-color: transparent;
    --a-combo-select-item-selected-background-color: var(--rw-palette-neutral-30) !important;
    --a-combo-select-item-selected-border-color: transparent !important;
    --a-combo-select-item-hover-background-color: var(--rw-palette-neutral-40);
}
.a-ComboSelect-item:hover,
.a-ComboSelect-item.is-selected:hover {
    --a-combo-select-item-state-background-color: var(--a-combo-select-item-hover-background-color) !important;
}

/* COMBO BOX CHIP WITH NUMBER */
:root {
    --a-comboselect-counter-background-color: var(--rw-palette-neutral-80) !important;
    --a-comboselect-counter-hover-background-color: var(--rw-palette-neutral-100) !important;
    --a-comboselect-counter-is-active-background-color: var(--rw-palette-neutral-120) !important;
    --a-comboselect-counter-text-color: #fff !important;
}