Hi there,
Im trying to modify properties panel in order to have dynamic fields.
At the moment i have a select box where options are retrieved from an ajax request - that is working 100% ok.
What i need now is that according to the option selected, generate the corresponding text input fields (can be 0, 1, 2 or more - is specified in the ajax request).
Is this possible? If so, how?
Thanks.
Conditionally showing fields is commonly used in the properties panel. An example is Asynchronous Continuations. You can specify a function to determine if a field is hidden the same way you can specify how a fields value is get and set.
I’ll look into that, thanks.
Will give feedback if that was what i needed!
Probably i didn’t properly explain my use case.
I have an ajax request to populate a select box with unknown number of values, that is perfect.
That ajax request also gives me a list of needed parameters to be inserted in the bpmn definition (in the properties panel definition i wont know how many or which to enter - therefore i can’t define when to show what because i won’t know it).
For example:
Selectbox:
When designing the bpmn diagram, the user selects option A, therefore no inputs will appear after the selectbox. But if he selects option B, there should appear two text inputs (with label “Name(string)” and “Number(int)”).
Well, at the moment i’m already able to make inputs appear based on the option selected.
The problem now is to have those inputs appear when a bpmn file is imported to the editor.
In that file (also generated by the editor) i have a service task defined like this:
<bpmn2:serviceTask id="Task_067faim" activiti:async="true" activiti:class="java.class.fake.name">
<bpmn2:extensionElements>
<activiti:field name="operation" stringValue="SET_USER">
<activiti:expression id="user" name="user">${variableName}</activiti:expression>
<activiti:expression id="contact" name="contact">${otherVariableName}</activiti:expression>
</activiti:field>
</bpmn2:extensionElements>
[...]
</bpmn2:serviceTask>
This generates the select box (which modelProperty is stringValue - the field!) but wont generate the inputs based on the expressions (Called parameters in the descriptor). It reads the file properly because i can read the expressions and im printing them in the console and im able to generate the elements for it but i haven’t figured out how to add them to the group.entries.
In the selectbox get() i have:
if(operation.parameters.length>0){
for(var param in operation.parameters) {
var options = {
id: 'op-parameter-' + operation.parameters[param].name,
modelProperty: "expression",
label: translate(operation.parameters[param].name)
};
parameter_entries.push(paramTextField(options, operation, name, bpmnFactory));
}
console.log(parameter_entries);
parameter_entries.forEach(function (elem) {
group.entries.push(elem);
});
}
paramTextField is an entryFactory.textField (this is working otherwise the editor wouldn’t generate the bpmn desired)
Therefore the problem is in the selectbox/operation get(), that doesn’t recognize group.entries or isn’t allowed to add entries in the group.
Any suggestion or is it related to this issue?
Solved.
Edit:
I will try to keep this simple, but in order to get the inputs of the selectbox selected value i had to create all of the inputs before that selection, i got to this solution by creating those fields all in selectOptions (paramTextField is the function where i create the textField).
selectOptions: function (element, node) {
parameter_entries = [];
var arrValues = [];
$.ajax({
url: "urlOfMyRequest",
method: "GET",
dataType: "xml",
success: function (result) {
$(result).find("list ").children().each(function (idx, elem) {
var aux = $(elem).find("code")[0].innerHTML, name = "";
var field = elementHelper.createElement('activiti:Field', {
name: "op",
stringValue:aux
}, extensionElements, bpmnFactory);
$(elem).children().last().first().children().each(function (idx, eleme) {
name = $(eleme).find("name")[0].innerHTML;
var options = {
id: 'parameter-' + name,
modelProperty: "value",
label: translate(name),
hidden: function(element, node) {
return selectedOp !== aux;
}
};
parameter_entries.push(paramTextField(options, name, bpmnFactory));
});
arrValues.push({name: aux, value: aux});
});
},
async: false
});
return arrValues;
},
setControlValue: true
As you can see i use a “control var” (selectedOp) to make sure the inputs stay hidden unless the selected option in the select box is the corresponding one.
I set the value of the var in the “get” part of the selectBox (this will allow the properties panel to set the variable either in the user input or in a file import).
I dont think i need to share the code of the inputs, but keep in mind i still have 1 problem: the inputs will only appear in the property panel after the 2nd click in the corresponding task - trying to figure that out.
Note: i had to refactor the code (change var names etc).
That would be awesome!