Why is custom renderer always firing? Desired outcome is for it to be triggered on array item selection

General
1

Hi,

With react using the ratings example I am trying to render it when array selection is ‘selection_2’ however it is always showing. The default renderer of string works as expected and shows with selection of ‘selection_1’. Any ideas?

Schema

{
  "type": "object",
  "properties": {
    "content_name": {
      "type": "string",
      "minLength": 3
    },
    "selection": {
      "type": "string",
      "title": "Select your option",
      "oneOf": [
        {
          "const": "selection_1",
          "title": "selection 1 show only string"
        },
        {
          "const": "selection_2",
          "title": "selection 2 show only rating"
        }
      ]
    },
    "some-string": {
      "type": "string"
    },
    "some-rating": {
      "type": "integer"
    }
  },
  "additionalProperties": true,
  "required": [
    "content_name"
  ]
}

uiSchema

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/content_name"
    },
    {
      "type": "Control",
      "scope": "#/properties/selection"
    },
    {
      "type": "Control",
      "scope": "#/properties/some-string",
      "rule": {
        "effect": "SHOW",
        "condition": {
          "scope": "#/properties/selection",
          "schema": {
            "enum": [
              "selection_1"
            ]
          }
        }
      }
    },
    {
      "type": "Control",
      "scope": "#/properties/some-rating",
      "rule": {
        "effect": "SHOW",
        "condition": {
          "scope": "#/properties/selection",
          "schema": {
            "enum": [
              "selection_2"
            ]
          }
        }
      }
    
    }
  ]
}

Tester

import { rankWith, scopeEndsWith } from '@jsonforms/core';

export default rankWith(
  3, // Increase rank as needed
  scopeEndsWith('rating')
);
2

Hi @johno_1000,

Is this about the RatingControl which is implemented in the JSON Forms React seed? That control is very simple. It will be handed over a visible: false prop which it should respect, however as you can see it just ignores it and renders anyway.

Conceptually every renderer has its own rendering under full control. However it should play nice and if indicated visible: false it should then also not render anything.

3

Thank you for the swift response @sdirix but apologies I dont quite follow. Yes I have used the rating control in the seed for testing purposes.

Some-rating field is not supposed to show at all when form is displayed (right now it shows below the dropdown). Then, this field should only become visible when selection_2 is picked. Do you mean that some-rating should be hidden, until picking selection_2 makes it visible? How would that be achieved?

Additionally, when selection_1 is picked, rating field is shown anyway - it’s not being shown when selection_1 is picked, it’s been there all this time, since the page loaded. Would that require hiding in some way?

Thanks.

4

This is the current implementation of RatingControl:

const RatingControl = ({ data, handleChange, path }: RatingControlProps) => (
  <Rating
    value={data}
    updateValue={(newValue: number) => handleChange(path, newValue)}
  />
);

As you can see, it ignores all but three props handed over to it.

It needs to be improved to react to visible hints, e.g.

const RatingControl = ({ data, handleChange, path, visible }: RatingControlProps) => {
  if (!visible) {
    return null;
  }
  return (
    <Rating
      value={data}
      updateValue={(newValue: number) => handleChange(path, newValue)}
    />
  );
}

Also it should be enhanced to for example react to enabled.

1 Like
5

Perfect that sorted it, thanks!