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?