Page History
(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Lookup Input
Link to Figma: tba
Overview
- The Lookup Input Component is a specialized form control for searching and selecting items from large datasets.
- It displays a read-only input field that opens a dialog with a searchable data grid when clicked.
- The component is useful when traditional dropdowns are impractical due to the dataset size.
- It improves efficiency by combining search, selection, and data persistence in one control.
...
- dataTestId – Sets the testing hook ID for automated testing. For example, setting to "customer-lookup" allows test scripts to reliably locate this component.
Links
- Figma: tba
- Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id3/1-text-input
Guidelines
Usage
- Use Lookup Input for large, searchable datasets. Connect to data with
getElementsDataSourceId, configure the grid viaelements, and keep performance withenablePagination+pageSize. - Store a stable identifier and show a readable label: use
valueKey(stored),displayValueKey(shown), and submit usingdataFieldwithcontrolsRequestType. - Persist frequent selections across sessions with
saveInLocalStorage. - Pre-fill only when it’s clearly correct using
defaultValue.
...
| Do | Don’t | Article setting(s) | |||
|---|---|---|---|---|---|
| Store a stable ID and show a readable name. | Store the display name as the value. | valueKey, displayValueKey, dataField | |||
| Localize label, dialog title, and subtitle. | Ship English-only strings. | labelTranslations, dialogTitleTranslations, dialogSubtitleTranslations | |||
| Keep the grid focused on decisive fields. | Show every backend column. | elements | |||
| Use pagination for large datasets. | Load thousands of rows at once. | enablePagination, pageSize | |||
| Persist frequent selections across sessions. | Force users to reselect on every visit. | saveInLocalStorage | |||
| Mark essential relationships as required. | Let forms submit with missing relations. | validation.required | |||
| Respect permissions by disabling interaction. | Hide the control when users need to see the value. | authorizationDisable | |||
| Hide the field when irrelevant. | Show an inert field with no purpose. | hidden | Pre-configure query parameters on init. | Change server filters unpredictably mid-session. | ON_INIT, getEntityCollectionHttpRequestParametersMap |
| Submit data through the intended channel. | Rely on defaults that mismatch your API. | controlsRequestType, dataField | |||
| Provide a stable test hook for QA. | Select the control via brittle selectors. | dataTestId | |||
| Set a safe, obvious default only when appropriate. | Pre-fill with a misleading value. | defaultValue |
...
