com.sabre.redapp.example3.web.customworkflow Sample

Custom workflow sample shows how to contribute button into the Workflows (formerly Custom Workflow) side panel.

In module Main.ts class:

export class Main extends Module { // (1)
    init(): void {
        super.init(); // (2)
        //...
        const sidepanelConfig = new RedAppSidePanelConfig([  //(3)
            new RedAppSidePanelButton('Create PNR', 'btn btn-secondary side-panel-button', () => this.createPNR()), //(4)
            new RedAppSidePanelButton('Add Remark', 'btn btn-secondary side-panel-button', () => this.startScripts()) //(4)
        ]);

        xp.addConfig('redAppSidePanel', sidepanelConfig); (5)

        //...
    }
}

  1. Main class has to extend Module class.

  2. In init function you should call init function from super class.

  3. RedAppSidePanelConfig is used to configure all buttons that are going to be contributed into custom workflow side panel.

  4. Each button has to describe its own label, css classes and callback method that will be called when button will be clicked.

  5. Configuration has to added to extension points configuration under 'redAppSidePanel' key.

image200

Buttons are sorted from top to bottom, starting with the one with the lowest priority. The default priority is 999. It can be set while creating a new RedAppSidePanelConfig.

        const buttonGroupOne = new RedAppSidePanelConfig([
            new RedAppSidePanelButton('Create PNR', 'btn btn-secondary side-panel-button redapp-web-customworkflow-pnr', () => this.createPNR()),
            new RedAppSidePanelButton('Show interstitial', 'btn btn-secondary side-panel-button redapp-web-customworkflow-interstitial', () => this.showInterstitial()),
            new RedAppSidePanelButton('Show Agent Profile', 'btn btn-secondary side-panel-button redapp-web-customworkflow-agentprofile', () => this.showAgentProfile()),
            new RedAppSidePanelButton('Refresh Trip Summary', 'btn btn-secondary side-panel-button redapp-web-customworkflow-refreshtrip', () => this.refreshTripSummary())
        ], 3);

        const singleButton = new RedAppSidePanelConfig([
            new RedAppSidePanelButton('LAS - LAX', 'btn btn-secondary side-panel-button redapp-web-customworkflow-action', () => this.callAction())
        ], 2);

Each button in buttonGroupOne config item will have priority 3, and LAS-LAX button will have priority 2 and will be rendered above all the buttons from buttonGroupOne.

Declarative custom workflows

As an alternative, the button can be described in manifest.json entry, under customWorkflows field. For example:

"customWorkflows": [
  {
    "label": "manifest.json Workflow",
    "priority": 100,
    "service": "CustomWorkflowService",
    "cssClasses": "abc"
  }
]

This creates a button with manifest.json Workflow label and priority 100. Method execute of service named <webmodule-name-prefix>-CustomWorkflowService (com-sabre-redapp-example3-web-customworkflow-web-module-CustomWorkflowService in this case) will be performed when the user clicks the workflow button. cssClasses field is optional and can be used to add a custom CSS class.

Creating Eclipse plugin

Creating an Eclipse plugin for your new Red App is almost the same as it used to be. The only notable difference is a different extension point you will contribute to. For web module Red App it should be:

<extension point="com.sabre.edge.dynamo.web.module">
     <modules>
        <module id="sabre-sdk-sample-customworkflow"/>
    </modules>
</extension>

com.sabre.edge.redapp.contactdetails.provider extension point is also required as in traditional Red Apps.