activiti web designer 工作流设计器自定义输入显示控件
editor-app/configuration/properties.js
增加：
|
1 2 3 4 |
"pandy-form-select": { "readModeTemplateUrl": "editor-app/configuration/properties/custom/form-select-display-template.html", "writeModeTemplateUrl": "editor-app/configuration/properties/custom/form-select-write-mode-template.html" } |
resources/stencilset.json.en
找到要修改的控件，比如Form Key要变成可以选择的下拉框，那么找到
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "name" : "formkeydefinitionpackage", "properties" : [ { "id" : "formkeydefinition", "type" : "String", //要该成这里成==>pandy-form-select "title" : "Form key", "value" : "", "description" : "Form key that provides a reference to a form.", "popular" : true } ] } |
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "name" : "formkeydefinitionpackage", "properties" : [ { "id" : "formkeydefinition", "type" : "pandy-form-select", "title" : "Form key", "value" : "", "description" : "Form key that provides a reference to a form.", "popular" : true } ] } |
复制字符串的末扮文件，得到新模板：
default-value-display-template.html ==> editor-app/configuration/properties/custom/form-select-display-template.html
string-property-write-mode-template.html ==> editor-app/configuration/properties/custom/form-select-write-mode-template.html
最后进行修改成自己想要的控件
form-select-display-template.html
|
1 2 3 |
<span ng-if="!property.noValue">{{property.value|limitTo:20}}</span> <span ng-if="!property.noValue && property.value != null && property.value.length > 20">...</span> <span ng-if="property.noValue" translate>PROPERTY.EMPTY</span> |
方式１：这种方式很无奈，是因为自己还没学angularjs，所以不得不这么做．
form-select-write-mode-template.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div ng-controller="KisBpmStringPropertyCtrl"> <select _id="custom_form" style="height: 28px; width: 90%;" ng-model="property.value"></select> <label _id="custom_form_val" style="display: none;">{{property.value}}</label> <script type="text/javascript"> var selectEle = jQuery("select[_id=custom_form]"); selectEle.empty(); jQuery.ajax({ type: "post", contentType: "application/json; charset=utf-8", datatype: "json", url: ACTIVITI.CONFIG.activitiContextRoot+"/getAllCustomForms.do", data: "{}", success: function (context) { selectEle.append('<option value="">不选择</option>'); jQuery.each(context.data.formList, function (i) { selectEle.append('<option value="'+this.code+'">'+this.name+'</option>'); }); var custom_form_val = jQuery("label[_id=custom_form_val]").text(); selectEle.val(custom_form_val); } }); </script> </div> |
方式２：使用angularjs方式：修改下拉框
|
1 2 3 4 5 6 |
<div ng-controller="KisBpmFormKeyPropertyCtrl"> <select ng-model="property.value" style="height: 28px; width: 90%;"> <option value="">请选择下面的表单</option> <option ng-repeat="x in formList" value="{{x.code}}" ng-selected="x.code == property.value">{{x.name}}</option> </select> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
var KisBpmFormKeyPropertyCtrl = [ '$scope', function ($scope) { console.log("初始化自定义表单数据="+$scope.property.value); $scope.shapeId = $scope.selectedShape.id; $scope.valueFlushed = false; jQuery.ajax({ type: "post", contentType: "application/json; charset=utf-8", datatype: "json", url: ACTIVITI.CONFIG.activitiContextRoot+"/getAllCustomForms.do", data: "{}", success: function (context) { $scope.$apply(function() { $scope.formList = context.data.formList; }); } }); /* //值变化事件 $scope.changeFun = function() { $scope.valueFlushed = true; if ($scope.property.value) { $scope.property.value = $scope.property.value.replace(/(<([^>]+)>)/ig,""); } $scope.updatePropertyInModel($scope.property); }; //得到焦点事件 $scope.inputBlurred = function() { $scope.valueFlushed = true; if ($scope.property.value) { $scope.property.value = $scope.property.value.replace(/(<([^>]+)>)/ig,""); } $scope.updatePropertyInModel($scope.property); };*/ $scope.$on('$destroy', function controllerDestroyed() { if(!$scope.valueFlushed) { if ($scope.property.value) { $scope.property.value = $scope.property.value.replace(/(<([^>]+)>)/ig,""); } $scope.updatePropertyInModel($scope.property, $scope.shapeId); } }); }]; |
