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.
<script src="../libs/ui-bootstrap-tpls-2.5.0/ui-bootstrap-tpls-2.5.0.min.js"></script>
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);
}
});
}
<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>
Stencil Configuration
Form Designtime
Form Runtime
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Alfresco Hub documents relating to Alfresco Process Services and Activiti.
By using this site, you are agreeing to allow us to collect and use cookies as outlined in Alfresco’s Cookie Statement and Terms of Use (and you have a legitimate interest in Alfresco and our products, authorizing us to contact you in such methods). If you are not ok with these terms, please do not use this website.