Drawer Action Buttons

Button with custom action can be attached to result drawer in flight availability, flight shopping and car rental searches.

Button can perform any action on click, for example open a modal:

Button creation

First step to create a button that can be then added to the drawer is to create a class that extends the Button class.

For example:

export class SampleDrawerListAction extends Button

To set the label and styles, AbstractActionOptions has to be set:

@Initial<AbstractActionOptions>({
    caption: 'Sample Drawer List Action',
    type: 'secondary',
    className: 'web-flight-drawer-sample'
})

selfDrawerContextModelPropagated method is used to set the model for the button, and selfAction() method is used to define the business logic that will be executed after the button click.

For example:

export class SampleDrawerListAction extends Button {

    selfDrawerContextModelPropagated(cpa: FlightSegment): void {


        this.getModel().set('cpa', cpa);
    }

    selfAction(): void {

        getService(LayerService).showInModal(
            new SampleDrawerListActionView({model: this.getModel().get('cpa')}),
            { title: 'Sample drawer list action' });
    }
}

Adding the button to the drawer

After button has been created it now can be added to the drawer by using DrawerService.

First proper config has to be created:

const sampleDrawerListAction: Descriptor<AbstractAction, AbstractActionOptions> = {
    class: SampleDrawerListAction
};
const actionsConfig = new ActionsDrawerConfig([sampleDrawerListAction]);

Then we add the configuration to proper drawer:

getService(DrawerService).addConfig(['flight-segment-common', 'shopping-flight-segment'], actionsConfig);

The car configuration name can be used to add button to car rental drawer.

Data

In case of any kind of flight search the FlightSegment model is used, from sabre-ngv-app/app/common/data/flight/FlightSegment module.

In case of car drawers the CarSegment model is used from sabre-ngv-app/app/responses/car/models/CarSegment module.

APIs

Detailed APIs of configs and data models used to configure and work with action buttons can be found in TypeScript API Documentation.

Example

You can see examples of tile widgets contributions in com.sabre.redapp.example3.web.tilewidgets sample.