# Access data in a custom renderer with middleware

**URL:** <https://jsonforms.discourse.group/t/access-data-in-a-custom-renderer-with-middleware/2031>\
**Category:** General\
**Created:** [March 18, 2024, 10:40am UTC](https://jsonforms.discourse.group/t/access-data-in-a-custom-renderer-with-middleware/2031 "2024-03-18T10:40:21Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![cysum](https://avatars.discourse-cdn.com/v4/letter/c/49beb7/32.png) [@cysum](https://jsonforms.discourse.group/u/cysum)\
**Post date:** [March 18, 2024, 10:40am UTC](https://jsonforms.discourse.group/t/access-data-in-a-custom-renderer-with-middleware/2031/1 "2024-03-18T10:40:21Z")

</div>

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 ?

```auto
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,
    });
  }
}

```

---

<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:** [March 18, 2024, 3:50pm UTC](https://jsonforms.discourse.group/t/access-data-in-a-custom-renderer-with-middleware/2031/2 "2024-03-18T15:50:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![cysum](https://avatars.discourse-cdn.com/v4/letter/c/49beb7/32.png) [@cysum](https://jsonforms.discourse.group/u/cysum)\
**Post date:** [March 19, 2024, 7:32am UTC](https://jsonforms.discourse.group/t/access-data-in-a-custom-renderer-with-middleware/2031/3 "2024-03-19T07:32:14Z")

</div>

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 ?

---

<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:** [March 19, 2024, 8:45am UTC](https://jsonforms.discourse.group/t/access-data-in-a-custom-renderer-with-middleware/2031/4 "2024-03-19T08:45:24Z")

</div>

> [@cysum](#):
>
> 1- you can update the `data` handed over to JSON Forms, containing the updated data for your custom renderers ==\> How can i do that ?

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

> [@cysum](#):
>
> 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).

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.

> [@cysum](#):
>
> …  
> newState.data.price = newState.data.services.length \* 15;  
> …

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