Define custom commands

As a Red App developer you can define custom commands to be executed in work area.

The first step is to create a TypeScript service that extends the CustomCommandHandler and implements the onCommandSend method. It will be called whenever agent types in a custom command.

The com.sabre.redapp.example3.web.customCommand sample implementation is available for your reference.

export class SampleCustomCommandHandler extends CustomCommandHandler {

    static SERVICE_NAME =
    "com-sabre-redapp-example3-web-customcommand-web-module-SampleCustomCommandHandler"; //(1)

  onCommandSend(rq: CustomCommandRq) : Promise<CustomCommandRs> {

    return new Promise<CustomCommandRs>((resolve, reject) => { //(2)

        // resolve();
        // reject()
    });

  }
}

Set the service name to ensure uniqueness.
The onCommandSend method returns Promise, so make sure that 'resolve' is called in Red App logic.

e.g.:

export class SampleCustomCommandHandler extends CustomCommandHandler {

    static SERVICE_NAME =
    "com-sabre-redapp-example3-web-customcommand-web-module-SampleCustomCommandHandler";

  onCommandSend(rq: CustomCommandRq) : Promise<CustomCommandRs> {

    return new Promise<CustomCommandRs>((resolve, reject) => {

      let addRemarkModalOptions = {
        title: 'Modal with handlebar template',
        actions: [{
          className: 'app.common.views.Button',
          caption: 'Submit',
          actionName: 'submit',
          type: 'secondary'
        }]
      };

      getService(LayerService).showInModal(
          new BasicView({model: new BasicModel(resolve)}), addRemarkModalOptions, {display: 'areaView'}
      );
    });

  }
}

@Template('com-sabre-redapp-example3-web-customCommand-web-module:BasicView')
export class BasicView extends AbstractView<BasicModel> {

    constructor(options?: AbstractViewOptions) {
        super(options);
    }

    selfSubmit() {
        if(super.getModel().resolve) {
            super.getModel().resolve(); //(1)
        }
        super.triggerOnEventBus('close-modal');
    }

}

Resolve the promise, go on with the flow.

The next step is to register the service:

import { SampleCustomCommandHandler } from "./services/SampleCustomCommandHandler"; //(1)
import { registerService } from "./Context";


export class Main extends Module {

    init(): void {

        super.init();
	    registerService(SampleCustomCommandHandler); //(2)

    }
}

Import custom command handler.
Register the service.

In the last step, service has to be declared in the src/manifest.json file, with the command that will execute it.

{
    "name": "abre-ngv-custom-command-sample",
    "meta": {
        "bundleName": "sabre-ngv-custom-command-sample"
    },
    "customCommands": [
        {
            "TEST": "com-sabre-redapp-example3-web-customCommand-handle-service"
        }
    ]
}

Import the created service
Register service

After this setup the onCommandSend method of the service can be called by typing §TEST in the work area. Keep in mind that the command is defined without §, but to be called, it needs to be prefixed (so a handle defined as "TEST" is called using the "§TEST" command in {short_brand_name}). § is available under the \ key in {short_brand_name}.

If a Red App defines multiple custom commands, then each of them has to have a service implementing CustomCommandHandler. Keep in mind that (in manifest.json) each command is a JSON object inside the array, so manifest would look like this:

{
    "name": "abre-ngv-custom-command-sample",
    "meta": {
        "bundleName": "sabre-ngv-custom-command-sample"
    },
    "customCommands": [
        {
            "TEST": "com-sabre-redapp-example3-web-customCommand-handle-service"
        },
        {
            "TEST2": "com-sabre-redapp-example3-web-customCommand-handle-another-service"
        }
    ]
}

A working sample can be found in the …\samples directory of the SDK distribution package under the com.sabre.redapp.example3.web.customCommand name.