Array renders without controls (Angular)

General
1

Hi all, I’m trying to render an array in the jsonforms-angular-seed app. My data is an array of strings, and my uischema is identical to the one in the array example in the docs. However, the array renders as a simple column of textareas with no add/delete buttons. It’s clear that the array-layout.renderer is not being used but I can’t figure out why.

[original thread by henry-oconnor]

2

Hi @henry-oconnor(henry-oconnor) ,
In your case the jsonforms/table.renderer.ts at master · eclipsesource/jsonforms · GitHub is used, the reason is the tester:

export const TableRendererTester: RankedTester = rankWith(
  3,
  or(isObjectArrayControl, isPrimitiveArrayControl)
);

in contrast to :

export const ArrayLayoutRendererTester: RankedTester = rankWith(
  4,
  isObjectArrayWithNesting
);

So if you want to force the use of the array-layout.renderer you need to re-register it with a different tester.
The alternative would be to extend the table-renderer with add/remove buttons, we would be happy to review a PR :wink: .

Best,
Eugen

3

[Chiranjeevi Tapal]

Is it TableRenderer that needs to be re-registered with a different tester ?

4

There are two components of a rankWith tester, its returned rank when the predicate is true and the predicate itself.

When you want to force the use of a specific renderer with rankWith, you need to make sure that you return the highest priority and that the predicate applies. In the case described above, the ArrayLayoutRenderer is not used because its predicate isObjectArrayWithNesting returns false and therefore it will return a rank of -1 instead of 4. To force the use of the ArrayLayoutRenderer over the TableRenderer one could register it with a different predicate, the rank is already higher.

For example

const MyArrayLayoutRendererTester: RankedTester = rankWith(
  4,
  isObjectArrayControl
);

should do the trick.

5

Note that there might be an easier alternative. The isObjectArrayWithNesting actually not only returns true in case of nested objects, but also when options: { detail: ‘GENERATED’ } is set in the ui schema for this element. You can find this in more detail in the documentation: Controls | JSON Forms

In that case you don’t need to reregister the control with a custom tester.