I’m trying to render a new selectbox with values based on the selection of the previous selectbox. This works the first time, but when I update the value of the first selectbox the list of values from the second selectbox doesn’t change. My guess is that I have to push the selectbox again, but I couldn’t really figure out how. Maybe there is a better solution like a onChange function?
This is my current code:
group.entries.push(entryFactory.selectBox(translate, {
id: 'component',
description: '',
label: 'Component',
selectOptions: selectComponents,
modelProperty: 'component'
}));
if (element.businessObject.component) {
methods = (components.filter(value => value.name === element.businessObject.component)[0].methods);
if (methods.length > 0) {
console.log(methods.length)
methods.forEach(value => {
const option = {
name: value.name,
value: value.name
};
if (!selectmethods.some(test => test.name === option.name)) {
selectmethods.push(option);
}
});
const methodSelectBox = entryFactory.selectBox(translate, {
id: 'method',
description: '',
label: 'Method',
modelProperty: 'method',
selectOptions: selectmethods
});
group.entries.push(methodSelectBox);
}
}
code explanation:
When I select a component in the first selectbox a receive a list with methods. These methods are added to the selectOptions list and a new selectbox is added to the property panel. This works great the first time, but when I change the component the list does update but not inside of the property panel.