Hide item from anyOf list

General
1

I have anyOf in the schema that has multiple options and I don’t need all of the them in the dropdown. Is there a JSONforms way to hide some of them?
Trying listWithDetails here but it doesn’t"t help me much cause it keeps rendering the whole list

mySchema

...},
        "TableAsset": {
            "title": "TableAsset",
            "description": "--Public API--",
            "type": "object",
            "properties": {
                "name": {
                    "title": "Name",
                    "type": "string"
                },
                "type": {
                    "title": "Type",
                    "default": "table",
                    "enum": [
                        "table"
                    ],
                    "type": "string"
                },
                "id": {
                    "title": "Id",
                    "description": "DataAsset id",
                    "type": "string",
                    "format": "uuid"
                },
                "order_by": {
                    "title": "Order By",
                    "type": "array",
                    "items": {
                        "$ref": "#/definitions/Sorter"
                    }
                },
                "batch_metadata": {
                    "title": "Batch Metadata",
                    "type": "object"
                },
                "splitter": {
                    "title": "Splitter",
                    "anyOf": [
                        {
                            "$ref": "#/definitions/SplitterColumnValue"
                        },
                        {
                            "$ref": "#/definitions/SplitterMultiColumnValue"
                        },
                        {
                            "$ref": "#/definitions/SplitterDividedInteger"
                        },
                        {
                            "$ref": "#/definitions/SplitterModInteger"
                        },
                        {
                            "$ref": "#/definitions/SplitterYear"
                        },
                        {
                            "$ref": "#/definitions/SplitterYearAndMonth"
                        },
                        {
                            "$ref": "#/definitions/SplitterYearAndMonthAndDay"
                        },
                        {
                            "$ref": "#/definitions/SplitterDatetimePart"
                        }
                    ]
                },
},
            "required": [
                "name"
            ],
            "additionalProperties": false
        },

myTableAssetUISchema

const tableAssetUISchema: UISchema = {
  type: "VerticalLayout",
  elements: [
    {
      type: "Control",
      scope: "#/properties/name",
      label: "Data Asset Name",
    },
    {
      type: "Control",
      scope: "#/properties/table_name",
      label: "Table Name",
    },
    {
      type: "ListWithDetail",
      scope: "#/properties/splitter",
      options: {
        detail: {
          type: "VerticalLayout",
          elements: [
            {
              type: "Control",
              scope: "#/properties/SplitterYear",
            },
            {
              type: "Control",
              scope: "#/properties/SplitterYearAndMonth",
            },
            {
              type: "Control",
              scope: "#/properties/SplitterYearAndMonthAndDay",
            },
          ],
        },
      },
    },
  ],
}

myUISplittersSchema.

export const splitterUISchema: UISchema = {
  type: "VerticalLayout",
  elements: [
    {
      type: "Control",
      scope: "#/properties/column_name",
    },
    {
      type: "Control",
      scope: "#/properties/method_name",
      rule: {
        effect: RuleEffect.HIDE,
        condition: {},
      },
    },
  ],
}

UI still keeps rendering all the splitters options. What “ListWithDetail” seemed to do is adding this uiSchema with list of 3 selection to every item inside ‘anyOf’ so kind of messed things more
Is there a better way rather than manual js filtering?

Thanks!

2

Hi @elenajdanova,

If I understand correctly then the any-of resolves to a huge select dropdown. Sadly we don’t support dynamic hiding of options within such a dropdown. For this you need to implement a custom renderer.

The good news is that the implementation of such a custom renderer is very simple. All you need to do is to reuse the unwrapped variant of the MaterialOneOfEnumControl, filter the handed over options prop and wrap your renderer like the original one.

1 Like