creating editable table

[Robinproostt]

Hi, I'm currently researching GLSP and I'm looking for a possibility to add an editable table in my diagram. I would like to add data to this table if needed. When the data is added and I save the file, I need to be able to find this data back in the JSON. Any ideas how I can accomplish this?

[rsoika]

In Open-BPMN we have done this by using JSONForms which integrates nicely into GLSP.

By implementing a GLSP UI-Extension we integrated a property panel which shows complex input forms also with tables:

[Robinproostt]

thank you for this information!

[martin-fleck-at]

Forms and table components are always a bit difficult to develop from scratch as there are often many hidden features that one expects. However, in general, from a GLSP point of view you have two options:

• Create a diagram that you manually layout to look like a table. There are some default client-side layout containers and support for algorithms of the Eclipse Layout Kernel on the server.
• Use an actual table framework that you overlay with the diagram using a GLSP UI extension (as done by @rsoika). A UI extension serves as an overlay (i.e., it does not zoom with the other elements) but gives you a lot of freedom as you simply receive a host HTML element and can add arbitrary elements.

Depending on your use case, my recommendation would be to re-use an existing framework and simply fill it with data that comes from GLSP. Using a UI extension you can inject all necessary GLSP services, e.g., the editor context, the selection service, the action dispatcher etc. In our workflow example, we use a UI extension to render an auto-completion widget when editing a task label and submit the new data using a dedicated action, see TaskEditor.

I hope that gets gets you properly started.

[Robinproostt]

Thank you for this information!