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	All available to use domains are listed in the com.sabre.edge.platform.optional.encodedecode.domain

[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

At least one of the Domain and CustomDomain parameters must be passed, otherwise the component will return an empty value and generate an error.
If both Domain and CustomDomain parameters were passed, component will use CustomDomain component.
Each label and value of CustomDomainUnit must be unique.
If CustomDomain parameter was passed, list of all possible options is displayed after focusing component.

[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.