Creating a Combobox entry in properties panel

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.

Thanks,
Pramod

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?

Thank you!! @Pramod_Maringanti