Array not rendering. Add button is missing

General
1

I am trying to set up code in local using angular seed.
Trying to render an array following Array Example - JSON Forms.
Getting this

Screenshot 2021-06-08 at 6.40.13 PM.png
Screenshot 2021-06-08 at 6.40.13 PM.png1413×485 28.6 KB

The “+” button is missing.
Not sure what I am missing. Copied the schema and uischema from web page.

[original thread by Chiranjeevi Tapal]

2

[henry-oconnor]

I had the same issue, it was resolved here:

3

[Chiranjeevi Tapal]

Hi @henry-oconnor(henry-oconnor) . Thanks for the quick response. I tried adding a new renderer as stated in the thread
const ArrayLayoutRendererTester: RankedTester = rankWith( 4, isObjectArrayWithNesting );

and

renderers = [
    ...angularMaterialRenderers,
    {
      renderer: ArrayLayoutRenderer,
      tester: ArrayLayoutRendererTester
    }
  ];

I believe I am missing something. Please suggest.

4

[Chiranjeevi Tapal]

5

[Chiranjeevi Tapal]

Adding a screenshot of full component

6

Hi @chiranjeevi-tapal(chiranjeevi-tapal), as indicated in https://spectrum.chat/jsonforms/general/array-renders-without-controls-angular~bd9ecf4e-77d7-4216-9a26-e3c61f41fb56?m=MTYyMzMxMTM2MzAyMQ==https://spectrum.chat/jsonforms/general/array-renders-without-controls-angular~bd9ecf4e-77d7-4216-9a26-e3c61f41fb56 you need to make sure that the predicate of your custom tester matches your schema. Therefore if you also want it to apply in the “non-nested” case you need to use a more generic predicate or write it yourself. In your case isObjectArrayControl should do the trick.

Note that if you prefer to configure this declaratively, you could also just add options: { detail: GENERATED } to the respective ui schema element and don’t do a custom renderer registration at all.

7

[Chiranjeevi Tapal]

Hi @sdirix(sdirix) . Thank you for replying. I tried using options in ui-schema, but the browser started throwing below exception. Please note that I did not make any changes in the Angular seed application except copied the the schemas from Array | JSON Forms

core.js:6210 ERROR TypeError: Cannot read property 'scope' of undefined
    at ArrayLayoutRenderer.push.pdlW.ArrayLayoutRenderer.getProps (array-layout.renderer.js:127)
    at ArrayLayoutRenderer_div_11_Template (array-layout.renderer.js:90)
    at executeTemplate (core.js:9600)
    at refreshView (core.js:9466)
    at refreshEmbeddedViews (core.js:10591)
    at refreshView (core.js:9490)
    at refreshComponent (core.js:10637)
    at refreshChildComponents (core.js:9263)
    at refreshView (core.js:9516)
    at refreshEmbeddedViews (core.js:10591)

My ui-schema looks like this.

{
       "type": "Control",
       "scope": "#/properties/comments",
       "options": {
             "detail": "GENERATED"
          }
       }

Moreover, I am looking for a way to avoid using ui-schema, as I need to allow user to edit/customize Json schema and want to leave ui-schema to be autogenerated by Jsonforms.

8

Hi @chiranjeevi-tapal(chiranjeevi-tapal), we have to investigate what the problem is. As you already have it locally running it would be great when you could open a bug report and push the reproducible example on some public branch so we can just try it.

Regarding your use case: Of course when you don’t want to manually adapt the ui schema the best way to go is via the custom renderer registration.

9

@sdirix You can observe/reproduce this issue in [PREVIEW ANGULAR]

jsonforms-editor.netlify.app

10

Hi @bappctl, which issue do you mean exactly? This is quite an old thread with multiple topics.

11

@sdirix
The issue is while rendering array in angular the “+” button is missing.

12

ANGULAR:

image
image1078×263 6.97 KB

13

image
image1078×414 7.06 KB

14

Add and Remove are just not part of the Angular table renderer at the moment. There is an open issue for this.