com.sabre.redapp.example3.web.forms.service Sample

This sample demonstrates usage of FormsService.

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-forms-service-web-module/src/code._

Create Main.ts file:

export class Main extends Module { (1)
    init(): void {
        super.init(); (2)
        const extensionPointService: ExtensionPointService = getService(ExtensionPointService);
        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-forms-service btn btn-default')
@Initial({
    caption: '<i class="fa fa-edit"></i> <span class="hidden-xs dn-x-hidden-0-8">Forms Service 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_web_form\{…..}
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 StatelessComponent by setting the following component options.

eexport default class StaticButton extends AbstractBootstrapPopoverButton {
    private content = new StatelessComponent(
        {
            componentName: 'CommandMessagePopover',
            rootReactComponent: SimpleTabControllerComponent,
        }
    );
	...

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().

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 and more, that need to be set in the SimpleTabControllerComponent class. Please do this step according to official requirements by referring to the official documents on React.

Note: In this sample we are going to support 3 forms. Queue Place, Air Shopping and Air Availability form. Each one create two React components with two buttons which delegate invocation. One of the buttons opens a form that has one input type element and two action buttons. The second one opens form (QueuePlace Modal, AirShopping form or AirAvailability form). This is just an example demonstrating the feature, but injecting React can be done however you want to and you can simply use the exposed class StatelessComponent to pass your designed components.

The following button passes the invocation to the FormsService. The FormsService open the QueuePlace Modal without any data.

The following button passes the invocation to the FormsService. The FormsService open the QueuePlace Modal and prepopulate it with data.

The following button passes the invocation to the FormsService. The FormsService open the Air Shopping Form without any data.

The following button passes the invocation to the FormsService. The FormsService open the Air Shopping Form and prepopulate it with data.

We created two different methods which delegate invocation to FormsService The response is displayed on the screen.

This method opens an empty QueuePlace Modal.

private openQueuePlaceForm = (): void => {
	this.formsService.openForm({
			QueuePlaceRq: {
				Queue: []
			}
		}
	);
};

This method opens an empty Air Shopping Form

private openAirShoppingForm = (): void => {
	this.formsService.openForm({
			AirShoppingInputRq: {}
		}
	);
};

This method opens QueuePlace Modal, Air Shopping Form or Air Availability Form with prepopulated data.

    private handleFormSubmit = async (formRq: string): Promise<void> => {

        // Get reference for IFormsService
        const formsService: IFormsService = getService<IFormsService>(IFormsService);
        // Open with populated data
        try {
            const rq = JSON.parse(formRq);

            // Hide popovers before open modal
            this.closePopovers();

            const response: CommandMessageBasicRs = await formsService.openForm(rq);
            // Show response
            this.props.statusView && StatusView.showStatusModal(response);
        } catch (ex) {
            alert(ex);
        }
    };

The following handle method is used in the submit action.

private handleSubmit = async (event: React.FormEvent<HTMLFormElement>): Promise<void> => {
	event.preventDefault();
	await this.handleFormSubmit(this.state.areaTextValue);
};

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 Forms Service Example button to see the form popover.
Choose a button. The response is then displayed on the screen.

Example Button and Form Popover for QueuePlace Modal with prepopulated data

Opened QueuePlace Modal after submitted the form

Example Button and Form Popover for Air Shopping Form with prepopulated data