Create a Tooltip in Alfresco Process Services Forms

Document created by cjose Employee on Oct 31, 2017Last modified by cjose Employee on Oct 31, 2017
Version 2Show Document
  • View in full screen mode

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

 

      

      

1 person found this helpful

Attachments

    Outcomes