SelectBox with multiple selection

aylao · July 21, 2023, 9:17am

Hi, I made a custom properties panel, I added Service Code selectInput instead of Type. Now, I want to add multiple select properties to this selectinput prop. Is it possible? How can I do? Can you help me?

Martin · July 27, 2023, 8:08am

Hi @aylao ,

can you elaborate on your use-case? What is the binding for “Service Code”? If you are using Zeebe, a Service task can only have one Task definition type, as this corresponds to the worker being used.

In general, it is possible to create a multi-select, but we do not offer a pre-made component for it. You would have to create the Component yourself.

aylao · July 27, 2023, 1:05pm

Hi @Martin, this image is an example, I will develop new properties for properties panel and this multiple selected variables will be added to our table. we want multiple selection in select box. Is there an example of how we can design it ourselves?

Martin · July 28, 2023, 9:06am

Hi @aylao , I’m not sure what you already wrote. Did you have a look at the properties-panel-extension example already? The basic structure is the same, except that you wont use TextFieldEntry in

github.com

bpmn-io/bpmn-js-examples/blob/master/properties-panel-extension/app/provider/magic/parts/SpellProps.js#L35-L43


      
          return html`<${TextFieldEntry}
            id=${ id }
            element=${ element }
            description=${ translate('Apply a black magic spell') }
            label=${ translate('Spell') }
            getValue=${ getValue }
            setValue=${ setValue }
            debounce=${ debounce }
          />`

You would need to replace TextFieldEntry with you own implementation for a multi-select. You can do this using htm or other ways to create a Preact Component. You can also have a look at our pre-made components to get an Idea how we implemented components