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.

5

What exactly isn’t working? There is no such thing as a non-element level. When no element is selected the properties panel will show the properties of the root element which is either a process or a collaboration.

6

Hi Philip,
Thank you for the response. By “document level” I meant, bpmn:process or bpmn:definitions. I want to store some data in either of these nodes/elements to access when I need information about the bpmn file or external relationships.

7

That is entirely possible. You cannot display properties of the definitions element directly but I think that wouldn’t make too much sense anyway. Maybe let’s start with what you want the XML to look like.