Adding Modal Window to Tile Widget

The Modal Widget can be added to a Tile Widget. When user clicks on Tile Widget then a Modal Window will be initialized and rendered by the Framework.

Steps to add a Modal Widget

1. First, create a Modal Widget class.

import {Template} from 'sabre-ngv-core/decorators/classes/view/Template';
import AbstractView = app.AbstractView;
import AbstractModel = app.AbstractModel;
import FlightSegment = app.common.data.flight.FlightSegment;

Template('sabre-sample-module:SampleTemplate')
export class SampleModal extends AbstractView<AbstractModel> {
   selfDrawerContextModelPropagated(cpa: FlightSegment) {
     this.render();
 }

selfSave(): void {  //do save
}

Appropriate Modal class need to be used within selfDrawerContextModelPropagated method. In case of Decision Support Bar Widget app.responses.shopping.models.ShoppingData. Shopping Results Widget app.common.data.flight.FlightSegment models will be propagated by the Framework.

this.render() - Renders handlebar template 'SampleTemplate'

Data can be attached to the template by updating the model. Below you can find the example: this.getModel().set('greeting', 'Hello World');

2. Template HTML creation.

Secondly, create a HTML page (SampleTemplate.html) under templates folder with the exact same name used in the Modal Widget Class

<div class="row">
      <div class="col-md-4 col-xs-4 row">
          {{greeting}}
      </div>
</div>

3. Thirdly, add Modal configuration along with the Panel Configuration in Main.ts

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 {LargeWidgetDrawerConfig} from 'sabre-ngv-core/configs/drawer/LargeWidgetDrawerConfig';
import {HelloWorldTile} from './views/HelloWorldTile';
import {SampleModal } from './views/SampleModal;
export class Main extends Module {
    init(): void {
        super.init();
        const drawerConfig = new LargeWidgetDrawerConfig(HelloWorldTile , SampleModal , {
            title: 'Sample Modal',
            cssClass: 'sample-modal',
            maximized: true,
            actions: [
                {
                    caption: 'Cancel',
                    actionName: 'cancel',
                    type: 'secondary'
                },                {
                    caption: 'Save',
                    actionName: 'save',
                    type: 'default',
                    cssClass: 'btn btn-success save'
                },
        });
        getService(DrawerService).addConfig(['shopping'], drawerConfig);
   }
}

Modal configuration allows to describe modal title, CSS class to be wrapped with, maximized by default, actions to be shown at the bottom on the Modal etc.

In case ofcancelaction, you do not need to do anything - API covers modal dismissal by default. However, the save button requires a dedicated implementation in SampleModal class describing the "body" of our modal.

Simple add "selfSave" to the class implementation to cover the logic of this button:

selfSave(): void {
  //do save
}