Breadcrumb
- Sabre Red 360 Software Development Kit Help
- Web Red Apps
- UI Contributions
- Command Helper Button
Command Helper Button
The business purpose of Command Helper Button is to add a button with popover to the Command Helper Bar.

Contributing
There are two steps to contributing custom Command Helper Button to Command Helper Bar:
-
Create class that describes Command Helper Button and a React component that will be used as a popover content.
-
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 |
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 |
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.
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).