How do I customize the jsonforms form component?

[yilia-jcq]

As shown in the image below, my component does not have a "Valid" field and is not in tabular format, so where can I modify the code? Thank you～

[eneufeld]

Hi @yilia-jcq ,
the valid field is there for validation purposes.
I assume your jsonschema looks like this:

properties: {
  comments: {
    type: 'array',
    items: {
      type: 'object',
      properties: {
        name: {type: 'string'},
        value: {type: 'string'}
      }
    }
  }
}

JSONForms automatically selects a table for this kind of schemas.
What you can do is provide a uischema which would allow you to define the ui the way you want it.
How to provide it depends on where the jsonforms component is. So are you using the properties view or the tree view?

[yilia-jcq]

Dear @eneufeId ,
Thank you very much for receiving your reply, maybe my expression is not perfect, if I want to modify the "Add to Comments" button wording, or delete the button, where should I go?

[yilia-jcq]

uischema.json
{ 'type': 'Control', 'scope': '#/properties/comments' }

schema.json
'autosarpackage': { '$id': '#autosarpackage', 'title': 'AutosarPackage', 'type': 'object', 'properties': { 'comments': { 'type': 'array', 'items': { 'type': 'object', 'properties': { 'name': { 'type': 'string' }, 'value': { 'type': 'string' } } } } } }

There is no "Valid" field in the above case

[yilia-jcq]

Dear @eneufeld ,
In the Coffee Editor project, where is the entry point to modify the custom jsonforms component? For example, the link you gave is written in react, so what is our project?

[eneufeld]

@yilia-jcq ,
How to provide the custom renderer depends on where the jsonforms component is. So are you using the properties view or the tree view?

[yilia-jcq]

Dear @eneufeld ,
tree view

[eneufeld]

@lucas-koehler can you help here out on how to provide a custom renderer?

[lucas-koehler]

Hello @yilia-jcq ,
to add custom renderers to the tree editor's detail, you need to extend the detail widget and rebind DetailFormWidget to your new widget.
To be more precise, the following steps are necessary:

• Extend DetailFormWidget and override method getJsonFormsConfig. In this method you return a jsonforms config object that contains you custom renderers. This is probably done best by extending the jsonFormsConfig default config object. The renderers property contains the renderers to use. Make sure that your custom version includes the default renderers and your custom ones!
• To use your detail widget instead of the default one, you need to rebind it in the widget factory. This is done here right after the treeContainer was created. You can rebind with treeContainer.rebind(DetailFormWidget).to(MyDetailWidget);
• Now your custom widget should be used
• There's also a ticket to simplify customizing the detail widget in the tree editor in case you want to contribute: Allow customizing detail form via injectable detail config object theia-tree-editor#20