"Applications" side panel

SR360 contains various side panels and one of them is the "Applications" side panel. Its business purpose is to allow Red Apps to open applications in a dedicated sidepanel. React is the technology used to create these applications so the Red App itself decides what the application looks like and how it behaves.

applications side panel

Contributing to the "Applications" side panel

Similar way to other side panels, you contribute to the "Applications" side panel using ExtensionPointService. At this point, the following properties can be defined:

  • id

  • label

  • icon

  • component

  • store

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, that opens the application, visible in the side panel.

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 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 needed. The component state is not long-lasting, it is deleted when the application is closed.

AppsSidePanelService

The AppsSidePanelService allows to open and close applications in the "Applications" side panel.

Acquiring AppsSidePanelService

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);

Available methods

Currently available methods:

getAgentId 
openApp(id: string, wideMode?: boolean): void;

Allows opening application and specifying wide mode value.

Type Parameteres:
id - ID of the application to be opened. An empty string is identified with a list of applications (buttons list)
wideMode - Specifies if application should be opened in wide mode or not (narrow mode). If not specified wide mode settings does not change
Note
 Detailed APIs of configs and interfaces used to configure the "Applications" side panel via ExtensionPointService can be found in TypeScript Api Documentation in sabre-ngv-sdk-apps-sidepanel web module.
Note
 You can see an example use of the "applications" side panel in the com.sabre.redapp.example3.web.sidepanel.applications SDK sample.