com.sabre.redapp.example3.web.command.message Sample

This sample demonstrates usage of ICommandMessageService.

To create a web module by using TypeScript, refer to the Web Modules - Development Cycle chapter.

All the UI implementation code is under web-src/com-sabre-redapp-example3-command-message-web-module/src/code

Create Main.ts file:

export class Main extends Module { (1)
    init(): void {
        super.init(); (2)
        getService(ExtensionPointService).addConfig('novice-buttons', new WidgetXPConfig(StaticButton, -1000)); (3)
    }
}

The Main class has to extend the Module class.
In the init function, call the init() function from the super class.
Add button configuration to add a command helper or novice button. In this sample, StaticButon is the button class that extends the AbstractBootstrapPopoverButton class.

StaticButton.ts

Next, create the button class StaticButton.ts for this sample.

Before creating the class add @CssClass and the button as shown below.

@CssClass('com-sabre-redapp-example3-web-desktop-web-module btn btn-default')
@Initial<any>({
    caption: '<i class="fa fa-edit"></i> <span class="hidden-xs dn-x-hidden-0-8">Example</span>',
    type: 'default'
})

Using the @CssClass mixin, add the css class name that resembles the eclipse plugin name. Your style will be entirely wrapped inside this class name, e.g. .com-sabre-redapp-example3-desktop-form-web-module\{…..}
Using the @Initial mixin add the caption you want to show on the button. 'Example' is the caption in this case.

This class extends AbstractBootstrapPopoverButton and initializes StatefulComponentWithSaga by setting the following component options.

export default class StaticButton extends AbstractBootstrapPopoverButton {
    private content = new StatefulComponentWithSaga(
        {
            componentName: 'SamplePopover',
            rootReactComponent: FormComponent,
        }
    );

componentName: string; A name used in Redux dev tools to identify the store.
rootReactComponent: React.ComponentClass<Componentprops>; Base React class to be mounted as root in ReactDOM.render().
componentWrapperType: string; The default 'div', but you may need to change to 'li' or 'span' or so.

Initialize the button as shown below and register any content events.

/**
 * Initialize Button
 */
initialize(options: any): void {
   super.initialize(options);

   this.registerContentEvents();
}

In this sample we are registering events for the cancel action. Register events with the action name and the handler method that should be invoked.

/**
 * An example event handler to demonstrate proper side effect handling in the React layer.
 *
 * Here, we implement the child(React) => parent(app) communication pattern
 * with Redux-Saga middleware triggering an event on the parent's event bus
 * when the given Redux Action gets dispatched.
 */
private registerContentEvents() {
	this.listenToEventBus('hide-popovers', this.handleCloseEvent.bind(this));
}

When the cancel action happens, the action is handled in sagas.ts and when the 'cancel' event is triggered, handleCancelEvent is triggered. Here, we are unmounting the React component and doing cleanup such as closing and disposing of the popover.

private handleCloseEvent(): void {
    this.content.unmount();
    this.togglePopover();
    this.content.dispose();
}

The next step is to create any React Component, Action, State and Reducers, and more, that need to be set in the FormComponent class. Please do this step according to official requirements by referring to the official documents on React and Redux.

Note: In this sample we are going to create one React component with a simple form that has one input type element and two action buttons. This is just an example demonstrating the feature, but injecting React+Redux can be done however you want to and you can simply use the exposed class StatefulComponentWithSaga to pass your designed components.

With the Submit action, we are making the CommandFlow call use the ICommandMessageService methods.

ICommandMessageService

If you use the desktop version of the application you have to include the following statement in redapp.xml to authorize your RedApp to use ICommandMessageService.

<RedApp id="command-message-sabre-x"> (1)
  <Authorization name="com.sabre.edge.dynamo.cf.service.CommandMessageService"
      threshold="1" />
</RedApp>

Redapp id.

The following handle method is used in the submit action.

/**
 * handle submit action
 */
private handleSubmit = async (event: React.FormEvent<HTMLFormElement>): Promise<void> => {
    event && event.preventDefault();
    const request: CommandMessageRq = {
        rq: this.state.command, (1)
        showRq: this.state.showRequest, (2)
        showRs: this.state.showResponse (3)
    };
    sendCommand(request);
};

Retrieve the command from the state and pass it to the sendCommand() function.
Retrieve the showRequest property from the state and pass it to the sendCommand() function.
Retrieve the showResponse property from the state and pass it to the sendCommand() function.

The following function sending command:

export const sendCommand = async (request) => {
    closePopovers();
    const response: CommandMessageBasicRs = await comMsgService.send(request);
    showStatusModal(response);
};

Rendering Template:

We use CommandMessageBasicRs as data model. Create a showStatusModal method to handle the response.

export const showStatusModal = (response: CommandMessageBasicRs): void => {
    const statusView = new StatusView();
    statusView.setStatus(response.Status);

    const layerService: LayerService = getService(LayerService);
    layerService.showInModal(
        statusView,
        {title: t('RESPONSE_STATUS')},
        {display: 'areaView'}
    );
};

Retrieve the status from the response object.
Use LayerService to show the response in the modal.
Set the modal’s title and pass the data to the modal.

Execution Steps:

Include the sample plugin in any Eclipse run configurations.
Run the application.
Log into the application using your EPR, password and PCC.
Click on the Command Helper button.
Click the Command Message Example button to see the form popover.
Populate Search Fields and click submit to render the template. The request and response are then displayed on the screen.

Example Button and Form Popover for the Text Command:

Example Button and Form Popover for the Structure Command:

Results Template:

Results Template with messages: