# Altering layout/display of a single schema param

**URL:** <https://jsonforms.discourse.group/t/altering-layout-display-of-a-single-schema-param/2186>\
**Category:** General\
**Created:** [June 17, 2024, 9:50pm UTC](https://jsonforms.discourse.group/t/altering-layout-display-of-a-single-schema-param/2186 "2024-06-17T21:50:05Z")\
**Posts on this page:** 9\
**Page:** 2

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [July 24, 2024, 3:39pm UTC](https://jsonforms.discourse.group/t/altering-layout-display-of-a-single-schema-param/2186/21 "2024-07-24T15:39:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![DiskCrasher](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/diskcrasher/32/1033_2.png) [@DiskCrasher](https://jsonforms.discourse.group/u/DiskCrasher)\
**Post date:** [July 24, 2024, 9:52pm UTC](https://jsonforms.discourse.group/t/altering-layout-display-of-a-single-schema-param/2186/22 "2024-07-24T21:52:00Z")

</div>

@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`.

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [July 25, 2024, 7:29am UTC](https://jsonforms.discourse.group/t/altering-layout-display-of-a-single-schema-param/2186/23 "2024-07-25T07:29:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![DiskCrasher](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/diskcrasher/32/1033_2.png) [@DiskCrasher](https://jsonforms.discourse.group/u/DiskCrasher)\
**Post date:** [July 29, 2024, 7:22pm UTC](https://jsonforms.discourse.group/t/altering-layout-display-of-a-single-schema-param/2186/24 "2024-07-29T19:22:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [August 7, 2024, 5:52am UTC](https://jsonforms.discourse.group/t/altering-layout-display-of-a-single-schema-param/2186/25 "2024-08-07T05:52:08Z")

</div>

Hi @DiskCrasher,

Our testers are typed as:

```typescript
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.

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

```

---

<div class="post-metadata">

**Author:** ![DiskCrasher](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/diskcrasher/32/1033_2.png) [@DiskCrasher](https://jsonforms.discourse.group/u/DiskCrasher)\
**Post date:** [August 19, 2024, 6:56pm UTC](https://jsonforms.discourse.group/t/altering-layout-display-of-a-single-schema-param/2186/26 "2024-08-19T18:56:56Z")

</div>

@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:

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

```

Which calls:

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

```

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

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [August 20, 2024, 8:33am UTC](https://jsonforms.discourse.group/t/altering-layout-display-of-a-single-schema-param/2186/27 "2024-08-20T08:33:20Z")

</div>

Hi @DiskCrasher,

Glad that you got it working.

> [@DiskCrasher](#):
>
> 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:
> 
> ```auto
> onChange={(event: SelectChangeEvent<string>) => {
> props.updateValue(event.target.value);
> }}
> 
> ```
> 
> Which calls:
> 
> ```auto
> updateValue={(newValue: string) => props.handleChange(props.path, newValue)}
> 
> ```

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](https://github.com/eclipsesource/jsonforms/blob/18994abef98cf9dcc1be60bc60e1c046c3c70608/packages/material-renderers/src/complex/MaterialAnyOfRenderer.tsx#L65-L82).

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.

> [@DiskCrasher](#):
>
> Do I need to use `ResolvedJsonFormsDispatch`? Couldn’t find much documentation on that either.

`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.

---

<div class="post-metadata">

**Author:** ![DiskCrasher](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/diskcrasher/32/1033_2.png) [@DiskCrasher](https://jsonforms.discourse.group/u/DiskCrasher)\
**Post date:** [August 30, 2024, 9:23pm UTC](https://jsonforms.discourse.group/t/altering-layout-display-of-a-single-schema-param/2186/28 "2024-08-30T21:23:34Z")

</div>

@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:

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

```

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

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [September 2, 2024, 2:48pm UTC](https://jsonforms.discourse.group/t/altering-layout-display-of-a-single-schema-param/2186/29 "2024-09-02T14:48:53Z")

</div>

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](https://github.com/eclipsesource/jsonforms/blob/a23e99003b7515d0fe9941eb7e5485263d134984/packages/material-renderers/src/complex/MaterialObjectRenderer.tsx#L49-L67).

[Previous page](https://jsonforms.discourse.group/t/altering-layout-display-of-a-single-schema-param/2186.md?page=1)