Application Manager

The application manager is the core of your application. It is what ties each piece together and allows you to use all functionality from everywhere. By default, however, it doesn't look like it does a lot:

export class MyAppManager extends ClientManager {

    public store: MyAppStore;
    public rest: MyAppRestClient;

    constructor(
        appContainer: string,
        defaultView: string,
        config: AppConfig,
        views: ViewRegistrations,
        appClasses: AppClasses,
        handlers: HandlerClasses
    ) {

        super(appContainer, defaultView, config, views, appClasses, handlers);
    }
}

There's not a lot there. That's because it's all hidden away from you in the ClientManager class. Your application manager is yours alone and should be extended to suit your application. Generally, you keep functions on this that need to accessible from a range of different places. Components and Handlers both have access to the manager, so you can use this to store your general functions.

An example of this may be a login function. You may want to call login() from a component because that's how the user will log in after entering their username and password.

Your app may also have some kind of reconnection logic that handles reconnecting after a connection is dropped. This may live in a handler, but it also needs to go through the login function to re-establish itself.

Therefore, placing this function in the manager is an ideal place. From the manager the function will have access to everything; including your store and rest-client.

What does the Manager do?

The manager is responsible for bootstrapping the application. On your application's start up, the manager will setup all the required features of your app. This includes things like the store, rest-client and your handlers for event listening. Bootstrapping is usually automatic but will be deferred if you are running inside of a CTI app. In this instance, you will need to bootstrap yourself by calling: manager.triggerBootstrap();.

This all takes place when you run this line of code (found in the root index.ts):

window.MyAppManager = new MyAppManager("body", "view-login", appConfig, MyAppViews, myAppCustomClasses, myAppHandlers);

Available Methods

By default, the manager exposes the following:

manager.on: void

Allows you to bind and listen to events.

Args

1. key (string): The event name to listen to.

2. handler (any): The function to call when the event is emitted.

3. global (boolean - default: false): If false the listener function is unloaded when switching to another view, otherwise the listener must be manually unloaded.

Example:

this.manager.on("my-custom-event", () => alert("My Custom Event Hit!"));

manager.emit: void

Emit an event and call any specified listeners.

Args

1. key (string): The event name to emit.

2. data (any): Any data that needs to be passed with the event.

Example:

this.manager.emit("my-custom-event", "Some data to be sent");