Using AngularJS helper provided in the Responsive Coaches toolkit

To aid the coach view development that is implemented in AngularJS, a set of helper functions are provided in the out-of-the-box Responsive Coaches toolkit. The helper functions are used by the out-of-the-box responsive coaches, and can be used by custom coach views that use AngularJS.

About this task

Procedure

To use this helper in your own AngularJS-based custom IBM® BPM coach view, complete the following steps.

In IBM Process Designer, open the process application that you want to work with.
Ensure that the Responsive Coaches toolkit is imported into your process application. For more information, see Importing toolkits from the Process Center console.
Create a coach view in Process Designer. For more information, see Developing reusable coach views.
Ensure that your coach view uses the IBM BPM AngularJS coach view helper. To load the helper in your coach view, complete the following steps:
1. Define the helper location by pasting the following snippet (including the comments) into the Inline Javascript section of your coach view:
```
/*
@dojoConfigUpdateStart
dojoConfig.packages.push({
name: 'com.ibm.bpm.coach.angular',
location: com_ibm_bpm_coach.getManagedAssetUrl('coachview.helper.min.zip',
com_ibm_bpm_coach.assetType_WEB, 'SYSRC')
});
@dojoConfigUpdateEnd
*/
```
2. Add the coachViewHelper as an AMD dependency to the AMD Dependencies section of your coach view:
  - ModuleID: com.ibm.bpm.coach.angular/scripts/coachViewHelper
  - Alias: coachViewHelper

Now that you have access to the AngularJS coachViewHelper in your view, use it to load your AngularJS controller and to bootstrap your view. The coachViewHelper loads the AngularJS library and several related helpers and utilities.

The coachViewHelper has several helper functions that you may use:

Table 1. Helper functions in the AngularJS `coachViewHelper`
Function	Description
coachViewHelper.loadResource	Loads the JavaScript files that you may need in your coach view. For example, you can use the coachViewHelper.loadResource function to load the JavaScript that contains your AngularJS coach view controller. This function is typically called in the load method of your coach view before the coach view is bootstrapped. Syntax `coachViewHelper.loadResource(<managed_asset_zipfilename>, <toolkit_acronym>, <relative_location_of_JSfile>, <optional_fallback_JSfile_if_first_file_cannot_be_loaded>)` Example `coachViewHelper.loadResource('myCoachViewAssets.zip', 'MCVA', '/scripts/coachView1.es.ja','/scripts/coachView1.en.ja')`
coachViewHelper.bootstrap	Bootstraps your coach view by compiling your coach view and calling your AngularJS coach view controller. Typically, this function is called at the end of your coach view's load method. Syntax `coachViewHelper.bootstrap(<reference_to_view>, <controller_name>, <optional_object_that_contains_minimum_supported_browser_versions_for_this_coachview>)` Example `coachViewHelper.bootstrap(this, 'myCoachView', {Explorer: 9})`
coachViewHelper.init	Initializes the coach view. Typically, this function is called from the coach view's view method. Syntax `coachViewHelper.init();`
coachViewHelper.notify	Informs AngularJS that something that the coach view is interested in has changed. Typically, this results in a digest of the coach view, and is called from the coach view's change method. Syntax `coachViewHelper.notify(<reference_to_view>, <reference_to_validation_event>)` Example `coachViewHelper.notify(this, event)`
coachViewHelper.validate	Informs AngularJS that there are validation events that must be shown. Typically, this results in a digest of the coach view and is called from the coach view's validate method. Syntax `coachViewHelper.validate(<reference_to_view>, <reference_to_validation_event>)` Example `coachViewHelper.validate(this, event)`
coachViewHelper.compile	Compiles all the elements on a coach. Typically, coach views do not need to call this function directly. Syntax `coachViewHelper.compile()`
coachViewHelper.compileElement	Compiles a single element and its children. Typically, coach views do not need to call this function directly. Syntax `coachViewHelper.compileElement(<reference_to_element>)` Example `coachViewHelper.compileElement(element)`
coachViewHelper.compileContentBoxes	Compiles content boxes. This function is useful if a content box was added after the page was loaded. Syntax `coachViewHelper.compileContentBoxes(<list_of_content_boxes>)` Example `coachViewHelper.compileContentBoxes(contentBoxes)`
coachViewHelper.alreadyCompiled	Checks if a given element has already been compiled. Syntax `coachViewHelper.alreadyCompiled(<reference_to_element>)` Example `coachViewHelper.alreadyCompiled(element)`

The coachViewHelper also has some properties that may be useful:

coachViewHelper.locale - Indicates the current locale that is being used
coachViewHelper.isDebug - Indicates whether the environment is in debug mode

You can add the HTML markup of your coach view to the body of a Custom HTML coach view in the Layout.

Your controller should be defined in a JavaScript file that was previously loaded using the coachViewHelper.loadResource function. It uses the same controller name as the name provided in the coachViewHelper.bootstrap function and looks similar to the following example:

angular
  .module("responsive.coaches")
  .lazy.controller(<controller_name>	, ["$scope", "$rootScope", "$element", "$timeout", "Coach", <anything_else_you_need>
	                              function ($scope, $rootScope, $element, $timeout, Coach, <variables_for_anything_else_you_need>) {
	                              
  <your_controller_content>

}])

Example

For a concrete example of how to use coachViewHelper to create a custom control, see Example: Creating a custom AngularJS progress bar coach view.