Accessing jsonforms schema from a custom renderer

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.

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.

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

1 Like