Breadcrumb
- Sabre Red 360 Software Development Kit Help
- Sabre Red 360 Developer Toolkit
- Web Modules
- Examples
- com.sabre.redapp.example3.web.select.widget Sample
com.sabre.redapp.example3.web.select.widget Sample
This sample showing how to use Select Widget.
Sample contains two modals:
-
SelectWidgetModal which opens a simple form with two component instances.
-
First one with given AIRPORT domain, optionsLimit property set to 3, nextComponentToFocusRef set to the second instance of SelectWidget and defaultValue set to 'KRK'.
-
<FormGroup key={'select-airport-domain'}>
<ControlLabel>
Select Widget - AIRPORT Domain
</ControlLabel>
<SelectWidget id={'select-airport-domain'}
domain={Domain.AIRPORT}
optionsLimit={3}
onValueChange={this.props.updateProps}
defaultValue={'KRK'}
nextComponentToFocusRef={this.selectWidgetRef}
/>
</FormGroup>
-
Second one with given customDomain:
private selectWidgetRef: React.ReactInstance;
const items = [
{"label": "Economic", "value": "ECO"},
{"label": "Business", "value": "BUS"},
{"label": "Premium", "value": "PRE"}
]
<FormGroup key={'select-custom-domain'}>
<ControlLabel>
Select Widget - Custom Domain with multiple options
</ControlLabel>
<SelectWidget id={'select-custom-domain'}
customDomain={items}
onValueChange={this.props.updateProps}
ref={ref => this.selectWidgetRef = ref}
/>
</FormGroup>
Note
|
The reference to this instance is passed to the local selectWidgetRef variable in order to set it in the previous SelectWidget instance. |
In both cases onValueChange parameter was set to updateProps which sets received values in global store to be used it later.
The picture of the "Select Widget" modal:
-
ResultsModal which opens after clicking the "Submit" button in the above modal. It is a simple component that shows value selected in the previous step, which were saved in the global store by the updateProps method.
The picture of the "Select Widget Results" modal: