Form with multiple unordered subforms - delete function

General
1

Hi,
I have a question about the best solution to implement a complex form.

I have a complex Data object with multiple data definitions like this:

{  
 "definitions":  [
  "script": {    
         "language": { "type": "string"   }  ,
         "formula": { "type": "string"   }  ,
       },
  "message": {    
         "subject": {  "type": "string"  } ,
         "body": {   "type": "string"    }  
     },
  "script": {    
         "language": { "type": "string"   }  ,
         "formula": { "type": "string"   }  ,
   }
     ..........
]
}

Each of the Data definitions has different data items. In this example a ‘script’ has other data than a ‘message’.

Of course I can create a form with separate groups for each definitions type, which is almost fine.
But I need also give the user a control to delete a definition.

The JSONForms Array Example seems not to fit into this requirement, as each definition type has a different schema in my case.

What could be the best way to solve this requirement with JSONForms?

===
Ralph

2

Hi @rsoika,

Yes, on first glance this looks like an array tuple to me. At the moment we don’t offer support for array tuples, our current off-the-shelf renderers can only handle arrays where all items are structured in the same way.

You can definitely handle this with a custom array tuple renderer (maybe even specialized for your definitions as this might ease things like schema determinations). As it’s a custom renderer anyway you can render any UI you like.

You could for example render something like our typical array layouts or list-with-detail renderers. On creation you could let the user select what kind of definition they want to add.

Does this answer your question? Let me know if you need more information :wink:

3

@sdirix thanks for your reply. First I will now try to group my definitions with the same schema and use multiple default array renderers.
A custom renderer would be definitely the more elegant solution. I still do not dare to write my own renderer because I am not the JavaScript expert and there are not so much examples of how to write a custom renderer with react. In my case I guess, I would need a custom-array-renderer with delete-buttons. The custom-conrol-example seems to touch the complexity of such a renderer only a little bit. Do you know any tutorial that explain the topic in more detail?

4

Sadly we don’t have such a detailed tutorial (yet). For now I can recommend looking through our source code and check how we implemented the off-the-shelf renderers. Our provided renderers use exactly the same mechanisms as custom renderers.

5

Yes, I have now started working on a custom renderer and try to learn from the source code.
Maybe I will write a tutorial if I succeed. At the moment there is still a very long way to go for me - so don’t be surprised if I’m going to ask some more questions :wink: