CustomWidget won't accept input

Q&A
1

Hi All,

I’m creating a very simple widget, which is just a text input with a ng-pattern tag:

<div ng-class="{
'form-horizontal': properties.labelPosition === 'left' && !properties.labelHidden,
'row': properties.labelPosition === 'top' && !properties.labelHidden || properties.labelHidden
}">
<div class="form-group">
    <label
        ng-if="!properties.labelHidden"
        ng-class="{ 'control-label--required': properties.required }"
        class="control-label col-xs-{{ !properties.labelHidden && properties.labelPosition === 'left' ? properties.labelWidth : 12 }}"
        ng-bind-html="properties.label | uiTranslate">
    </label>
    <div class="col-xs-{{ 12 - (!properties.labelHidden && properties.labelPosition === 'left' ? properties.labelWidth : 0) }}">
        <input
            type="text"
            class="form-control"
            placeholder="{{ properties.placeholder | uiTranslate }}"
            ng-model="properties.value"
            name="{{ctrl.name}}"
            ng-required="properties.required"
            maxlength="{{ properties.useDots ? '12' : '10' }}"
            minlength="{{ properties.useDots ? '12' : '10' }}"
            ng-pattern="/^{{ properties.useDots ? '[0-9]{2}.[0-9]{3}.[0-9]{3}-[0-9|k|K]{1}' : '[0-9]{8}-[0-9|k|K]{1}' }}$/">
        <div ng-messages="$form[ctrl.name].$dirty && $form[ctrl.name].$error" ng-messages-include="forms-generic-errors.html" role="alert">
        </div>
    </div>
</div>

The value property is declared as follows:

...
  }, {
    "label" : "Value",
    "name" : "value",
    "caption" : "Any variable: <i>myData</i> or <i>myData.attribute</i>",
    "help" : "Read-write binding, initialized or updated by users' input (bi-directional bond)",
    "type" : "text",
    "bond" : "variable"
  } ],
...

Problems:

  1. In the designer, the variable I enter in the value property is not shown with the ‘data:’ prefix as in other widgets, just the variable name.
  2. In preview mode and in runtime, the field is displayed with the variable name as value. I cannot modify it.
  3. If I remove the ng-model attribute, it works, but the user input is not stored, obviously (there is no Angular model reference to update).

Im using Bonita Community Edition version 7.5.4.

Thanks in advance.