Hooks

The hooks are responsible for the initialization of the app and its plugins. Hooks consist of functions and arrays of exported functionality. They define what a plugin provides, or adds, to the app UI. These functions and arrays are accessed by key name that are specific for the app, they are:

###Arrays:

• pluginStructure
• pluginMenus
• pluginRoutes

###Functions

• initFramework

The 3 arrays are used for angular 2.x functionality while the single function for angular 1.x functionality. Please Note. The current versions of Typescript and JSPM used do not allow for magic import and exports i.e variables that may exist or not exist. Hence, the need to explicitly declare any of the four exports in the hook.ts file as shown below

export const pluginStructure = [];
export const pluginRoutes = [];
export const pluginMenus = [];
export function initFramework(app:any) {}

pluginStructure

This is an array of classes that define the angular 2.x components, services and other functionalities to inject to main component bpmApp. They are classes that are not part of any other component or used to create a route within the plugin. Once included as an item in this array they will be made available in the global scope of the application.

An Angular 2.x component for a NavbarComponent would be included in the global scope by:

• Importing the component in the current file.

import {NavbarComponent} from './path/to/navbar/component';

• Including the class name in the pluginStructure array

export const pluginStructure = [
	NavbarComponent
];

pluginRoutes

This is an array containing objects that define Angular 2.x router paths. The structure of an Angular 2.x route contains the keys' path and component. Remember to import all component classes to be used in the paths.

The example below shows a single route object that would display the about page when a user browses to /about:

export const pluginRoutes = [
    {
        path: '/about',
        component: AboutComponent
    }
];

pluginMenus

This is an array of objects that define menu items that are going to be displayed on the top Navbar.

Please note, arrangement of the menu items is not yet implemented and since the angular upgrade adapter loads in async the arrangement changes with each deployment. A menu item is made up of a display value, path the menu item points to and whether to be placed on the left or right side. At the moment the right side is reserved for menu items displayed when there is no logged in user, ie. register & login.

Example shows two menu items

export const pluginMenus = [
	{
		display: 'ABOUT',
		path: '/about',
		type: 'left'
	},
	{
		display: 'Login',
		path: '/login',
		type: 'right'
	}
];

The main admin ui defines an angular 2.x Navbar component that simply loops through the values in menus array.

initFramework

This is a function that accepts an initialized version of Angular 1.x with the main Angular module. The initialized module is used to define components, directives, filters, config and run functions. Its responsible for bootstrapping the main angular components.

The example below defines two Angular 1.x components. The classes are imported and passed as the second argument when creating a component:

export function initFramework(app:any) {
	app.component('bpmNodes', nodesComponents);
	app.component('bpmSchemaTree', schemaTreeComponents);
}

Its the only key export in hooks.ts file that needs to be defined in our definitions.json file under the key ui-hooks as shown below

"ui-hooks": [
   {
      "name": "initFramework",
      "description": "Called when initialising the Angular controllers and directives",
      "parameters": [
           "app"
      ]
   }
 ],

This ensures that the function is included for the specific plugin. Its a functionality that is dependent on angular 1.x once app is fully upgraded to 2.x it will no longer be needed.

Hook Wrapper

Each plugin has to specify its own hooks.ts file. The api backend processes all these files and consolidates all exports in the individual plugin files. The variables are joined into one variable under its key. The variables are accessed from a single point of reference under hook_wrapper.ts To use simply import export key from hook_wrapper.

import { pluginStructure } from '/admin/hook_wrapper';
import { pluginRoutes } from "/admin/hook_wrapper";

The path is prefixed /admin since the main app is responsible for providing wrap functionality.