Editing properties panel field

Hello,

I wanted to ask how you can specify in the Properties Panel extension that the spell only contains numbers (without commas) when I do that:

{
  "name": "Magic",
  "prefix": "magic",
  "uri": "http://magic",
  "xml": {
    "tagAlias": "lowerCase"
  },
  "associations": [],
  "types": [
    {
      "name": "BewitchedStartEvent",
      "extends": ["bpmn:StartEvent"],
      "properties": [
        {
          "name": "spell",
          "isAttr": true,
          "type": "Integer"
        }
      ]
    }
  ]
}

Letters will still be accepted.

Did you check the properties panel extension example on how to create new fields for the Properties Panel?

Inside that, you can also add a validate handler to add your custom input validation. Refer to this example on how to use it.

Thanks, but somehow it doesn’t work for me.
My Code (changes in SpellProps.js):

import {
  is
} from 'bpmn-js/lib/util/ModelUtil';


export default function(group, element) {

  // Only return an entry, if the currently selected
  // element is a start event.

  if (is(element, 'bpmn:StartEvent')) {
    group.entries.push(entryFactory.textField({
      id : 'spell',
      description : 'Apply a black magic spell',
      label : 'Spell',
      modelProperty : 'spell'
    }));
    entryFactory.validate = function(element, values){
      var nodeNameValue = values.nodeName;
      var bo = getBusinessObject(element);
      var validationResult = {};
      var textError = utils.validate(element, "Integer");
      return textError ? { nodeName: textError } : {};
    };
  }
}

What this code is trying to do is to override the validate method of the entryFactory. You should include that in your new test field entry:

if (is(element, 'bpmn:StartEvent')) {
    group.entries.push(entryFactory.textField({
      id : 'spell',
      description : 'Apply a black magic spell',
      label : 'Spell',
      modelProperty : 'spell',
      validate: function(element, values) {
        var nodeNameValue = values.nodeName;
        var bo = getBusinessObject(element);
        var validationResult = {};
        var textError = utils.validate(element, "Integer");
        return textError ? { nodeName: textError } : {};
     };
    }));
}
1 Like

I have now inserted the code, but now the attribute doesn’t appear in the xml file anymore, even if I make valid inputs.
I also did the Import

import utils from 'bpmn-js-properties-panel/lib/provider/camunda/parts/ScriptTaskProps';

but nothing changes.

Do you include the utils implementation in one tab? Like it is described in the example.

The class looks the same as in the example, except that I have the code at SpellProps.

import entryFactory from 'bpmn-js-properties-panel/lib/factory/EntryFactory';

import {
  is,
  getBusinessObject
} from 'bpmn-js/lib/util/ModelUtil';
import {
  utils}
  from 'bpmn-js-properties-panel/lib/provider/camunda/parts/ScriptTaskProps';


export default function(group, element) {

  // Only return an entry, if the currently selected
  // element is a start event.

  if (is(element, 'bpmn:StartEvent')) {
    group.entries.push(entryFactory.textField({
      id : 'spell',
      description : 'Apply a black magic spell',
      label : 'Spell',
      modelProperty : 'spell',
      validate: function(element, values) {
        var nodeNameValue = values.nodeName;
        var bo = getBusinessObject(element);
        var validationResult = {};
        var textError = utils.validate(element, "Integer");
        return textError ? { nodeName: textError } : {};
     }
    }));
  }
}

Sorry, than I misunderstood what utils is. What I meant to you to ask it whether you include your SpellProps implementation in your properties-provider?

I have this line in the Provider:

import spellProps from './parts/SpellProps';

The field exists but it isn’t added to the XML Code.

can you maybe share your full project setup so that we can try to reproduce it? https://codesandbox.io/ would be one good way to share it.

Somehow it didn’t work out so well with the link. But as already mentioned, it works fine if I remove the validate function completely from the textfield, then it is also displayed in the XML code. So I guess that’s where the mistake lies.
https://github.com/TestUser-coder/bpmn-js-properties-panel-extension.git

The problem is that you can’t use utils.validate() as it’s not defined. The ScriptTaskProps do not return the validation handler. However, I do not see where this validation belongs to a “spell check”? You will have to implement the validation for your own.

I thought that textfield has validate as a function, which I have already specified. So I check the value that the textfield can take.
How can I check exactly the value now if it is integer?

What about this for the validate function:

validate: function(element, values) {
     var spell = values.spell;

     var validationErrors = {};

     if (isNaN(spell)) {
        validationErrors.spell = "It's not a number";
     }

     return validationErrors;
}

isNaN can be used for that.

2 Likes

Thank you it works!
Is there a possibility that invalid input is not inserted in the XML document?