Handling Object Structure with ArrayRenderer Behavior in JSONForms

Hello,

Using Vue Vanilla, I have the following structure:

publicKeys: {
  key1: { ... },
  key2: { ... }
}

I would like to handle this structure in the same way as an array with the ArrayRenderer, enabling functionality such as:

  • Adding/removing rows
  • Updating both the key and its corresponding content at any time

Essentially, I want to achieve the same behavior as if the structure were defined like this:

publicKeys: [
  { key: 'key1', value: { ... } },
  { key: 'key2', value: { ... } }
]

Has anyone implemented or encountered a way to manage an object like this with ArrayRenderer behavior in JSONForms? Any guidance would be appreciated!

Hello,

I have found a solution by creating a MapArrayRendererVue by checking the ArrayRendererVue and implement the add ‘new’ and remove from key.

On each methods add / remove the method dispatch the changes.

It still quiet complicated to understand the source code.

Regards,
Sebastien

Hi @srichez888,

As you noticed we don’t provide such a renderer for Vue Vanilla. However our object renderer for Vue Vuetify is able to handle patternProperties. See here and here.

1 Like

Thanks for your support.