Creating a Combobox entry in properties panel


#1

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


#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.


#3

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])
}