Skip to main content

Adding a Tile widget to LFS Decision support bar widget

The following steps help you with the procedure of adding a Tile Widget to Low Fare Shopping (LFS) Decision Support Bar widget.

  1. First step - create a Widget.

Below 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 HelloWorkdTile.ts under newly created views folder

import Tile = app.widgets.drawer.views.elements.Tile;
import ShoppingData =;
import {CssClass} from 'sabre-ngv-core/decorators/classes/view/CssClass';

export class HelloWorldTile extends Tile<ShoppingData> {
    selfDrawerContextModelPropagated(shoppingData: ShoppingData) {
       this.setDataContent("Hello World");
  1. Next add above Widget configuration to the Shopping Response.

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

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

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