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.

image75

  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 = app.responses.shopping.models.ShoppingData;
import {CssClass} from 'sabre-ngv-core/decorators/classes/view/CssClass';

@CssClass('hello-world-tile')
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 = app.services.impl.DrawerService;
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-response'], drawerConfig);

    }
}