How to use ListEntry in the extension property panel

[besley]

I want to display some data list/table rows on the property panel, I think I can use list control to make it happen. But when I implement this control, I have to set component property to the ListEntry control, I have no idea what I can do it correctly. Thanks

import { ListEntry } from '@bpmn-io/properties-panel';
import { useService } from 'bpmn-js-properties-panel';
import { getBusinessObject } from 'bpmn-js/lib/util/ModelUtil';

import { forEach } from "min-dash";

export default function (element) {
    var performerProperty =
    {
        id: 'performer',
        element,
        component: Performer
    };
    return performerProperty;
}

function Performer(props) {
    const { element, id } = props;
    const moddle = useService('moddle');
    const modeling = useService('modeling');
    const translate = useService('translate');
    const debounce = useService('debounceInput');

    const items = [];
    var a = {
        "id": "1",
        "label": "jack"
    }
    items.push(a);

    const getValue = () => {
        ;
    }

    const setValue = value => {
        ;
    }

    const onAdd = function () {
        var a = {
            "id": "2",
            "label": "tom"
        }
        items.push(a);
        console.log('on add event...');
        console.log(items);
    }

    return <ListEntry
        id={id}
        items={items}
        element={element}
/*        component={new HTMLLabelElement()}*/
        label={translate('Role')}
        onAdd={onAdd}
        open={true}
        getValue={getValue}
        setValue={setValue}
        debounce={debounce}
    />
}

In the below picture, it has displayed that there are 3 items to be shown, but it can’t show it directly, it seemed that the component property should be set to the ListEntry control. Thanks for any suggestions.

[Niklas_Kiefer]

The ListEntry should be used to create nested lists, so lists in list entries. For example, the Camunda Platform properties use it to define constraints on form fields.

Are nested lists what you intended or are you looking for a simple, one-level list? If that’s the case you have to use the ListGroup. This plugin is showing how to do it.

[besley]

@Niklas_Kiefer , Hi, Thanks your reply. The ListGroup seemed that it can display data items correctly, but how I can maintain these data items. I need to add new items, and remove them too. The data collection also need to be saved into the xml extension element. Thanks

[Niklas_Kiefer]

Did you check out the example I mentioned? This group provides an add and the items several remove props to handle these things.

[Niklas_Kiefer]

I added an issue to our examples suite to make it clearer on how to use list groups: Add example for creating properties panel list groups · Issue #170 · bpmn-io/bpmn-js-examples · GitHub

[besley]

Thanks. That’s great, I think it will be very useful for beginners. I try to do some effort, but it’s hard to make the items appears from the camunda process-io-groups plugin examples. Hope it will make it much clearly.

[Niklas_Kiefer]

In related news: I started to create such an example. Feel free to give early feedback on this