Altering layout/display of a single schema param

General
21

Hi @DiskCrasher,

Sorry, I just seem to not understand what the issue is.

The second anyOf in the example above doesn’t do anything as it only contains a single element. Even if it contains multiple children, for this anyOf the same custom renderer will be used in case the custom renderer is properly registered: It should be registered for all schemas containing anyOf, not for specific paths.

22

@sdirix But that’s just it–I don’t want to change it for all anyOf renderings, only one, and it doesn’t appear that there’s any way to specify it using scope.

23

Hi @DiskCrasher,

I see. Can you check anything else besides the scope? In the tester you can check the JSON Schema, so you could inspect the structure of the schema to determine whether the renderer should apply. You could also add a custom property to the JSON Schema, e.g. renderOptions: { renderSelectAsDropdown: true } and check for this in the tester.

24

@sdirix Those methods could work but how does one check the JSON schema in the tester? I couldn’t find any examples.

25

Hi @DiskCrasher,

Our testers are typed as:

type RankedTester = (uischema: UISchemaElement, schema: JsonSchema) => number;

So you get access to the schema as the first parameter.

Our util methods are useful for common use cases, so the easiest way to access the correct sub-schema is via our schemaMatches util, e.g.

const Tester = schemaMatches(schema => schema.renderOptions.renderSelectAsDropDown);
26

@sdirix After much testing I finally got the anyOf to render as a select/dropdown control. Hooray! Thanks for the tips.I think the documentation could use more meat in this area.

However there’s another issue: When I make a selection in the list the UI does not update to show that selected sub-schema like it does when it’s displayed using the default tabular control. What must I do to get the selection to register a UI update? In my control I currently have an onChange event for the Select component that looks like this:

        onChange={(event: SelectChangeEvent<string>) => {
          props.updateValue(event.target.value);
        }}

Which calls:

updateValue={(newValue: string) => props.handleChange(props.path, newValue)}

Do I need to use ResolvedJsonFormsDispatch? Couldn’t find much documentation on that either.

27

Hi @DiskCrasher,

Glad that you got it working.

Well, first you need to think about what you WANT to happen when a user selects an entry in the dropdown. Shall there even be a data update? This highly depends on your requirements and expectations.

For our own “anyOf” renderer we switch the tab and only update the data when it’s empty, see here.

So for you this means:

  • You should likely update the local index within your custom renderer and dispatch a different JSON Schema / UI Schema
  • You should maybe update the data via handleChange, according to your requirements.

You might have different use cases, then adapt accordingly.

ResolvedJsonFormsDispatch is no longer a concept in JSON Forms and was removed with JSON Forms 3.0. We just kept an alias of it to the regular dispatch to ease migration for older users.

28

@sdirix What I want to happen is for my selected subschema to be rendered on the UI. I’ve tried using this approach in my renderer/control:

      {props.subSchema && (
        <JsonFormsDispatch
          schema={props.subSchema}
          renderers={[...materialRenderers]}
        />
      )}

But I’m getting “No applicable renderer found.” errors (whether I specify renderers or not).

29

Hi @DiskCrasher,

Not handing over a uischema to JsonFormsDispatch will lead to the root ui schema being used. As this certainly does not fit to your handed over subSchema, you will run into errors like “No applicable renderer found.”

You should determine the uischema in place, for example like this.