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:
- 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 */
- 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
- Define the helper location by pasting the following
snippet (including the comments) into the Inline Javascript section
of your coach view:
- 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:The coachViewHelper also has some properties that may be useful:
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)
- 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> }])