Adding a Tile widget to Shopping Results panel widget

Below you can find step-by-step procedure to add a Tile Widget to Shopping Results Panel Widget

image77

  1. First step - create Widget. The following example shows how to create a Widget. The setDataContent method takes string or TileContent as an argument. Refer to TileContent.

For a best practice, create views folder under code folder and create SampleTile.ts under newly created views folder

import Tile = app.widgets.drawer.views.elements.Tile;
import FlightSegment = app.common.data.flight.FlightSegment;
import {Mixin} from 'sabre-ngv-core/decorators/classes/Mixin';

export class HelloWorldTile extends Tile<FlightSegment> {
    selfDrawerContextModelPropagated(cpa: FlightSegment) {
        this.setDataContent('Sample Content);
    }
}

  1. Next, add above Widget configuration to the Shopping Result.

To do it, add HelloWorldTile to your Main class to shopping response as shown below.

import {Module} from 'sabre-ngv-core/modules/Module';
import getService = app.getService;
import DrawerService = app.services.impl.DrawerService;
import registerService = app.registerService;
import {TileWidgetDrawerConfig} from 'sabre-ngv-core/configs/drawer/TileWidgetDrawerConfig';
import {HelloWorldTile} from './views/HelloWorldTile';

export class Main extends Module {
    init(): void {
        super.init();
        const drawerConfig = new TileWidgetDrawerConfig(HelloWorldTile);
        getService(DrawerService).addConfig(['shopping'], drawerConfig);

    }
}