Enhancement: Conditional UI for Metadata

[estruyf]

Discussed in #357

^{Originally posted by bwklein June 13, 2022}
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.

Solution

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

[michaeltlombardi]

Love this idea. Another use case for conditional metadata is when it applies only to section pages (for example, _index.md files for a hugo site).

[estruyf]

Good news @michaeltlombardi and @bwklein, this is now supported in the latest beta version.

Sample

{
  "title": "Description",
  "name": "description",
  "type": "string",
  "when": {
    "fieldRef": "title",
    "operator": "contains",
    "value": "website",
    "caseSensitive": false
  }
}

Important: By default it is case sensitive, if you want, you can turn this off by setting the caseSensitive property to false.

Operator

The following operators are supported:

type	value
equals	eq
notEquals	neq
contains	contains
notContains	notContains
startsWith	startsWith
endsWith	endsWith
greaterThan	gt
greaterThanOrEqual	gte
lessThan	lt
lessThanOrEqual	lte

[michaeltlombardi]

@estruyf I finally got some time to dig in today, looking to make the section-only metadata (in my case, controlling whether a section is collapsed or flattened in site navigation) conditional. I'm not savvy enough with the code base yet to follow things around properly, but I can intuitively see how this implementation works conditionally on other metadata fields - is there a way to reference the file name in this implementation?

I'm looking to make something like this work:

Example JSON Definition

{
  "name": "default",
  "$schema": "https://beta.frontmatter.codes/config/taxonomy.contenttypes.schema.json",
  "pageBundle": false,
  "fields": [
    {
      "title": "Platen",
      "type": "fields",
      "name": "Platen",
      "fields": [
        {
          "title": "Menu options",
          "name": "Menu",
          "type": "fields",
          "fields": [
            {
              "title": "Flatten section in site menu",
              "name": "FlattenSection",
              "type": "boolean",
              "when": {
                "fieldRef": "file.baseName",
                "operator": "eq",
                "value": "_index.md"
              }
            },
            {
              "title": "Collapse section in site menu",
              "name": "CollapseSection",
              "type": "boolean",
              "when": {
                "fieldRef": "file.baseName",
                "operator": "eq",
                "value": "_index.md"
              }
            },
            {
              "title": "Hide from site menu",
              "description": "Applicable to any page.",
              "name": "Hide",
              "type": "boolean"
            }
          ]
        }
      ]
    }
  ]
}

Where the Platen.Menu.Hide setting is available for any page but Platen.Menu.FlattenSection and Platen.Menu.CollapseSection are only visible/usable for section pages, which always have a file name of _index.md.