Red App Settings

Red Apps can contribute to "Red Apps settings" in settings modal:

Note	List of the Red Apps is rendered alphabetically.

The contribution is done via ExtensionPointService:

import {ExtensionPointService} from 'sabre-ngv-xp/services/ExtensionPointService';

Settings config is added under redAppsSettings:

import {SettingsConfig} from 'sabre-ngv-settings-common/configs/SettingsConfig';
/** ... */

const config = new SettingsConfig({
    pages: [{ component: React.createElement(Traveler) }],
    onSave,
    onCancel,
    store
});

getService(ExtensionPointService).addConfig('redAppSettings', config);

This will cause defined page component to be rendered in a separate modal when opened:

You can also define more than one page:

const config = new SettingsConfig({
    pages: [
        {
            label: 'Traveler',
            component: React.createElement(Traveler),
        },
        {
            label: 'Flow',
            component: React.createElement(Flow),
        },
    ],
    onSave,
    onCancel,
    store
});

In this case the defined pages components will be rendered as a separate tabs:

Label

Label is being used as tab label for multi-page settings (ignored for single page settings). If not defined default value will be provided.

On save

You can define optional onSave method that will be called when user tries to save Red App settings. This is when the Red App should validate data provided by user and show validation errors or try to save the data. This method returns boolean to indicate if save has been successful:

If it returns true the modal will be closed
If it returns false the modal will stay opened

Red App can also return structure with message:

{ "message": "Network error" }

In this case the modal will remain opened and error banner will be shown in all pages:

"Save" button will not be rendered if onSave method is not defined.

On cancel

This method will be called when user cancels Red App settings modal. It allows to do cleanup if required.

Store

Optional Redux store. If defined, it will be provided to the defined pages components.

APIs

Detailed APIs of configs and interfaces used to configure Red Apps Settings can be found in TypeScript API Documentation.

Example

You can see examples of Red App Settings contributions in the following samples:

com.sabre.redapp.example3.web.settings.singlepage
com.sabre.redapp.example3.web.settings.multipage