Basic custom table in Properties Panel

Hi all,

I’ve just started to use bpmn.io project and I’m very impressive with all the options we have and how we can customize our own projects.

I’m able to add custom textField, textBox, checkBox and SelectBox in Propertyes panel, but I’m stucked with TABLE component.

I can not understand How I can declare the function addElement, updateElement and so on.

I read the code and even tryied to understande the code on TableEntryFactor, and I thought I could reuse the code inside the file, but when I try to run the application I get “addElement is not a function”.

Where could I find an exemple using table custom?

Thanks in advance.

There is no such example. Share the code you’re working on and we might be able to help you.

Thanks for your reply.

That’s my code so for, and with it I can “run” my project:

case 'bpmn:SequenceFlow': {
        return this.myTabs.concat(
          this.regraFlow
        );
      }

And the code to concat the table:

regraFlow = {

    id: 'regra',

    label: this.translate('Regras'),

    groups: [

      {

        id: 'regra',

        label: this.translate('Regra'),

        entries: [

          EntryFactory.textBox({

            id: 'desc_regra',

            label: this.translate('Regra'),

            modelProperty: 'desc_regra'

          }),

          EntryFactory.table({

            id: 'table',

            description: 'teste',

            modelProperties: ['campo', 'valor'],

            labels: ['Campo', 'Valor'],

            getElements: () => [

                {

                  campo: 'Desc 1',

                  valor: 'valor 1'

                },

                {

                  campo: 'desc 2',

                  valor: 'valor 2'

                }

              ]

            ,

            updateElement: () => { },

            removeElement: () => { },

            addElement: () => { },

            editable: () => { },

            setControlValue: () => { },

            show: true,

          })

        ]

      },

    ]

  };

With it, I have this output:

image

I really can not find the rigth way to build the functions.

Thanks

Can you maybe share your full setup inside a CodeSandbox? Therefore it would be easier for us to see at which point your extension is not working properly.

One thing I see is that you’re using arrow functions. I’m not sure whether this will work, I guess only if you provide the correct source code bundler.