Breadcrumb
Select Widget
As a Red App developer, you are able to create a select widget component with encode/decode support.
This component supports the following props.
interface SelectWidgetProps {
id: string,
domain?: Domain,
onValueChange?: (value: WidgetResult[]) => void;
optionsLimit?: number,
customDomain?: CustomDomainUnit[],
defaultValue?: string | string[],
nextComponentToFocusRef?: React.ReactInstance,
showError?: boolean,
errorMessage?: string
}
Overview of each prop:
-
id - obligatory id of a component
-
[domain] - optional domain on which the encoding/decoding will be performed
Note
|
|
-
[onValueChange] - optional method that sends chosen values as WidgetResult[] to the parent component.
-
[optionsLimit] - optional number of options that can be selected, by default set to 1
-
[customDomain] - optional structure that can replace defined domains, defined as an array of CustomDomainUnits:
interface CustomDomainUnit { label: string; value: string; }
Note
|
|
-
[defaultValue] - optional default value(s) to be set at the beginning.
-
[nextComponentToFocusRef] - optional reference to another component, to set the focus on it when the limit of selectable options has been reached. It doesn’t have to be another SelectWidget component, it may be any component with 'focus' option like for e.g. html 'input' field.
-
[showError] - Optional flag indicating if the component should display an error
-
[errorMessage] - Optional error message, if not given, default message will be displayed
interface WidgetResult {
label: string;
value: string;
domain: string;
}
Using Select Widget
-
Add the sabre-ngv-UIComponents-inputs dependency to your plug-in.
-
Obtain a reference to the SelectWidget component from "sabre-ngv-UIComponents-inputs/SelectWidget/components/SelectWidget".
-
Use SelectWidget component as you want to, sample code:
<SelectWidget id={'select-airport-domain'} domain={Domain.AIRPORT}/>
More information on using this component is described in the sample’s documentation.