How can I create visualizations dynamically?

I have a table with a JSON field, this JSON has a different schema based on the object the row is representing. Each JSON field should be visualized differently so I'm trying to figure out a way to change the visualization at runtime based on a column field in the table (the field identifies the JSON schema in the row)

Hi @Tomp1998!

You can use the currentRow variable inside of {{}} that you pass to the column which may be a good place to start. I imagine the precise answer will depend on what kind of visualizations you'd like for that column though. If you can describe a little bit more of what you're looking for we might be able to give more tips!

I have the same question as above.

My table has a column of type JSON. Each row may have a different schema for the JSON. When I click the row, I want to customize a modal with a jsonSchemaForm.

For example, row 2 might have a column with: {"name": "bob", "age": 3}, and row 6 might have {"city": "los angeles", "state": "CA", "country": "USA"}

How can I dynamically show a different UI in the modal form when I click on row 2 or row 6. I would like to update the JSON schema, but I have not been able t figure out a way to do this.

Hey @jeff_orkin!

There's currently a bug with JSON Schema Forms that's preventing dynamically loaded schema from working. It may be possible to do this by combining other components, however. Do you know the full extent to which the form would vary and could you describe it?

We have table1 populated with rows that represent different kinds of actions. One column is named "action" and contains a string with one of 8 values.

One of the columns is named "details", where details is a JSON object of values, with a schema that is specific to which Action that row represents.

When we click on a row, we open a modalForm, with a child jsonSchemaForm. We would like to programmatically set the .jsonSchema of the form. I find that calling jsonSchemaForm1.setData() will just set the .data property, but not the schema.

I wish there was a method like: jsonSchemaForm1.setJsonSchema(schema: Object).

Is something like this possible?

Typically you'd be able to pass the schema to the component dynamically using {{}} but with the bug I mentioned above that currently isn't functioning correctly :pensive: It may be somewhat of a lift but if there are enough shared components between the different schema you might be able to create a dynamic form by showing/hiding Retool components depending on what's present in the schema. I'm imagining something like the following (of course you could also set more of the component's options dynamically):

Placement of the components is a bit tricky and may require some duplication but I'm curious if something like this might work for you until the bug is fixed:


dynamic_form.json

@Kabirdas I think the solution you are showing could work, but I'm new to Retool, so I need more info than you are providing.

Where do I store / set the currentSchema variable that you show in the select1 component?

And how did you build the Form you show at the bottom?

Is there a way to see a complete example of your project?

Yea totally! You can actually download and import the JSON file attached in the post if you want to play around with it (docs on how to do that here).

There are a number of different ways you can go about generating the schema. One might be to use a transformer that reads the selectedRow property of your table and then transforms it to include any settings you'd want for the particular inputs you'd be using. How complex that is depends a bit on how much you want to customize the components. You could also just reference the schema directly from selectedRow!

Sorry that the example was a bit mismatched with your use case :sweat_smile: will update this thread with a more fitting one!

1 Like

Sorry about such a late reply but here's another example using a table @jeff_orkin! Let me know if that's helpful. Curious to see where you're currently at with your project!
dynamic_form (1).json

Thank you @Kabirdas! I will take a look at these examples.

For the short term, I just used a tabbedContainer, where I placed an individual JSONSchemeForm on each tab, where I manually set the JSON schema.

But I would still like to make this all data driven in the future.