<div class="contents" data-controller="lui--identifier-editor" data-lui--identifier-editor-selected-container-id-value="identifier-editor-selected-container-Item-1084"> <div id="association-overlay-96d7e1ebc1a36dd121ff" class="lui-association-overlay"> <div class="lui-association-overlay__header"> Identifiers </div> <div class="lui-association-overlay__divider"></div> <div class="lui-association-overlay__selected_list"> <div class="flex items-center gap-2 flex-wrap" id="identifier-editor-selected-container-Item-1084" data-controller="drag"> </div> </div> <div class="lui-association-overlay__divider"></div> <div class="lui-association-overlay__results overflow-scroll" data-model-association-overlay-target="resultsContainer"> <div class="hidden lui-association-overlay__empty-search" data-model-association-overlay-target="emptySearch">No results found</div> </div> </div></div>PageSection::IdentifierEditor
A compact editor used to attach identifiers (like external IDs, SKUs or barcodes) to one or more records. It is typically used inside tables or detail pages where the user needs to quickly add or review identifiers.
Related components
| Used Components | Components where is Used |
|---|---|
| AssociationOverlay, EntityToken, Button, Table | Items table, detail pages |
Usage rules
✅ Do
- Use inside table action bars when the user needs to add identifiers to a selection of rows.
Example: in the Items table, use it inwith_action_barpassinginput_name: PageSection::IdentifierEditor.identifiable_input_name. - Provide a valid
source(LooposUi::PageSources::CoreSource) so the component can load available identifier kinds from the API. - Pass
identifiable_typewhen working in batch mode (multiple items selected in a table) so the controller can build the correct payload.
❌ Don't
- Don't render the component without either
identifiableoridentifiable_type– it will raise at initialization time. - Don't use this component to manage unique identifiers that must exist only once in the system; it is designed to work with non-unique kinds.
<%= render LooposUi::PageSection::IdentifierEditor.new( source: source, identifiable: identifiable,) %>No notes provided.
No params configured.
Description
The PageSection::IdentifierEditor component provides an interface to create and attach identifiers (e.g. external IDs, SKUs, barcodes) to domain entities.
It is designed to be embedded in tables or detail pages and to work together with the identifiers API exposed by LooposUi::PageSources::Models::Identifiers.
Arguments
| Property | Default | Required | Description |
|---|---|---|---|
source |
- | ✅ | Instance of LooposUi::PageSources::CoreSource used to load available kinds and to create identifiers |
identifiable |
nil |
⛔️* | Optional identifiable record. Accepts an ActiveRecord model or a Hash and is coerced into an Identifiable. |
identifiable_type |
nil |
⛔️* | String with the class name of the identifiable (e.g. "Item"). Required when identifiable is not provided. |
title |
(i18n) | ⛔️ | Title shown in the overlay header. Defaults to the component translation default_title (e.g. "Identifiers" in EN). |
* Either identifiable or identifiable_type must be present.
If both are missing, initialization will raise an error.
Helper methods
PageSection::IdentifierEditor.identifiable_input_name
Returns the name to be used in checkboxes when selecting multiple identifiables in a table:identifier[identifiable_ids][].
Behaviour
- Fetches the list of non-unique identifier kinds from
source.identifiers.non_unique_kinds. - Renders one result block per kind and allows the user to select a value for that kind.
- When a new identifier is created, the Turbo Stream response will:
- Replace the results frame for the selected kind.
- Append the new selected identifier token to the selected container.
Slots
This is a page section component that internally composes other components (such as AssociationOverlay and EntityToken).
It does not expose public slots; it is meant to be rendered as a self-contained block inside higher-level layouts (for example, inside a Table action bar).
JS Events
The editor works together with the lui--identifier-editor Stimulus controller and Turbo Streams.
It does not expose custom public browser events; instead, all updates happen through Turbo Stream responses from IdentifierEditorController#create.