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

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

Source code explanation

In order to contribute to the "Applications" 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 "Applications" side panel. In the module Main.ts class:

export class Main extends Module {

    private static CONFIG_NAME: string = 'appsSidePanel';

    init(): void {
        super.init();
        this.setup(); //(1)
    }

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

        const config: AppsSidePanelConfig = new AppsSidePanelConfig([ // (2)
            new AppsSidePanelButton({ // (3)
                id: com-sabre-redapp-example3-web-sidepanel-applications-web-module-stateful-app,
                label: 'Stateful Application',
                icon: 'fa-save',
                component: React.createElement(StatefulComponent),
                store
            }),
            new AppsSidePanelButton({
                id: com-sabre-redapp-example3-web-sidepanel-applications-web-module-stateless-app,
                label: 'Stateless Application',
                icon: 'fa-long-arrow-alt-right',
                component: React.createElement(StatelessComponent)
            })
        ]);

        xp.addConfig(Main.CONFIG_NAME, config); // (4)
    }

    private setup() {

        const xp = getService(ExtensionPointService);

        const button: AppsSidePanelButton = new AppsSidePanelButton(
            'Test App',
            'com-sabre-redapp-example3-web-sidepanel-applications-test-app',
            'fa fa-umbrella',
            'sidepanel-application-test-app'); // (2)
        const config: AppsSidePanelConfig = new AppsSidePanelConfig([button]); // (3)
        xp.addConfig(Main.CONFIG_NAME, config); // (4)
    }
}

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

  2. In order to contribute to the "Applications" side panel via extension point, AppsSidePanelConfig configuration is being used.

  3. Each button must have a defined label, unique ID prefixed with RedApp name initialized with String literal, name of the icon from Font Awesome library, top level React component of the application and, optionally, Redux store.

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