How to create control using others (React)

General
1

Hi,

I need to create some control using existing controls. Let’s say, I have the value:

aaa|bbb|ccc

I want to separate this value by | and edit each part separately. As a result I need to get similar value:

aaa|updatedbbb|ccc

I suppose to use for this purpose the combination of MaterialArrayControlRenderer and MaterialInputText. For example, I could set schema like this:

{
    type:"array",
    items: {
        type: "object",
        properties: {
            item: {
                type: "string",
                title: "Items"
            }
        }
    }
}

and uischema:

{
    type:"Control",
    scope: "#",
    options: {
        showSortButtons: true
    }
}

How can I change the wrapper to be able to provide the adapted data:

aaa|bbb|ccc => ["aaa","bbb","ccc"]

and updated handleChange to get back:

["aaa", "updatedbbb", "ccc"] => aaa|updatedbbb|ccc

Thank you in advance!

2

Hi @tujger,

I don’t fully understand what you’re going for. From my understanding: You want to model a value as a string but use multiple controls for editing.

If you want to handle this directly within JSON Forms then I would like to suggest to continue modeling the value as type: 'string' in your JSON Schema. Then you can implement a custom renderer which can render any UI you like, for example rendering multiple inputs or some advanced masking. On handleChange you would always save the full string value back.

If you want to avoid using a custom renderer and just handle this outside of JSON Forms, then yes, you can use a JSON Schema like you posted, e.g.

{
    type:"array",
    items: {
        type: "object",
        properties: {
            item: {
                type: "string"
            }
        }
    }
}

Then, BEFORE you hand your data over to JSON Forms you need to apply a transformation step which splits your string value into this string array. Then when you receive data back from JSON Forms via the onChange callback, you can then transform the array back into your custom string format.

Using the second approach avoids the implementation of a custom renderer and may be a good solution for prototyping. If your string however has some special meaning and you would like to also show this via the UI to the user then I would go the custom renderer route.

If you use the second approach also make sure that you don’t end up in an endless rendering loop. Whenever you hand over a new data object to JSON Forms a rerender and a retrigger of onChange will be performed. So when doing a transformation as suggested you need to break the cycle at some point.