Create a Tooltip in Alfresco Process Services Forms

[cjose]

This article will show how to use the stencil feature in Alfresco Process Services powered by Activiti to implement a tooltip in forms. I'll be using the Tooltip directives from Angular UI Bootstrap component for this implementation.

1. Download the javascript library from Angular directives for Bootstrap.
2. Copy the downloaded file "ui-bootstrap-tpls-2.5.0.min.js" to your APS web app "activiti-app/libs/ui-bootstrap-tpls-2.5.0/ui-bootstrap-tpls-2.5.0.min.js" 
3. Include this library in "activiti-app/workflow/index.html" as shown below

   <script src="../libs/ui-bootstrap-tpls-2.5.0/ui-bootstrap-tpls-2.5.0.min.js"></script>‍‍‍‍

4. Open the resource loader (activiti-app/scripts/resource-loader.js) file and include this dependency prior to bootstrap as shown below. Line# 10-13 is all I added.

   for (var i = 0, il = res.length; i < il; i++) {
           load(res[i], resourceLoaderElement, function(){
               loadedResources++;
               if (loadedResources == res.length) {
                   // Let angular resume bootstrap
                   var interval = window.setInterval(function(){
                       if (angular && typeof angular.bootstrap == 'function') {
                           angular.element(document.body).ready(function() {
                               // Add custom module dependencies
                               if(angularModuleName == "activitiApp"){
                                   angular.module(angularModuleName).requires.push("ui.bootstrap.tooltip");
                               }
                               // angular, all of our resources & the document body are ready, lets bootstrap the app
                               angular.bootstrap(document.body, [angularModuleName]);
                           });
                           window.clearInterval(interval);
                       }
                   }, 20);
               }
           });
       }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

5. Now we need to update the form-element template to show this tooltip. For example, if you want to show the tooltip on a text field, open the activiti-app/workflow/views/templates/form-element-template.html and add lines 6-9 shown below to the file. For more details on the usage please refer Angular directives for Bootstrap 

   <div ng-switch-when="text" class="form-group {{field.className}}" ng-show="field.isVisible" ng-class="{'has-error': field.required && isEmpty(field)}">
           <label class="control-label">{{field.name}}</label>
           <span class="marker" ng-if="field.required">*</span>
           <input id="{{activitiFieldIdPrefix + field.id}}" type="text" name="{{field.id}}" class="form-control" placeholder="{{field.placeholder}}" ng-model="field.value" ng-change="onFieldValueChange(field)" ng-blur="onFieldBlur(field)" ng-focus="onFieldFocus(field)"
            
                  uib-tooltip="{{field.params.customProperties.tooltip}}"
                  tooltip-placement="'top'"
                  tooltip-trigger="'focus'"
                  tooltip-enable="true"
            
                  ng-required="field.required"
                  ng-minlength="field.minLength || ''"
                  ng-maxlength="field.maxLength || ''"
                  maxlength="{{field.maxLength || ''}}"
                  ng-pattern="field.regexPattern || ''"
                  ng-model-options="{ allowInvalid: true }"
                  masked-input="{{field.params.inputMask}}"
                  masked-input-placeholder="{{field.params.inputMaskPlaceholder}}"
                  masked-input-reversed="{{field.params.inputMaskReversed}}">
       </div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

6. Now import my example app into APS via App Designer (Kickstart App) -> Apps -> Import App. Once the “App” is successfully imported, the stencil along with an example process and form will also get imported which will make it easy for you to see this examples in action! Given below are some screenshots of stencil, form design time and form runtime. For more details on stencil configuration and form configuration please check the imported stencil and process form.

Stencil Configuration

Form Designtime

      Form Runtime