com.sabre.redapp.example3.web.addpnr Sample

As Red App developer you are able to extend the Add to PNR modal and show it pragmatically. You can add custom actions and callbacks for sucessful/failed data insertion into PNR.

export class Main extends Module {

    init(): void {
        super.init();
        const xp = getService(ExtensionPointService);

        const sidepanelConfig = new RedAppSidePanelConfig([
            new RedAppSidePanelButton('Create PNR', 'btn btn-secondary side-panel-button', () => this.addToPnr()) // (1)
        ]);

        xp.addConfig('redAppSidePanel', sidepanelConfig); // (1)

    }

    private addToPnr(): void {

        new MyPnr().showInModal(); (2)
    }
}

Adding new button to custom workflow
Showing Add to Pnr popup, where MyPnr is class extending default Add to Pnr, implementation below.

@Mixin(WithShowInModal)
@Mixin(WithValidation)
export class MyPnr  extends PnrAdd implements WithShowInModal, WithValidation {

    constructor() {
        super()
    }

    modalOptions = { // (1)
        title: 'Customised Add To PNR',
        cssClass: 'dn-panel add-to-pnr-modal',
        actions: [
            {
                caption: 'Cancel',
                actionName: 'cancel',
                type: 'secondary'
            },
            {
                caption: 'Submit',
                actionName: 'my-pnr',
                type: 'success'
            }
        ]
    };

    @OnKeyCombo('enter')
    public enterHandler() {
        this.selfMyPnrAction(); // (2)
    }

    private selfCancelAction() {
        super.triggerOnEventBus('close-modal');
    }

    private selfMyPnrAction() {

        if (super._validateForm()) {
            let submitter = new PnrAddSubmitter({form: this}); // (3)
            submitter.submit()
                .done(() => {
                        console.log("PNR Information has been added") // (4)
                    }
                )
                .fail(() => {
                    console.log("Error occurred"); // (5)
                });
            super.triggerOnEventBus('close-modal');
        }
    }

    validate: () => boolean;  // (6)

    showInModal: () => void; // (7)

}

Basic properties of the modal - custom title, css looks and actions.
Adding button listener
Submitter is necessary for internal submission of data into PNR.
Callback for successful transferring data into PNR
Error callback