Applications Side Panel

The business purpose of Applications Side Panel is to allow Red Apps to open applications in a dedicated side panel. React is the technology used to create these applications so the Red App itself decides what the application looks like and how it behaves. Unlike other side panels, in this case, we define not the action that will be performed when you select a button in the side panels, but the component that will be rendered.

applications list
applications opened

Contributing

Red Apps can contribute to Applications Side Panel via ExtensionPointService. The first step is to add all required imports:

import {AppsSidePanelConfig} from 'sabre-ngv-sdk-apps-sidepanel/configs/AppsSidePanelConfig';
import {AppsSidePanelButton} from 'sabre-ngv-sdk-apps-sidepanel/configs/AppsSidePanelButton';
import {ExtensionPointService} from 'sabre-ngv-xp/services/ExtensionPointService';

Then Red Apps can contribute under appsSidePanel key as follows:

// Creating Config
const config: AppsSidePanelConfig = new AppsSidePanelConfig([
    new AppsSidePanelButton({
        // Application ID
        id: 'com-example-web-module-example-app',
        // Label
        label: 'Stateful Application',
        // Button Icon
        icon: 'fa-save',
        // React Component
        component: React.createElement(StatefulComponent),
        // Redux Store
        store
    })
]);

// Adding Config
getService(ExtensionPointService).addConfig('appsSidePanel', config);

Config Properties

The following properties can be defined for config:

Property Description

buttons

List of buttons that will be added with this config.

Button Properties

The following properties can be defined for button:

Property Description

id

ID of the application which should be unique to ensure the correct behavior of the application and the Applications Side Panel. To achieve ID uniqueness, use the Web Module name as a prefix (then the suffix needs to be unique only within the Red App).

label

Label of the button visible in the side panel that opens the application or header when given application is opened.

icon

Icon rendered next to side panel button label. Expects Font Awesome font class (e.g. "fa-cog").

component

The top level React component of the application.

store (optional)

Optional Redux store. If defined, it will be provided to the top level component of the application. If the application requires a state, then store is required. The component state is not long-lasting, it is deleted when the application is closed.

Opening Application Programmatically

Applications in the Applications Side Panel can be opened programmatically. It is possible to open specified application or list of all applications in specified width mode (wide or narrow). This can be achieved using IAppsSidePanelService.

IAppsSidePanelService

In order to obtain AppsSidePanelService and use it, you need to import it, e.g.:

import {IAppsSidePanelService} from 'sabre-ngv-sdk-apps-sidepanel/services/IAppsSidePanelService';

Then obtain the service inside your source as below:

const appsSidePanelService: IAppsSidePanelService = getService(IAppsSidePanelService);

Applications can be opened using openApp method:

appsSidePanelService.openApp('com-example-web-module-example-app', true);

Open App Method Arguments

This method which takes two arguments:

  • id

  • wideMode (optional)

ID

ID of the application to be opened. An empty string is identified with a list of all applications.

Wide Mode

Specifies if application should be opened in wide (true) or narrow (false) mode. If not specified current wide mode settings does not change.