com.sabre.redapp.example3.web.sidepanel.admin Sample

This Red App demonstrates how Red Apps can contribute to the "Agency Admin" side panel. To learn more about the "Agency Admin" side panel go here.

Source code explanation

In order to contribute to the "Agency Admin" side panel, it is necessary to a/ add a configuration, and b/ define the action to be performed when clicking on the button added to the "Agency Admin" side panel. In the module Main.ts class:

export class Main extends Module {
    init(): void {
        super.init();
        this.setup(); // (1)
    }

    private setup() {
        const xp = getService(ExtensionPointService);

        const adminSidePanelConfig = new AdminSidePanelConfig([ // (2)
            new AdminSidePanelButton('Red App Workflow', 'sidepanel-admin', () => this.adminSidePanelAction()) // (3)
        ]);

        xp.addConfig('adminSidePanel', adminSidePanelConfig); // (4)
    }

    private adminSidePanelAction(): void { // (5)
        const message = 'This is workflow added to Agency Admin side panel by Red App.';

        getService(LayerService).showInModal(
            new MessageView({
                model: { message }
            }),
            { title: 'Admin Side Panel Workflow' },
            { display: 'areaView' }
        );
    }
}

  1. The best place to contribute to the "Agency Admin" side panel is the init method in the Main.ts class.

  2. In order to contribute to the "Agency Admin" side panel via extension point, AdminSidePanelConfig configuration is being used.

  3. Each button must have a defined label, CSS classes and the action to be performed when the button is clicked.

  4. The configuration must be added to the extension point under the adminSidePanel key.

  5. There are no special restrictions on the action to be performed.