Custom renderer for React MUI in array always rendered in accordion

General
1

Hello guys,

first of all thanks for your great work … love it.

I’m pretty new to JsonForms and play around with it right now. For a project I need a file upload and I found several possible solutions. I have it running so far, but I can not figure out why my file upload control is always shown in a accordion control if I use it inside an array.
I keep the upload functionality separated from the actual form and try to only gather the files for uploading. If the user then clicks upload in the end, the form data will be send to the upload feature.
Here is my test form schema:

{
"type": 'object',
    "properties": {
        "files": {
            "type": 'array',
            "items": {
                "type": "object",
                "properties": {
                    "file": {
                        "type": "string",
                        "format": "file"
                    }
                }
            },
        },
    },
}

Here the ui schema:

{
    "type": "VerticalLayout",
    "elements": [
        {
            "type": "Control",
            "scope": "#/properties/files",
            "options": {
                "detail": {
                    "type": "VerticalLayout",
                    "elements": [
                        {
                            "type": "Control",
                            "scope": "#/properties/file",
                            "options": {
                                "detail": "Generated"
                            }
                        }
                    ]
                }
            }
        },
    ],
}

Screenshot of the result:
image

I cannot figure out how to show the file upload control (Browse) without this accordion.

I’m programming with React and Material renderers.

Any help is more than welcome. When I fixed it I’m happy to share the code for the custom renderer if someone needs a simple file upload.

Best
Martin

2

Hi @maddin79,

We have two different ways of rendering arrays, either as a table with columns or via a list where each element is in an accordion.

By specifying

"options": {
  "detail": "Generated"
}

the list variant is activated.

If you just remove this options then the table renderer is used. However then you need a custom cell instead of a custom renderer to render your custom file control.

cells are basically the same as renderers, however they are only used within tables (at least in the Material UI renderer set).