How to add multiple fields in one group

Developers
1

I am looking into the panel extension solution, and set up a magic group referenced by the official example, the magic group works fine. But I have a question, how to add multiple fields in this group. I tried to do it, there is an error thrown here:

//the guid and code text field need to be displayed on the property panel together
import guidProps from './parts/GuidProps';
import codeProps from './parts/CodeProps';

const LOW_PRIORITY = 500;

export default function IdentitiyPropertiesProvider(propertiesPanel, translate) {
    this.getGroups = function (element) {
        return function (groups) {
            groups.push(createIdentityGroup(element, translate));
            return groups;
        }
    }
    propertiesPanel.registerProvider(LOW_PRIORITY, this);
}

IdentitiyPropertiesProvider.$inject = ['propertiesPanel', 'translate'];

function createIdentityGroup(element, translate) {
    const identityGroup = {
        id: 'identity',
        label: translate('Identity Properties'),
        //entries: guidProps(element)                //only one property works fine
        entries: [guidProps(element), codeProps(element)]                //this will throw an error message
    };
    return identityGroup;
}

The error is below:

unhandled error in event listener DOMException: String contains an invalid character

It seemed that the entries can’t be an array in createIdentityGroup method. If I only set one property, it works fine. Hope someone can make suggestion here. Thanks

2

For further assistance, please share a CodeSandbox that reproduces your issue in a way that we can inspect it.

3

Thanks your reply, when I import property panel extend project into codesandbox from github,
bpmnjs property panel extension
there is an error occurred although I havent done any modification. I have created a code sandbox sample project here.

property-panel-extend-codesandbox

TypeError
Cannot read properties of null (reading 'appendChild')
BpmnPropertiesPanelRenderer.attachTo
https://3gvxbk.csb.app/node_modules/bpmn-js-properties-panel/dist/index.esm.js:2354:15
eval
https://3gvxbk.csb.app/node_modules/bpmn-js-properties-panel/dist/index.esm.js:2335:14
invokeFunction
https://3gvxbk.csb.app/node_modules/diagram-js/lib/core/EventBus.js:204:13
EventBus._invokeListener
https://3gvxbk.csb.app/node_modules/diagram-js/lib/core/EventBus.js:130:19
EventBus._invokeListeners
https://3gvxbk.csb.app/node_modules/diagram-js/lib/core/EventBus.js:119:24
EventBus.fire
https://3gvxbk.csb.app/node_modules/diagram-js/lib/core/EventBus.js:94:24
Modeler.Diagram
https://3gvxbk.csb.app/node_modules/diagram-js/lib/Diagram.js:54:24
Modeler.BaseViewer._init
https://3gvxbk.csb.app/node_modules/bpmn-js/lib/BaseViewer.js:257:24
Modeler.BaseViewer
https://3gvxbk.csb.app/node_modules/bpmn-js/lib/BaseViewer.js:23:8
Modeler.BaseModeler
https://3gvxbk.csb.app/node_modules/bpmn-js/lib/BaseModeler.js:12:27
new Modeler
https://3gvxbk.csb.app/node_modules/bpmn-js/lib/Modeler.js:72:28
$csb$eval
/app/index.js:19:18
  16 | 
  17 | var container = $("#js-drop-zone");
  18 | 
> 19 | var bpmnModeler = new BpmnModeler({
     |                  ^
  20 |   container: "#js-canvas",
  21 |   propertiesPanel: {
  22 |     parent: "#js-properties-panel"
View compiled
▶ 10 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.
This error overlay is powered by `react-error-overlay` used in `create-react-app`.
4

@Niklas_Kiefer , Thanks your response, I have found the reason that in magic property, it returns array object, I put their code here.

export default function(element) {

  return [
    {
      id: 'spell',
      element,
      component: Spell,
      isEdited: isTextFieldEntryEdited
    }
  ];
}

It already an array object, if I change it to a simple object, it will work fine.