Access data in a custom renderer with middleware

General
1

I’m using jsonforms v3.2.1 with Angular mapping.

I created a custom renderer that displays a graph. Now, I want to update the data for this custom graph renderer using the middleware functionality.

I need to retrieve data from several jsonforms tables, combine them, and update the data for the custom graph renderer (which is stored in the variable “donnees” in the code snippet below). However, I’m unsure how to set the custom graph renderer’s data within the state or newState input of the middleware.

Could someone please guide me on how to achieve this ?

export class GraphDisplayComponent extends JsonFormsControl implements OnInit {
  chart: any;
  donnees = {
    "2023": { sit1: 10000, sit2: 10539, sit3: 10539 },
    "2024": { sit1: 10974, sit2: 10565, sit3: 10046 },
    "2025": { sit1: 10195, sit2: 10638, sit3: 10627 },
    "2026": { sit1: 10498, sit2: 10717, sit3: 10580 },
  };

  constructor(service: JsonFormsAngularService) {
    super(service);
  }

  ngOnInit() {
    super.ngOnInit();

    const annees = Object.keys(this.donnees);
    const series = Object.keys(this.donnees[annees[0]]).map((sit) => ({
      name: this.getLibelle(sit),
      data: annees.map((annee) => this.donnees[annee][sit]),
    }));

    this.chart = (Highcharts as any).chart("monGraphique", {
      chart: {
        type: "column",
      },
      title: {
        text: "mon titre",
      },
      xAxis: {
        categories: annees,
      },
      series: series,
    });
  }
}
2

Hi @cysum,

The middleware is configured outside JSON Forms unrelated to custom renderers. The main use case for it is to allow more access in relation to JSON Forms internal actions.

If I understand correctly, then you want to hand in new data for you custom renderers. For this you would not use the middleware, instead

  • you can update the data handed over to JSON Forms, containing the updated data for your custom renderers, or
  • your custom renderer could also bypass JSON Forms and directly access / be notified from the outside about new data. You would typically choose this if the additional information comes from the environment and is not reflected in the form data.
3

1- you can update the data handed over to JSON Forms, containing the updated data for your custom renderers ==> How can i do that ?

2- your custom renderer could also bypass JSON Forms and directly access / be notified from the outside about new data … ==> I already do this way for test, my graph is outside jsonforms and i update it from jsonforms.
The reason i want to use middleware in our project is that we have multiple form versions and every month several new version are added. Schema and uischema comes from a backend and we want to centralize all dynamic data behavior within this middleware method alone (each form version is associated with a specific version of the middleware method).
In the middleware documentation, there is an example where you do some calculation on dependant field:
…
newState.data.price = newState.data.services.length * 15;
…
Can i reproduce the same behaviour for :
price field = my graph data
services = my table data
But I don’t have access to the graph’s data. Perhaps i missed the step where i set this graph’data in jsonforms ?

4

In some component you are invoking jsonforms and hand over [data]. Simply hand over a new object there with the contained changes

Updating dependent fields is a good use case for the middleware. However note that the middleware is only running when an internal action is processed in JSON Forms. So it can be used to update dependent fields when a field is changed. It can NOT be used to bring in new changes from outside JSON Forms because something in the environment changed.

Well, that’s exactly how you update dependent fields. What does not work for you there?