Guidance Needed -: How to add custom fields.

[sagarneo11]

Need to understand how/what format we can add custom field, I want to add a custom type for array where data thats added into popup form will be added into data grid inlace of list.

if some one can help me understanding how I can add custom field I will contribute back to the repo with the changes that I am doing.

for now I have added a field type, I can drag a field type, I get default repeat list, I want to change this view.

Please help

[sagarneo11]

I will provide documentation of functionality once I complete it.

[miguelgrc]

Hi @sagarneo11, sorry for the late response. If I understand correctly you want to create a custom array type that instead of showing elements as a list shows them as rows in a table, right? That would require some changes in the formule code but it's definitely feasible.

Normally you would add fields like in this example. However, arrays are a bit of an special case currently, we have several types and they are customized with field templates, so adding a custom array type implies some extra steps that require some changes to the formule code. After adding your field type to fieldTypes.jsx you would have to implement the new logic in a new component which receives the items and displays them in a table. Then you would have to check NormalArrayFieldTemplate.jsx, which contains some logic to display the corresponding type of array (layer, accordion, or default), and add your new type to getArrayContent.

It might help you to look at the implementation for LayerArrayFieldTemplate.jsx and at how it's used. Note that to add a layer array field to your form you have to drag and drop a layer field into an array aka list field. We would like to make this a bit more straightforward in the future, but that's the way formule works right now and it would be the same for your new array type.

Let me know if this helps and feel free to open a PR with your proposal.

Cheers, Miguel

[miguelgrc]

Actually, can you clarify your use case a bit more?

With the approach I indicated in my previous comment you would be able to use the field nesting features of formule and add any type of field inside rows of your table array component, but it might be overkill and not what you want (and might make little sense in terms of UI/UX).

If you simply want to display text/numerical data as part of a table that could also be editable you could create a normal custom field which renders an antd table with editable cells / editable rows. You would add a table field to uiSchema with the content of your table, either as an array of objects [{column1: "value11", column2: "value12"}, {column1: "value21", column2: "value22"}, ...] or as two arrays, one for columns and one for dataSource (as done by antd) and work with that.