Properties Panel entries for document level

Developers General
1

Hi there! I am new to BPMN and loving it so far. I am adding custom data to the properties panel for elements. I now want to add custom document-level properties. For example, I want to store a URL or path information in an attribute at the top level, or best non-element level. I already have a set of custom properties for elements, but not non-elements. Any help would be appreciated.

2

We’re glad you’re enjoying bpmn.io :heart:

Can you share some sketches, screenshots or runnable CodeSandbox examples of what you are trying to achieve? It’s hard to understand from just the text.

3

Thanks, @jarekdanielak. Here is my provider code. I got this working last night:

import { html } from ‘htm/preact’;
import { TextFieldEntry, isTextFieldEntryEdited } from ‘@bpmn-io/properties-panel’;
import { useService } from ‘bpmn-js-properties-panel’;
import { is } from ‘bpmn-js/lib/util/ModelUtil’;

const LOW_PRIORITY = 500;

export default function SharePointListPropertiesProvider(propertiesPanel, translate) {
this.getGroups = function (element) {

    return function (groups) {
        if (is(element, 'bpmn:Process')) {
            groups.push(createSharePointGroup(element, translate));
        }
        return groups;
    };
};

propertiesPanel.registerProvider(LOW_PRIORITY, this);

}

SharePointListPropertiesProvider.$inject = [‘propertiesPanel’, ‘translate’];

function createSharePointGroup(element, translate) {
return {
id: ‘sharePoint’,
label: translate(‘SharePoint Properties’),
entries: [
{
id: ‘sharePointListUrl’,
element,
component: SharePointListUrl,
isEdited: isTextFieldEntryEdited
}
]
};
}

function SharePointListUrl(props) {
const { id, element } = props;

const translate = useService('translate');
const modeling = useService('modeling');
const debounce = useService('debounceInput');

const getValue = () => {
    return element.businessObject.get('sp:sharePointListUrl') || '';
};

const setValue = (value) => {
    modeling.updateProperties(element, {
        'sp:sharePointListUrl': value
    });
};

return html`<${TextFieldEntry}
    id=${id}
    element=${element}
    label=${translate('SharePoint List URL')}
    description=${translate('Enter the SharePoint List URL')}
    getValue=${getValue}
    setValue=${setValue}
    debounce=${debounce}
    tooltip=${translate('URL of the associated SharePoint list')}
  />`;

}

4

I’d really like to help, but what you posted above is too messy and has no context.

Try using CodeSandbox to prepare an example we can run. Explain what your tried to do and how it failed. Explain what the end result should be.

You absolutely do not have to recreate your whole project, just the bit that’s related to bpmn.io.