Conditional UI for Metadata

[bwklein]

I would like to show only the fields that are required based on some boolean or choice field selections.

For example, I have a 'Heading' partial that can either have text based title or a logo based heading.
I would like to allow the editor to choose if they want a text or logo based heading with a boolean choice like "Logo Heading?"

If true, then I would like to show them a Logo choice field and a string field for 'Classes' that they can pass in to style the logo. Essentially showing them a Field Group for the 'Logo' settings.

If false, then I would like to show the fieldgroup for the "Text" heading data.

[bwklein]

BTW, I would store the 'option' as a field in front matter data, so that the setting would be preserved and could be used for conditional operations in layouts/partials/components, etc.

[zivbk1]

@estruyf I wasn't sure if I should start with a discussion, or go straight into an Enhancement request.

[estruyf]

No worries, it is fine here. We can always create an enhancement/issue out of it.

So the fields have a dependency on the outcome of the "parent" field. It feels like a combination of a block field and a fields field.

Need to think about it a bit about how we can make this happen. Could be a when property that validates a statement.

For example:

{
	"title": "Logo Heading",
	"name": "logoHeading",
	"type": "string",
	"when": {
		"property": "heading",
		"operator": "eq",
		"value": true
	}
}

[zivbk1]

Here is an example using this method...

{
  "frontMatter.taxonomy.fieldGroups": [
    {
      "id": "heading-centered",
      "labelField": "name",
      "fields": [
        {
          "title": "Section Name",
          "name": "name",
          "type": "string",
          "single": true
        },
        {
          "title": "Logo for Title?",
          "name": "logo_title",
          "type": "boolean"
        },
        {
          "title": "Top Text",
          "name": "toptext",
          "type": "string",
          "single": true
        },
        {
          "title": "Title",
          "name": "title",
          "type": "string",
          "single": true,
          "when": {
            "property": "logo_title",
            "operator": "eq",
            "value": false
          }
        },
        {
          "title": "Subtitle",
          "name": "subtitle",
          "type": "string"
        },
        {
          "name": "logo",
          "title": "Logo",
          "type": "choice",
          "choices": [
            {
              "id": "teci-logo",
              "title": "TECi"
            },
            {
              "id": "pyrosim-logo",
              "title": "PyroSim"
            },
            {
              "id": "pathfinder-logo",
              "title": "Pathfinder"
            },
            {
              "id": "petrasim-logo",
              "title": "PetraSim"
            }
          ],
          "when": {
            "property": "logo_title",
            "operator": "eq",
            "value": true
          }
        }
      ]
    }
  ]
}

[estruyf]

Issue created - #362