How to use a custom renderer for string inside an array of strings

General
1

I have createa custom renderer to handle any control with “autocomplete: true” in options. So any string or number is displayed using autocomplete control.

Now I have array of strings and I am trying to get an item of this array rendered using my custom autocomplete renderer.

“ids”: {
“type”: “array”,
“description”: “The list of principal IDs”,
“items”: {
“type”: “string”
}
}

I tried using some of the options following examples but no luck. I tried
{
“type”: “Control”,
“scope”: “#/properties/principal_ids”,
“detail”:{
“elements”:[
{
“type”: “Control”,
“scope”: “#”,
“options”: {
“autocomplete”: true
}
}
]
}
}

but it didnt work. Please let me know how it can be done

2

Hi @rameshjanjyam,

To customize the content of a table (primitive arrays are rendered as a table by default) you need to provide a custom cell, not a custom renderer.

Note that we don’t offer an option to customize the cells of a table via the UI Schema, so you will not be able to declaratively set the autocomplete option on a cell of a table without also providing a custom table renderer.

3

Thank you @sdirix. I ran across this article - How to create Custom Cell Renderer in JSON Forms: ReactJs | by Anand Ratna | Medium
I will create a cell renderer and see how it works.

thanks for replying.