Command Helper Button

The business purpose of Command Helper Button is to add a button with popover to the Command Helper Bar.

image

Contributing

There are two steps to contributing custom Command Helper Button to Command Helper Bar:

  1. Create class that describes Command Helper Button and a React component that will be used as a popover content.

  2. Use ExtensionPointService to register Command Helper Button so it is displayed in Command Helper Bar.

Command Helper Button Class

First step is to create custom class for Command Helper Button that extends AbstractBootstrapPopoverButton. Here is a list of all required imports for this part:

import AbstractBootstrapPopoverButton from 'sabre-ngv-UIComponents/commandHelperButton/components/AbstractBootstrapPopoverButton';
import {ChildComponentContent} from 'sabre-ngv-UIComponents/commandHelperButton/interfaces/ChildComponentContent';
import {Initial} from 'sabre-ngv-core/decorators/classes/Initial';
import {CssClass} from 'sabre-ngv-core/decorators/classes/view/CssClass';
import {AbstractActionOptions} from 'sabre-ngv-app/app/common/views/AbstractActionOptions';

To apply styles defined in a Red App to the Command Helper Button it’s neccessary to use a CssClass decorator for this custom class. To define a label for this button and an icon the Initial decorator is required.

@CssClass('com-sabre-redapp-example3-web-command-helper-button-web-module btn btn-default')
@Initial<AbstractActionOptions>({
    caption: '<i class="fa fa-edit"></i> <span class="hidden-xs dn-x-hidden-0-8">Example</span>',
})
export class StaticButton extends AbstractBootstrapPopoverButton {}
Note
 Font awesome can be used to define an icon for the button.

To define content to display inside popover for this button the getContent(): ChildComponentContent function needs to overridden in the StaticButton class. SampleComponent is a custom react component wrapped by StatlessComponent that is going to be mounted as a popup for defined Command Helper Button. There are other wrappers that can be used instead, namely StatefulComponent and StatefulComponentWithSaga.

export class StaticButton extends AbstractBootstrapPopoverButton {
    private content = new StatelessComponent(
        {
            componentName: 'SamplePopover',
            rootReactComponent: SampleComponent,
        }
    );

    protected getContent(): ChildComponentContent {
        return (this.content as ChildComponentContent);
    }
}
Note
 Detailed information about the AbstractBootstrapPopoverButton and the React component wrappers is available in TypeScript Api Documentation (sabre-ngv-UIComponents module).

Contributing button to Command Helper Bar

Red Apps can contribute their Command Helper Button via ExtensionPointService. Here is a list of all required imports for this step:

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

Then Red Apps can contribute under novice-buttons key as follows:

getService(ExtensionPointService).addConfig('novice-buttons', new WidgetXPConfig(StaticButton, -1000));

Config Properties

The following properties can be defined for config:

Property Description

widget

Descriptor of the widget to be held by config. It’s supposed to be a class that extends AbstractBootstrapPopoverButton.

prio

Config priority will determine button position in the Command Helper Bar. Buttons should be placed from left to the right starting with the one that has lowest prio value.

Example

There are two samples that showcase the usage of Command Helper Button.

com.sabre.redapp.example3.web.command.helper.button

This is a minimalistic sample that shows basics usage of Command Helper Button.

image

com.sabre.redapp.example3.desktop.form

This sample shows more advanced usage of Command Helper Button that has a form popover built using React+Redux(R+R).

image