Adding Command Helper button with Popover

Creating command helper button with popover using React+Redux (R+R):

Before learning about R+R based forms in SR360 please get familiarize with React/Redux framework, Saga library and Saga Middleware concepts. Refer to below online links for more information.

React - React is mainly used for templating and rendering.

Redux - Redux for app state management and redux store per component. Please note we are NOT following a common pattern of "one store per application", please initialize your store when needed in Red App and pass this particular instance to your React view.

Sagas - For side effects management, the saga library is provided by SR360 as a default extension, please consult the official Saga docs for further assistance with middleware initialization.

1) Command Helper button:

This component allows to create a new button in command helper bar, along the "Air", "Hotels", "Car" etc. buttons.

image

First in your Main.ts file add the config using 'xp' service like

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

The button uses Sabre-ngv-UIComponents module to build a button which opens a popover containing a form, the button gets register in 'xp' ExtensionPointService (on module registration in Main.ts) and finally gets rendered in the top command helper bar alongside the "Air", "Hotel" and other buttons of the main application.

Next, Create button class like shown in example com.sabre.redapp.example3.desktop.form (StaticButton.ts).

2) Form Popover:

The content of the popover is a React application (Form) initialized with UIComponents#StatefulComponentWithSaga class. It has its own store and handles the (app)parent ⇐= (react)child communications via eventBus.

StatelessComponent, StatefulComponentWithSaga and StatelessComponent are three classes exposed for RedApp developers for general React/Redux bootstrapping.

To contribute the content to the popover, initialize the StatefulComponentWithSaga class in your button class.

private content = new StatefulComponentWithSaga( 	{
		 componentName: 'SamplePopover',
		 rootReducer,
		 rootSaga,
		 rootReactComponent: Form,
		 parentEventBus: this.eventBus
	 }
);

Component Options:

  • componentName: string; A name used in Redux dev tools to identify the store.

  • rootReducer: Reducer<State>; See redux docs.

  • rootSaga: any; See redux-saga docs.

  • rootReactComponent: React.ComponentClass<Componentprops>; Base React class to be mounted as root in ReactDOM.render().

  • componentWrapperType: string; Default 'div', but you may need to change to 'li' or 'span' or so.

  • parentEventBus: EventBus; Will be passed to Saga, use a way of bottom =⇒ top communication.

  • middlewares: Middleware[]; Optional, if you ever wanted to use a middleware to plug into Redux flow.

Please read com.sabre.redappp.example3.desktop.form sample documentation for detail step by step procedure to create the button and form popover.