Modeller new task type with choice property

[dave_stanley]

I am extending the modeller (5.17) with a new task type one of the properties I need is a choice however I do not seem to be able to get it to display.

In the console I get "WARNING: no property configuration defined for oryx-[myfieldID] of type choice" from line 295 of stencil-controller.js which is looking at properties.js which does not define a choice type.

can anyone provide an example of how I can create a select element for the properties panel of the Angularjs interface and define a choice type?

[yvoswillens]

Hi Dave,

Did you create a matching Angular property controller?
(These are located in "activiti-webapp-explorer2/src/main/webapp/editor-app/configuration/properties")

Regards,

Yvo

[dave_stanley]

Not yet I was hoping someone had an example rather than heading in blind i can write the html control but am new to Angular and not sure how to populate the options from the stencil items

[dave_stanley]

Ok sorted I have made the following changes and all seems to be working
added configuration/properties/choice-property-write-mode-template.html
<code>
<div ng-controller="KisBpmSelectPropertyCtrl">
    <select ng-model="property.value"
     class="form-control"
        ng-focus="true"
        ng-focus-lost="inputBlurred()"
        ng-options="item.value() as item.title() for item in property.items">
    </select>
</div>
</code>

added a "choice" member to KISBPM.PROPERTY_CONFIG in properties.js
<javascript>
"choice": {
        "readModeTemplateUrl": "editor-app/configuration/properties/default-value-display-template.html",
        "writeModeTemplateUrl": "editor-app/configuration/properties/choice-property-write-mode-template.html"
    }
</javascript>

added an "items" to the currentProperty Object around line 307 of stencil-controller.js

<javascript>
var currentProperty = {
     'key': key,
     'title': property.title(),
     'type': property.type(),
     'mode': 'read',
     'hidden': property.isHidden(),
     'value': selectedShape.properties[key],
    'items'roperty.items()
</javascript>

finally added a new controller to properties-default-controllers.js although you could probably use the KisBpmStringPropertyCtrl

<javascript>
var KisBpmSelectPropertyCtrl = ['$scope', function ($scope) {
    $scope.shapeId = $scope.selectedShape.id;
$scope.valueFlushed = false;
    /** Handler called when input field is blurred */
    $scope.inputBlurred = function() {
     $scope.valueFlushed = true;
        $scope.updatePropertyInModel($scope.property);
    };
    $scope.$on('$destroy', function controllerDestroyed() {
     if(!$scope.valueFlushed) {
      $scope.updatePropertyInModel($scope.property, $scope.shapeId);
     }
    });
}];
</javascript>

[jbarrez]

That looks allright. Thanks for posting back!

[jrnorrisjr]

Once the above changes are in place how is the choice property used?  I tried adding a priority property to stencilset.json using:

<code>
    {
        "name" : "priorityListPackage",
        "properties" : [{
            "id": "priorityList",
            "type": "choice",
            "title": "Priority List",
            "value": "Medium",
            "description": "Select a priority item from the list",
            "popular" : true,
            "items": [
                {
                    "title":"Low",
                    "value":"Low",
                    "id":"1"
                },
                {
                    "title":"Medium",
                    "value":"Medium",
                    "id":"2"
                },
                {
                    "title":"High",
                    "value":"High",
                    "id":"3"
                }
            ]
        }]
    },
</code>

Then to test the choice property type I added the prioritypackage to the usertask activity in stencilset.json to test the list property:

<code>
    "propertyPackages" : [ "overrideidpackage", "namepackage", "documentationpackage", "priorityListPackage", "asynchronousdefinitionpackage", "exclusivedefinitionpackage", "executionlistenerspackage", "multiinstance_typepackage", "multiinstance_cardinalitypackage", "multiinstance_collectionpackage", "multiinstance_variablepackage", "multiinstance_conditionpackage", "isforcompensationpackage", "usertaskassignmentpackage", "formkeydefinitionpackage", "duedatedefinitionpackage", "prioritydefinitionpackage", "formpropertiespackage", "tasklistenerspackage" ],
</code>

When I add a user task and select the node I do not see the new property.  Am I missing something else that needs to be done?

Regards,
Jim

[jrnorrisjr]

Never mind my last post.  We are using the activiti engine and dynamically generating the stencil set.  I made the same changes to Activiti Explorer and the select list works using the above modifications.

[zivm]

Can you explain how did you solve the problem?what changes did you make in activiti explorer?, i have the same requirement and i'm also planning to dynamically generating the stencil set.
Thanks.
Ziv.

[serena_onorati]

Hi,
I followed this tutorial and all it's right, but when i change "items" in "metrics" for example, nothing works.
I'm new with angularjs.
How should i do?

In stencilset.json i have this:
{
    "name" : "metricListPackage",
    "properties" : [{
        "id": "metricList",
        "type": "choice",
        "title": "Metric List",
        "value": "Medium",
        "description": "Select a priority item from the list",
        "popular" : true,
        "metrics": [
            {
                "title":"Low",
                "value":"Low",
                "description": "this is low velocity",
                "id":"1"
            },
            {
                "title":"Medium",
                "value":"Medium",
                "description": "this is medium velocity",
                "id":"2"
            },
            {
                "title":"High",
                "value":"High",
                "description": "this is high velocity",
                "id":"3"
            }
        ]
    }]
    }

in choice-property-write-mode-template.html I add:
<div ng-controller="KisBpmSelectPropertyCtrl">
    <select ng-model="property.value"
        class="form-control"
        ng-focus="true"
        ng-focus-lost="inputBlurred()"
        ng-options="metric.name() for metric in property.metrics">
    </select>
</div>

and in stencil-controller.js

var currentProperty = {
                                'key': key,
                                'title': property.title(),
                                'type': property.type(),
                                'mode': 'read',
                                'hidden': property.isHidden(),
                                'value': selectedShape.properties[key],
                                'metrics': property.metrics()
                            };
I left other pieces of code same.
Thanks in advance!