Live Table Color Picker

Documentation location: Table Views → Live Inputs.

The native Table View color picker edits one database column immediately when the picker closes. Use it with option types V, L, and H. V enables the Table View; L enables live inputs and loads kas/js/live_edit.js; H loads the color-picker CSS and JavaScript through the Core header. L does not imply H. The letters are tested independently with strpos, so their order is not significant. The example uses VRNLH, adding search (R) and pagination (N).

Section and page example

The following names are placeholders: a registered EXAMPLE section, an ITEMS subsection, and an existing EXAMPLE_ITEMS table with ITEM_ID, NAME, and COLOR columns. Adapt them to your section registration and schema. $ITEMS is the subsection object from normal KAS registration; choose the privilege required for your page. The picker does not create a table.

$ITEMS->setOption(
    'ITEMS,ELEMENTOS,ELEMENTS',
    'document', '4', 'VRNLH'
);

In kas/includes/EXAMPLE/ITEMS.php:

$dbtable = 'EXAMPLE_ITEMS';
$idfield = 'ITEM_ID';
$td_titles = ['NAME', 'COLOR'];
$td_fields = [
    ['type' => 'live', 'col' => 'NAME', 'inputType' => 'text'],
    ['type' => 'live', 'col' => 'COLOR', 'inputType' => 'colorpicker']
];
$limit = 100;
$s_fields = 'NAME';
$query = "SELECT ITEM_ID, NAME, COLOR FROM $dbtable %%WHERE%% ORDER BY NAME, ITEM_ID";
include('core/table_view.php');

The native renderer requires the primary key in the result to build each row's encrypted update descriptor. col names the database column; the lowercase inputType is exactly colorpicker. Array shorthand ['type' => 'colorpicker', 'col' => 'COLOR'] also works: Core converts it to a live input. Legacy string definitions colorpicker:COLOR and live:COLOR:colorpicker are supported.

Values and parameters

Store a six-digit hexadecimal CSS color with one leading hash, such as #336699. The Table View uses the stored value directly for the input background and text color. Its picker may temporarily display bare hexadecimal digits while selecting a color; the database update adds one leading hash. The destination column must accommodate all seven characters of #RRGGBB; choose its type and constraints from your actual schema. The renderer does not perform server-side hexadecimal validation.

Use the standard field properties attributes (raw input attributes), class (extra input classes), title (tooltip), and privilege (field visibility threshold). If title is omitted, the stored color becomes the tooltip. The color cell and its inline background/text styles are defined by Core; the general style property does not override that color cell implementation. Leave database-controlled values in the format above.

Saving

The input receives native color_picker_live and live_table_CP classes and an encrypted LIVE,table,idfield,idvalue descriptor. The native picker previews changes on the input. When it closes, live_edit.js calls liveUpdate with the column name and #RRGGBB value. The existing core/db_actions.php LIVE action persists that value. Refresh the Table View to confirm it. No custom AJAX, JavaScript initialization, or separate save button is required.

Core also normalizes an existing leading hash when opening the picker, so closing it without changing the color preserves a single hash.

Implementation: kas/core/table_view.php (case 'colorpicker'), kas/core/tables/functions.php, kas/core/header/option_types.php, kas/core/header.php, kas/js/live_edit.js, and kas/core/db_actions/query_builder.php.

Initialize newly deployed sections

After deploying a new or changed section definition in kas/core/init_sections.php, log out and open /kas/init on that installation. Accept the native section re-installation confirmation, wait for the login page, and sign in again before testing the menu and routes. Run initialization on each target KAS installation after deploying its section definitions. Source definitions alone do not create installation menu records. A non-menu Add page uses its Core file and explicit getPath option string and intentionally has no normal-menu record.

See How to Create a new KAS section for the required initialization workflow.