# How to add a custom control/button for array items?

**URL:** <https://jsonforms.discourse.group/t/how-to-add-a-custom-control-button-for-array-items/822>\
**Category:** General\
**Created:** [June 16, 2022, 6:24pm UTC](https://jsonforms.discourse.group/t/how-to-add-a-custom-control-button-for-array-items/822 "2022-06-16T18:24:01Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Janekk](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/janekk/32/357_2.png) [@Janekk](https://jsonforms.discourse.group/u/Janekk)\
**Post date:** [June 16, 2022, 6:24pm UTC](https://jsonforms.discourse.group/t/how-to-add-a-custom-control-button-for-array-items/822/1 "2022-06-16T18:24:01Z")

</div>

Hello,

I’d like to add a button to each entry of an array field. Let’s assume my data looks like:

```auto
"name": "Customer Order",
"payments": [
    {
      "status": "paid",
      "amount": 322
    },
    {
      "status": "unpaid",
      "amount": 100
    }
  ]

```

and json schema is:

```auto
{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "minLength": 1
    },
    "payments": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "status": { "type": "string" },
          "amount": { "type": "number" }
        }
      }
    }
  },
  "required": ["name"]
}

```

I’d like to add an action button on each rendered item. Could you guide me on how to achieve that?

Btw. I managed to add a custom button on objects that are not array items. I did that by following your example with adding a field to schema.json ([Custom Renderers - JSON Forms](https://jsonforms.io/docs/tutorial/custom-renderers#2-add-the-field-to-schemajson)) and implementing a tester that would check on the existence of custom fields in the json schema:

```auto
export function buttonTesterFactory({rank=3, action=undefined}) {
  return rankWith(
    rank, //increase rank as needed
    schemaMatches((schema) => {
      return schema.form?.type === "button" && (action && action === schema.form?.action)
    }
  )
  )
}

```

and renderer:

```export
  const {buttonLabel, onClick, isLoading} = props
  return (
    <Grid container>
      <Grid item xs={12}>
        <LoadingButton 
          sx={{marginBottom: '1rem'}}
          variant="contained"
          onClick={onClick}
          loading={isLoading}
        >
          {buttonLabel}
        </LoadingButton>
      </Grid>
    </Grid>
  );
};

```

but when trying to do the same for object being array item, it seems like the tester isn’t being matched. Is there a way to implement a tester to match objects being array items? (or maybe this can be achieved using uischema?)

---

<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:** [June 17, 2022, 3:21pm UTC](https://jsonforms.discourse.group/t/how-to-add-a-custom-control-button-for-array-items/822/2 "2022-06-17T15:21:21Z")

</div>

Hi @Janekk,

we can render arrays in two different ways, either as a table or as a layout. In your case it will be rendered by default as a table because your `items` object is flat. You can force the array layout by setting the `detail` UI Schema option, see [here](https://jsonforms.io/docs/uischema/controls#the-detail-option). With that option you can just use your custom tester/renderer combo again.

If you like to render an additional button into the table, next to the existing buttons, you will have to create a custom table renderer. Alternatively, you could very hackily (like indicated with your custom tester?) add a third column by specifying another property for your `items` object and then just render a button instead of a property there. However I would not recommend that approach 😉 Note that when you want to customize the content of a table cell, you need to register a custom `cell` instead of a custom `renderer`. The concepts are the same, just the interfaces are a bit different.

Does this answer your question?

---

<div class="post-metadata">

**Author:** ![Janekk](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/janekk/32/357_2.png) [@Janekk](https://jsonforms.discourse.group/u/Janekk)\
**Post date:** [June 20, 2022, 10:51am UTC](https://jsonforms.discourse.group/t/how-to-add-a-custom-control-button-for-array-items/822/3 "2022-06-20T10:51:04Z")

</div>

Thanks @sdirix , using Ui schema with `detail` config helped! Will try using `cell` rendering