Using AngularJS helper provided in the Responsive Coaches toolkit

To use the helper functions in your own AngularJS-based custom Business Automation Workflow 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 Modifying toolkit dependencies.
3. Create a view in Process Designer. For more information, see Developing reusable views.
4. To load the 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 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 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 view preview handler only, and you do not need to call it in the view load method. Syntax coachViewHelper.loadResources()
   coachViewHelper.loadResource	Loads the JavaScript files that you may need in your view. For example, you can use the coachViewHelper.loadResource function to load the JavaScript that contains your AngularJS view controller. This function is typically called in the load method of your view before the 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 view by compiling your view and calling your AngularJS view controller. Typically, this function is called at the end of your 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 view. Typically, this function is called from the view's view method. Syntax coachViewHelper.init();
   coachViewHelper.notify	Informs AngularJS that something that the view is interested in has changed. Typically, this results in a digest of the view, and is called from the 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 view and is called from the 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, views do not need to call this function directly. Syntax coachViewHelper.compile()
   coachViewHelper.compileElement	Compiles a single element and its children. Typically, 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 coach or 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 view to the body of a Custom HTML 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>
   
   }])