UI Schema for anyOf with $refs

[emmalcg]

Prerequisites

• I have read the documentation

What theme are you using?

core

What is your question?

Hey, i am struggling with writing a full uischema for my json schema, which contains anyOf. I have it working and showing the correct labels and descriptions for everything up until items nested in components. I couldn't find any examples of anyOf uischemas on the website and playground, and am wondering what the correct syntax would be for this and what i am doing wrong! thank you

jsonSchema:

{
  "type": "object",
  "properties": {
    "name": {
      "title": "name",
      "type": "string",
    },
    "iconUrl": {
      "title": "Icon URL",
      "type": "string"
    },
    "pages": {
      "type": "array",
      "title": "Pages",
      "minLength": 1,
      "items": {
        "type": "object",
        "$ref": "#/definitions/page"
      }
    }
  },
  "required": ["name", "pages"],
  "definitions": {
   "page": {
      "type": "object",
      "properties": {
        "components": {
          "type": "array",
          "title": "Components",
          "minLength": 1,
          "items": {
            "type": "object",
            "anyOf": [
              {
                "$ref": "#/definitions/badge"
              },
              {
                "$ref": "#/definitions/banner"
              }
            ]
          }
        },
        "callToAction": {
          "title": "Call To Action",
          "type": "object",
          "properties": {
            "url": {
              "type": "string",
              "title": "URL"
            },
            "text": {
              "type": "string",
              "title": "Text"
            }
          }
        }
      },
      "required": ["components"]
    },
    "banner": {
      "title": "Banner",
      "type": "object",
      "properties": {
        "componentType": {
          "type": "string",
          "const": "Banner"
        },
        "componentAttributes": {
          "type": "object",
          "properties": {
            "type": {
              "title": "Type",
              "type": "string",
              "enum": [
                "primary",
                "secondary",
                "subtle"
              ]
            },
            "title": {
              "title": "Title",
              "type": "string"
            },
            "iconUrl": {
              "title": "Icon Url",
              "type": "string"
            },
            "richText": {
              "title": "Rich Text",
              "type": "string",
              "format": "rich-text"
            }
          },
          "required": ["type", "title", "iconUrl", "richText"]
        }
      }
    },
    "badge": {
      "title": "Badge",
      "type": "object",
      "properties": {
        "componentType": {
          "type": "string",
          "const": "badge"
        },
        "componentAttributes": {
          "type": "object",
          "properties": {
            "style": {
              "title": "Style",
              "type": "string",
              "enum": ["category"]
            },
            "text": {
              "title": "Text",
              "type": "string"
            },
            "altText": {
              "title": "Alt Text",
              "type": "string"
            },
            "iconUrl": {
              "title": "Icon Url",
              "type": "string"
            }
          },
          "required": ["text"]
        }
      }
    }
  }
}

uiSchema

{
  "name": {
    "ui:title": "title for name",
    "ui:description": "description for name",
    "ui:hint": "hint for name"
  },
  "iconUrl": {
    "ui:title": "Icon URL",
    "ui:description": "Enter icon URL",
    "ui:hint": "Tooltip for icon URL"
  },
  "category": {
    "ui:title": "Category",
    "ui:description": "Select category",
    "ui:hint": "Tooltip for category"
  },
  "activityId": {
    "ui:title": "Activity ID",
    "ui:description": "Enter activity ID",
    "ui:hint": "Tooltip for activity ID"
  },
  "pages": {
    "ui:title": "test pages",
    "ui:description": "test description",
    "items": {
      "components": {
        "ui:title": "Components Title",
        "ui:description": "components that make up the page",
        "items": {
          "anyOf": {
            "banner": {
              "ui:title": "test Banner",
              "ui:description": "description for banner",
              "ui:hint": "hint for banner component",
              "componentType": {
                "ui:title": "component type banner"
              },
              "componentAttributes": {
                "type": {
                  "ui:title": "banner type title"
                },
                "title": {
                  "ui:title": "title title"
                },
                "iconUrl": {
                "ui:title": "icon url banner title"
                },
                "richText": {
                "ui:title": "richtext title"
                }
              }
            },
            "badge": {
              "ui:title": "test badge",
              "ui:description": "description for badge",
              "ui:hint": "hint for badge component",
              "componentType": {
                "ui:title": "component type badge"
              },
              "componentAttributes": {
                "style": {
                  "ui:title": "style title"
                },
                "text": {
                  "ui:title": "text title"
                },
                "iconUrl": {
                "ui:title": "iconUrl badge title"
                },
                "altText": {
                "ui:title": "altText title"
                }
              }
            }
          }
        }
      },
      "callToAction": {
        "ui:title": " Call To Action",
        "ui:description": " This is a call to action component",
        "ui:hint": "hint for call to action component"
      }
    }
  }
}

[heath-freenome]

@emmalcg Here's a playground with your use case. And you are right we currently don't have a way of dealing with anyOf/oneOf conditions in the uiSchema. And maybe we should.

[emmalcg]

@heath-freenome thanks! just noticing that the uiSchema still isn't being applied to any of the items within anyOf .
Is that what you mean there is no way of dealing with anyOf / oneOf conditions in the uiSchema ?
Is there a workaround to get a uiSchema working for things referenced within anyOf / oneOf` ?

[heath-freenome]

@emmalcg I am working on a fix to support anyOf/oneOf in uiSchema. I'll reference this issue when the PR is ready