Accessing jsonforms schema from a custom renderer

General
1

Hello,

Thanks for the good overview on json forms. I have a question about using the updateCore dispatch method. If I wanted to bulk update a number of fields and wanted to use the updateCore method, I am having a hard time passing the jsonforms schema and uischema. I get an error when I do so. Here are the relevant code bits:

In my custom renderer, I inject the jsonforms object in the setup method:

setup(props: RendererProps<ControlElement>) {
const jsonforms = inject<JsonFormsSubStates>('jsonforms');
const s = jsonforms?.core?.schema;
const ui = jsonforms?.core?.uischema;
return { jsonforms, s, ui }

In my update method, I try to access these variables and would like to update a number of fields, so try to use updateCore:

    getData(id: string) {
      const rootData = this.jsonforms?.core?.data;
          let updatedData = rootData;
          updatedData = set(
            'addresses.geonames_city.city',
            data.asciiName,
            updatedData
          );
          if (this.dispatch) {
            this.dispatch(
              Actions.updateCore(
                updatedData
                this.s,
                this.ui
              )
            );
          }
        });
      });
    }

The getData method will be getting a data response from an api and then populating several fields with the response from there. Seeing how to use update was very helpful but I’d like to also see how to use updateCore? Right now, when I try this, I get a typescript error with the following message: [!] (plugin rpt2) Error: /Users/eshadatta/jsonforms-vuetify-renderers/vue2-vuetify/src/controls/GeoNamesLookupRenderer.vue?rollup-plugin-vue=script.ts(96,17): semantic error TS2345: Argument of type 'JsonSchema4 | JsonSchema7 | undefined' is not assignable to parameter of type 'JsonSchema'. Type 'undefined' is not assignable to type 'JsonSchema'.. If I could know how to pass the json forms schema to the custom renderer and use it for the updateCore method, that would be super helpful.

Thanks so much.

2

Hi @eshadatta!

Thanks for the very detailed request, that is certainly helpful :wink:

Your code looks fine. It seems it’s just a Typescript problem. The updateCore method expects type JsonSchema while the jsonforms?.core?.schema; will result in in type JsonSchema | undefined.

At this point of time we can be sure that there is a JsonSchema as without one JSON Forms will not even render. So you can just cast the schema, i.e. this.dispatch(Actions.updateCore(updatedData, (this.s as JsonSchema), this.ui));. Alternatively you can also just type the schema as any in setup which lifts all type restrictions.

Whenever you encounter a blocking Typescript error you can try to go ahead with casting to any and check whether that works. Of course you might mask a bug this way, so I would recommend going over all these cases in batch at some point to see whether there is a better way.

3

Fantastic, thanks so much for the quick and detailed response!

1 Like
4

In the seed app, if I want to set the InputLabel text from schema.json where I added “title”: “RatingXYZ” to the object the rating key refers to – would the above discussion be the approach for getting that data into the custom control?

Never mind. I found it. Just had to add schema to RatingControlProps.

5

Hi @gyrevik, just to be sure: You’re talking about the JSON Forms React seed right? The previous discussion here resolved about the JSON Forms Vue2 Vuetify renderers, so the code discussed here is not applicable.

6

I was talking about the JSON Forms React seed. I realized that I just had to add schema in RatingControl/RatingControlProps.

const RatingControl = ({ data, handleChange, path, schema }: RatingControlProps) => {

I’m good now. Thank you!

7

Yes perfect :wink: FYI should you also ever need to access the form-wide storage of configuration, data, etc. then you can use const ctx = useJsonForms().

1 Like