Basic custom table in Properties Panel

Developers Modeler
1

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.

2

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

3

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

4

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.

5

Never used CodeSandbox, but I’ll try it.

By the way, if I’m not allowed to use arrow functions how should I build the functions?

6

What about good old functions?

getElements: function() {
  return [...];
}
7

I didn’t know I could use that way. Just saw some examples and codes on github trying to understand how to do it.

Now I put all the functions appart, and now I get the buttons. I’m able to put some values, and delete them, but I’m not abble to make it persist. If I look at the XML generated they are not there.

Another point, is that I put some dummy data on getElements, and that’s exactly the number of lines my table has, so, I’m not abble to add or delete entries, it ways has the same number of lines.

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: this.getListaCampos,
            updateElement: this.updateElement,
            removeElement: this.removeElement,
            addElement: this.addElement,
            editable: this.editable(),
            setControlValue: this.setControlValue,
            show: true,
          })
        ]
      },
    ]
  };

my functions are:

updateElement() {}

  removeElement() {}

  addElement() {}

  editable() {}

  setControlValue() {}

  getListaCampos() {
    return [
      {
        campo: 'Desc 1',
        valor: 'valor 1'
      },
      {
        campo: 'desc 2',
        valor: 'valor 2'
      }
    ];

  }

the result is:

![image|257x307](upload://eidtiKWP5zhLjM2vPwWAd7RNYiC.png) 

I'm really lost about saving the data and make the add button work.

By the way, trying to put the code on sandbox but it just not work. I'll keep trying.

Thanks
8

If I look at the XML generated they are not there

did you integrate your custom moddle descriptors? Without those the properties panel won’t know about them. Also, make sure your implement the updateElement correctly.

Another point, is that I put some dummy data on getElements, and that’s exactly the number of lines my table has, so, I’m not abble to add or delete entries, it ways has the same number of lines.

I think I still don’t get the problem here. Do you mean that you can’t see the UI elements for adding and deleting elements? For this make sure the editable returns true. In you case it seems you executing the function when defining the handler, which is not correct.

 editable: this.editable()
9

Hi @Niklas_Kiefer, thank you for your reply.
I don’t know how to implement update, add or getElements function. didn’t find any example how to do it, and for all the others types of input elements it wasn’t necessary.

For example, to impement an input and select element, just used:

groups: [
      {
        id: 'tipo_prazo',
        label: this.translate('Tipo Prazo'),
        entries: [
          EntryFactory.selectBox({
            id: 'id_tipo_prazo',
            label: this.translate('Tipo Prazo'),
            modelProperty: 'id_tipo_prazo',
            emptyParameter: false,
            selectOptions: [{
                value: '1',
                name: 'Sem Validade'
              },
              {
                value: '2',
                name: 'Data Processo'
              },
              {
                value: '3',
                name: 'Data Tarefa'
              },
              {
                value: '4',
                name: 'Data Informada'
              }],
            }),
          EntryFactory.textField({
            id: 'campo_prazo',
            label: this.translate('Referencia Prazo'),
            modelProperty: 'campo_prazo',
            description: 'Informa o Campo que será usado como referencia, com base na escolha do campo anterior'
          }),
          EntryFactory.textField({
            id: 'nr_prazo_limite',
            label: this.translate('Prazo (horas)'),
            modelProperty: 'nr_prazo_limite',
          }),
        ]
      }]

and it works perfectly.

That’s why I don’t get it.

Here it’s my code now:

constructor(
    private translate,
    private bpmnPropertiesProvider) {
  }

  myLista: any[] = [
    {
      campo: 'campo',
      valor: 'valor'
    }
  ];

  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: 'campos_db',
            description: 'teste',
            modelProperties: ['campo', 'valor'],
            labels: [this.translate('Campo'), this.translate('Valor')],
            getElements: this.getListaCampos,
            updateElement: this.updateElement,
            removeElement: this.removeElement,
            addElement: this.addElement,
            editable: this.editable,
            setControlValue: this.setControlValue,
            show: true,
          })
        ]
      },
    ]
  };

  updateElement() {}

  removeElement() {}

  addElement() { return true; }

  editable() { return true; }

  setControlValue() {}

  getListaCampos() {}

and here it’s what happens when I click on ADD button:

image
image1900×765 63.7 KB

Thanks again for your time.

Jefferson

10

As the error message reveals, the addElement functionality requires an array of commands on how to add the elements. The properties implementation is dealing with this, as an example.

This, of course, depends on what you want to do by clicking on add. return true, as you filled the handler with, won’t magically do anything, you have to be explicit here.

11

I thought it would be as simple as add an inputBox or selectBox. But as I can see it requires to implement those functions.

12

But as I can see it requires to implement those functions.

That’s true.