adam/vscode-front-matter
1
0 Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-11-04 01:22:21 +01:00
Code Issues 77 Packages Projects Releases Wiki Activity

Enhancement: Conditional UI for Metadata #289

New Issue
Closed
opened 2026-10-05 02:38:05 +02:00 by adam · 3 comments
adam commented 2026-10-05 02:38:05 +02:00
Owner
Copy link
Copy source

Discussed in https://github.com/estruyf/vscode-front-matter/discussions/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
	}
}
### Discussed in https://github.com/estruyf/vscode-front-matter/discussions/357 <div type='discussions-op-text'> <sup>Originally posted by **bwklein** June 13, 2022</sup> 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.</div> ## Solution ```json { "title": "Logo Heading", "name": "logoHeading", "type": "string", "when": { "property": "heading", "operator": "eq", "value": true } } ``` <!-- github-sync-id:1273125397 -->
adam closed this issue 2026-10-05 02:38:05 +02:00
adam commented 2026-10-05 02:38:06 +02:00
Author
Owner
Copy link
Copy source

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).

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). <!-- github-comment-id:1236021850 -->
adam commented 2026-10-05 02:38:07 +02:00
Author
Owner
Copy link
Copy source

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
Good news @michaeltlombardi and @bwklein, this is now supported in the latest beta version. ### Sample ```json { "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` | <!-- github-comment-id:1314217069 -->
adam commented 2026-10-05 02:38:08 +02:00
Author
Owner
Copy link
Copy source

@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.

@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: <details> <summary>Example JSON Definition</summary> ```json { "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" } ] } ] } ] } ``` </details> 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`. <!-- github-comment-id:1323773350 -->
Sign in to join this conversation.
No Branch/Tag Specified
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
adam (Adam Wojcieszonek)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: adam/vscode-front-matter#289