Hi @nikku ,
I am trying to add a combox entry into properties panel where I can search for options (Implementation using Angular6). Is there any example(Javascript, Angular 1.x, Angular2+) which I can take as a reference to do the same. Also I tried a one similar as in the below link but I am unable to resolve dependency issues inside those.
});
if (existingFormField) {
return { id: 'Form field id already used in form data.' };
}
}
}
}));
// [FormData] form field type combo box
group.entries.push(entryFactory.comboBox({
id: 'form-field-type',
label: translate('Type'),
selectOptions: [
{ name: 'string', value: 'string' },
{ name: 'long', value: 'long' },
{ name: 'boolean', value: 'boolean' },
{ name: 'date', value: 'date' },
{ name: 'enum', value: 'enum' }
],
modelProperty: 'type',
Thanks,
Pramod
nikku
March 27, 2019, 12:48pm
2
What exactly did you try to do? Please share a code snippet that shows where you got stuck and we may be able to help you.
Hi @nikku Please find the below code. I added my dependency list and the list of methods that I used in the below code:
Modeler from 'bpmn-js/dist/bpmn-modeler.production.min.js';
PropertiesPanelModule from 'bpmn-js-properties-panel';
BpmnPropertiesProvider from 'bpmn-js-properties-panel/lib/provider/bpmn';
EntryFactory from 'bpmn-js-properties-panel/lib/factory/EntryFactory';
PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider';
ModelUtil from 'bpmn-js/lib/util/ModelUtil';
CmdHelper from 'bpmn-js-properties-panel/lib/helper/CmdHelper';
ElementHelper from 'bpmn-js-properties-panel/lib/helper/ElementHelper';
FormProps from 'bpmn-js-properties-panel/lib/provider/camunda/parts/FormProps';
ExtensionElementsHelper from 'bpmn-js-properties-panel/lib/helper/ExtensionElementsHelper';
FormHelper from 'bpmn-js-properties-panel/lib/helper/FormHelper';
ExtensionElements from 'bpmn-js-properties-panel/lib/provider/camunda/parts/implementation/ExtensionElements';
Utils from 'bpmn-js-properties-panel/lib/Utils';
getSelectBox(node, id) {
var currentTab = domClosest(node, 'div.bpp-properties-tab[data-tab=node_task_properties]');
var query = 'select[name=Datasource]' + (id ? '[id=camunda-form-field-datasource-select]' : '');
return domQuery(query, currentTab);
}
getSelected(node, id) {
var selectBox = this.getSelectBox(node, id);
return {
value: (selectBox || {}).value,
idx: (selectBox || {}).selectedIndex
};
}
getSelectedFormField (element, node) {
var selected = this.getSelected(element, node.parentNode);
if (selected.idx === -1) {
return;
}
return FormHelper.getFormField(element, selected.idx);
}
filterDatasources(datasources, viperobject) {
var filteredDatasources = [];
datasources.forEach((a) => {
if (a.name !== viperobject.name) {
filteredDatasources.push(a);
}
});
return filteredDatasources;
};
getSelectOptions(datasources) {
var selectoptions = [];
datasources.forEach(function(a) {
selectoptions.push({ name: a.name, value: a.name });
});
return selectoptions;
};
getTabs(element: any) {
var viperobject = ModelUtil.getBusinessObject(element);
var filterdDatasources = this.filterDatasources(this.serviceList , viperobject);
this.datasourceOptions = this.getSelectOptions(filterdDatasources);
elementSet = [{
id: 'node_task_properties',
label: this.translate('Task \n Properties'),
groups: [
{
id: 'node_group',
label: this.translate(''),
entries: [
EntryFactory.comboBox({
id: 'form-field-datasource',
label: 'Datasource',
selectOptions: this.datasourceOptions,
modelProperty: 'Datasource',
emptyParameter: true,
get: (element, node) => {
var selectedFormField = this.getSelectedFormField(element, node);
if (selectedFormField) {
return { Datasource: selectedFormField.Datasource };
} else {
return {};
}
},
set: (element, values, node) => {
var selectedFormField = this.getSelectedFormField(element, node),
commands = [];
// ModelUtil.getBusinessObject(element)
commands.push(CmdHelper.updateBusinessObject(ModelUtil.getBusinessObject(element), selectedFormField, values));
return commands;
},
hidden: (element, node) => {
return false;
}
})
]
}
]
}]
return this.bpmnPropertiesProvider.getTabs(element).concat(elementSet[0])
}
Hello !!
I have a bpmn editor I created with Vue.js. I want to add a properties panel. I’m new and I have no idea how to do it. How to add Bpmn properties panel ?
import { Modeler, OriginalPropertiesProvider, PropertiesPanelModule, InjectionNames, OriginalPaletteProvider } from "../../../../shared/config/bpmn-js/bpmn-js";
this.modeler = new Modeler({
container: "#canvas",
width: modellerConfig.width,
height: modellerConfig.height,
additionalModules: [
PropertiesPanelModule,
// Re-use original bpmn-properties-module, see CustomPropsProvider
{ [InjectionNames.bpmnPropertiesProvider]: ["type", OriginalPropertiesProvider.propertiesProvider[1]] },
{ [InjectionNames.propertiesProvider]: ["type", CustomPropsProvider] },
// Re-use original palette, see CustomPaletteProvider
{ [InjectionNames.originalPaletteProvider]: ["type", OriginalPaletteProvider] },
{ [InjectionNames.paletteProvider]: ["type", CustomPaletteProvider] },
],
propertiesPanel: {
parent: "#properties"
},
moddleExtension: {
custom: customModdle
}
});
bpmn-js.ts
import * as _Modeler from "bpmn-js/dist/bpmn-modeler.production.min.js";
import * as _BpmnPropertiesProvider from 'bpmn-js-properties-panel/lib/provider/bpmn';
import _PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider';
export const InjectionNames = {
propertiesProvider: 'propertiesProvider',
bpmnPropertiesProvider: 'bpmnPropertiesProvider',
paletteProvider: 'paletteProvider',
originalPaletteProvider: 'originalPaletteProvider'
};
export const Modeler = _Modeler;
export const OriginalPaletteProvider = _PaletteProvider;
export const OriginalPropertiesProvider = _BpmnPropertiesProvider;
You can use the following github repo as a reference:
How can I add the reference in my project?