# How to use findUISchema

**URL:** <https://jsonforms.discourse.group/t/how-to-use-finduischema/280>\
**Category:** General\
**Created:** [July 13, 2021, 11:54am UTC](https://jsonforms.discourse.group/t/how-to-use-finduischema/280 "2021-07-13T11:54:34Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![JBBianchi](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/jbbianchi/32/90_2.png) [@JBBianchi](https://jsonforms.discourse.group/u/JBBianchi)\
**Post date:** [July 13, 2021, 11:54am UTC](https://jsonforms.discourse.group/t/how-to-use-finduischema/280/1 "2021-07-13T11:54:35Z")

</div>

Hello,

I’d like to use [findUISchema](https://jsonforms.io/api/core/globals.html#finduischema) in a custom angular material control to be able to input the rendererProps of the JsonFormsOutle like it’s done in [TableRenderer](https://github.com/eclipsesource/jsonforms/blob/master/packages/angular-material/src/other/table.renderer.ts#L63) for instance.

The idea is to be able to manage a dictionary. I’d like to be able to add and remove entries (done) but also to edit the value of an entry (problematic).

Here is an example of the JSON Schema:

> {  
> “type”: “object”,  
> “properties”: {  
> “someprop”: {  
> “type”: “object”,  
> “properties”: {  
> “dictionary”: {  
> “type”: “array”,  
> “title”: “A beautiful dictionary”,  
> “items”: {  
> “type”: “object”,  
> “properties”: {  
> “key”: {  
> “type”: “string”,  
> “minLength”: 1  
> },  
> “value”: {  
> “type”: “string”,  
> “minLength”: 1  
> }  
> },  
> “required”: [  
> “key”,  
> “value”  
> ],  
> “additionalProperties”: false  
> },  
> “minItems”: 1,  
> “additionalItems”: false  
> }  
> },  
> “additionalProperties”: false  
> }  
> }  
> }

And the UI Schema looks like this:

> {  
> “type”: “Dictionary”,  
> “scope”: “#/properties/someprop/properties/dictionary”  
> }

In my renderer, for each item of my data, I try to generate the renderer properties using this snipet:

> getRendererProps(index: number): OwnPropsOfRenderer {  
> const { schema, uischemas, scopedSchema, uischema } = this;  
> const controlElement = uischema as ControlElement;  
> const path = Paths.compose(this.propsPath, `${index}.value`);  
> const rendererUischema = findUISchema(  
> uischemas,  
> scopedSchema,  
> uischema.scope,  
> path,  
> “Control”,  
> null,  
> schema  
> );  
> return {  
> schema,  
> path,  
> uischema: rendererUischema,  
> };  
> }

I tried many combinaisons for the arguments of `findUISchema` but I cannot get it to work…

Could you please explain to me how to use this function, the context and different arguments?

---

<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 19, 2021, 7:53am UTC](https://jsonforms.discourse.group/t/how-to-use-finduischema/280/2 "2021-07-19T07:53:53Z")

</div>

Hi @JBBianchi! Your use case is the same as in the array-layout renderer: You want to determine the UI schema for your array items.

Therefore I would assume that this should give you the UI schema you want:

```auto
    const uischema = findUISchema(
      this.uischemas,
      this.scopedSchema,
      this.uischema.scope,
      this.propsPath,
      undefined,
      this.uischema
    )

```

In general `findUISchema` expects:

- `uischemas` the UI Schema registry (most users are not using that feature)
- `schema` the JSON Schema for which to find a UI Schema. In your case the `scopedSchema` should already point at the `items`, i.e. it should be

```auto
{
  type: 'object',
  properties: {
    key: {
      type: 'string',
      minLength: 1
    },
    value: {
      type: 'string',
      minLength: 1
    }
  },
  required: ['key', 'value'],
  additionalProperties: false
}

```

- `schemaPath`. This is used to query the UI Schema registry `uischemas` to find a registered UI Schema for this path. Probably not relevant for your use case.
- `path`. The data path for the current schema. Also only used for the UI Schema registry `uischemas` and therefore probably not relevant for your use case.
- `fallbackLayoutType` (optional). The `type` of the generated UI Schema. As the name indicates this should definitely be some layout element into which the generated controls are placed. In your case this should probably be `VerticalLayout` (default) or `HorizontalLayout` or `Group`
- `control` (optional). The UI Schema for the JSON Schema array. Used to check the UI Schema options object
- `rootSchema` (optional). The root schema of the form. Used for special resolving cases. Probably not needed in your case.

---

<div class="post-metadata">

**Author:** ![JBBianchi](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/jbbianchi/32/90_2.png) [@JBBianchi](https://jsonforms.discourse.group/u/JBBianchi)\
**Post date:** [July 22, 2021, 10:36am UTC](https://jsonforms.discourse.group/t/how-to-use-finduischema/280/3 "2021-07-22T10:36:11Z")

</div>

Thanks for your reply @sdirix

Unfortunatly, I wasn’t able to point to the right path. I’m probably turning around the good setup but couldn’t find it. I reproduced my use case here: github[DOT]com/JBBianchi/jsonforms-angular-seed/blob/master/src/app/dictionary.renderer.ts#L106 Would you be so kind to have a look and point me in the right direction?

---

<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 27, 2021, 11:54am UTC](https://jsonforms.discourse.group/t/how-to-use-finduischema/280/4 "2021-07-27T11:54:23Z")

</div>

Hi @JBBianchi, did you try what I suggested in my last answer? The code you linked still uses a custom `path` entry instead of the `propsPath` prop.

---

<div class="post-metadata">

**Author:** ![JBBianchi](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/jbbianchi/32/90_2.png) [@JBBianchi](https://jsonforms.discourse.group/u/JBBianchi)\
**Post date:** [July 27, 2021, 12:18pm UTC](https://jsonforms.discourse.group/t/how-to-use-finduischema/280/5 "2021-07-27T12:18:16Z")

</div>

I did, same kind of outcome. I updated the repo so it reflects your suggestion.

I’m pretty sure it’s a little something I’m doing wrong somewhere but I couldn’t figure what/where.

---

<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 28, 2021, 11:56am UTC](https://jsonforms.discourse.group/t/how-to-use-finduischema/280/6 "2021-07-28T11:56:10Z")

</div>

For the returned `path`,

```auto
    Paths.compose(this.propsPath, ``${index}``)`

```

is probably correct, just not for `findUiSchema`. I’m comparing your code with the already existing [Material Array Layout renderer](https://github.com/eclipsesource/jsonforms/blob/d6edf4b24194dacab74de979be939bcd86d33e43/packages/angular-material/src/layouts/array-layout.renderer.ts).

Note that the `setReadOnly` `unsetReadOnly` methods are deprecated. You should just hand over the enabled state of your renderer to your children.

---

<div class="post-metadata">

**Author:** ![JBBianchi](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/jbbianchi/32/90_2.png) [@JBBianchi](https://jsonforms.discourse.group/u/JBBianchi)\
**Post date:** [July 28, 2021, 1:09pm UTC](https://jsonforms.discourse.group/t/how-to-use-finduischema/280/7 "2021-07-28T13:09:33Z")

</div>

I feel like it’s getting closer but still not good:

```typescript
getRendererProps(index: number): OwnPropsOfRenderer {
    const { schema, uischemas, scopedSchema, uischema, propsPath } = this;
    const path = Paths.compose(this.propsPath, `${index}`);
    const rendererUischema = findUISchema(
      uischemas,
      scopedSchema,
      uischema.scope,
      propsPath,
      undefined,
      this.uischema
    );
    return {
      schema: scopedSchema,
      path,
      uischema: rendererUischema,
    };
  }

```

When using this, I end up with 2 controls, for `key` and `value`. I tried to change path to `const path = Paths.compose(this.propsPath, ``${index}.value``);` or to change the path in findUISchema but I cannot find a way to only target `value`…

Edit:

With a dirty workaround, I can manage to do what I want but it doesn’t feel right:

```typescript
    return {
      schema: scopedSchema,
      path,
      uischema: (rendererUischema as any).elements[1],
    };

```

(see [dictionary.renderer@b34e1a2](https://github.com/JBBianchi/jsonforms-angular-seed/blob/b34e1a20de1fb05285fffa5291ff06e9d33c195b/src/app/dictionary.renderer.ts#L110))

Edit2:  
In the meanwhile, for my use-case, I went with the [table.renderer](https://github.com/eclipsesource/jsonforms/blob/cc2d578dc280538403b815e7689f0b178ee6feb2/packages/angular-material/src/other/table.renderer.ts) approach meaning creating the control instead of finding it. See [dictionary.renderer@4bd139e](https://github.com/JBBianchi/jsonforms-angular-seed/blob/4bd139ea69b0c473b90e5fc129d1f127dc1a0164/src/app/dictionary.renderer.ts#L110)

---

<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 30, 2021, 2:40pm UTC](https://jsonforms.discourse.group/t/how-to-use-finduischema/280/8 "2021-07-30T14:40:29Z")

</div>

Well yes, with the auto generated ui schema you’ll always have one Control per property. So in your case that’s `key` and `value`. If that’s not what you want then there is definitely no need to call `findUISchema` but you can simply create the ui schema yourself, as you now did.