How to access the root uischema in a renderer?

Unlike schema (rootSchema in control), it looks like there is no root uischema. Is there a way to access the root uischema in a renderer?

Hi @jos ,
which renderer set and framework (e.g. react, angular, vue) are you using?

In React, you can get the whole Jsonforms state via the useJsonForms() hook.
E.g

const ctx = useJsonForms();
const rootUiSchema = ctx.core.uischema;

If you want to inject this rootUiSchema into multiple renderers, you could implement a reusable HOC similar to the withJsonFormsXXXProps top level HOC in packages/react/src/JsonFormsContext.tsx

In Angular, you can get the JsonForms state via the injectable service JsonFormsAngularService’s method getState. From this, you can also extract the global ui schema again.

I hope that helps. Cheers,
Lucas

Hi @lucas-koehler,

I’m using Vue 2 and make my own custom renderers, using @jsonforms/core and @jsonforms/vue2.

Given your hints, I found out that I can define a function (Vue computed) providing the root uischema this way:

    rootUischema() {
      const jsonforms = inject('jsonforms');
      return jsonforms.core.uischema;
    },

Is this the best/most efficient way to do this or does the Vue binding offer something else? I had already been using a similar function providing the global data, core.data.

Thanks so far,
Jos

Hi @jos,
yes your approach is correct. Just make sure you don’t edit the jsonforms object provided by inject('jsonforms') directly. Also see here for more information on this: jsonforms/packages/vue2/vue2 at master · eclipsesource/jsonforms · GitHub