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 out-of-the-box responsive coaches use these helper functions and so can custom coach views that use AngularJS.

To use the helper functions in your own AngularJS-based custom Business Automation Workflow coach view, complete the following steps.

1. In IBM® Process Designer, open the process application that you want to work with.
2. Ensure that the process application has a dependency on the Responsive Coaches toolkit. For more information, see Creating, changing, and deleting a toolkit dependency in the Designer view.
3. Create a coach view in Process Designer. For more information, see Developing reusable views.
4. To load the coach view helper functions:
   1. Define the location of the AngularJS helper functions 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 coachViewHelper as an AMD dependency to the AMD Dependencies section of your coach view:
      • ModuleID: com.ibm.bpm.coach.angular/scripts/coachViewHelper
      • Alias: coachViewHelper
5. Now that you have access to coachViewHelper module in your view, use it to load your AngularJS controller and to bootstrap your view. The coachViewHelper module loads the AngularJS library and several helper functions.
   The coachViewHelper has the following helper functions:

   Table 1. Helper functions in coachViewHelper

   Function	Description
   coachViewHelper.loadResources	Forces the load of all JavaScript files that are loaded using the coachViewHelper.loadResource function. Typically you use this function in coach view preview handler only and you do not need to call it the coach view load method. Syntax coachViewHelper.loadResources()
   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>, <module_name>, <controller_name>, <optional_object_that_contains_minimum_supported_browser_versions_for_this_coachview>) Example coachViewHelper.bootstrap(this, 'responsive.coaches', '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
6. You can add the HTML markup of your coach view to the body of a Custom HTML coach view in the Layout.
7. 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")
     .controller(<controller_name> , ["$scope", "$element", "$timeout", "Coach", <anything_else_you_need>
     function ($scope, $element, $timeout, Coach, <variables_for_anything_else_you_need>) { 
    
     <your_controller_content>
   
   }])