groups[*]

On this page

Description:

This key represents an individual group object in the values[*].groups array.

The value is an object that groups inputs together within a structure value without changing the data structure. Each group typically contains a heading and inputs array.

Appears in:
└── [*]
    └── groups
        └── [*]
Type:
Object
Properties:
collapsedboolean#

This key defines whether a group is collapsed or expanded when first viewed.

The value is a boolean. When true, CloudCannon displays the group in a collapsed state. When false, CloudCannon displays the group in an expanded state.

By default, CloudCannon displays groups in an expanded state.

Defaults to: false

Appears in: groups[*].

Show examplesHide examples

In this example, we have configured the "Details" group to be collapsed by default.

Copied to clipboard
_structures:
  article_information:
    values:
      - label: Blog
        value:
          title: 
          subtitle: 
          author: 
        groups:
          - heading: Titles
            collapsed: true
            inputs:
              - title
              - subtitle
          - heading: Details
            inputs:
              - author
{
  "_structures": {
    "article_information": {
      "values": [
        {
          "label": "Blog",
          "value": {
            "title": null,
            "subtitle": null,
            "author": null
          },
          "groups": [
            {
              "heading": "Titles",
              "collapsed": true,
              "inputs": [
                "title",
                "subtitle"
              ]
            },
            {
              "heading": "Details",
              "inputs": [
                "author"
              ]
            }
          ]
        }
      ]
    }
  }
}
commentstring#

This key defines the subtext displayed below the heading for a group.

The value is a string that supports a limited set of Markdown: links, bold, italic, subscript, superscript, and inline code elements are allowed.

Appears in: groups[*].

Show examplesHide examples

In this example, we have configured a group comment with Markdown formatting to provide additional context below the heading.

Copied to clipboard
_structures:
  article_information:
    values:
      - label: Blog
        value:
          title: 
          subtitle: 
          author: 
        groups:
          - heading: Titles
            comment: Make these SEO-friendly
            inputs:
              - title
              - subtitle
          - heading: Details
            inputs:
              - author
{
  "_structures": {
    "article_information": {
      "values": [
        {
          "label": "Blog",
          "value": {
            "title": null,
            "subtitle": null,
            "author": null
          },
          "groups": [
            {
              "heading": "Titles",
              "comment": "Make these SEO-friendly",
              "inputs": [
                "title",
                "subtitle"
              ]
            },
            {
              "heading": "Details",
              "inputs": [
                "author"
              ]
            }
          ]
        }
      ]
    }
  }
}

This key defines the documentation link at the top of a Collection browser.

Collection documentation is useful for assisting your team members.

Appears in: collections_config.*, Text Input, Textarea Input, Code Input, Color Input, Boolean Input, Number Input, Range Input, Rich Text Input, URL Input, Select Input, Date/Datetime Input, Time Input, File Input, Multiselect Input, Choice Input, Multichoice Input, Object Input, groups[*], [*], options.entries, groups[*], Array Input.

Show examplesHide examples

In this example, the documentation link for the data Collection goes to CloudCannon Documentation.

Copied to clipboard
collections_config:
  data:
    documentation:
      url: https://cloudcannon.com/documentation/
      text: CloudCannon Documentation
      icon: star
{
  "collections_config": {
    "data": {
      "documentation": {
        "url": "https://cloudcannon.com/documentation/",
        "text": "CloudCannon Documentation",
        "icon": "star"
      }
    }
  }
}
headingstring#

This key defines the main text for the group shown when collapsed or expanded.

The value is a string that specifies the heading text displayed for the group.

Appears in: groups[*].

Show examplesHide examples

In this example, we have configured a group heading to organize structure inputs under the "Titles" heading.

Copied to clipboard
_structures:
  article_information:
    values:
      - label: Blog
        value:
          title: 
          subtitle: 
          author: 
        groups:
          - heading: Titles
            inputs:
              - title
              - subtitle
          - heading: Details
            inputs:
              - author
{
  "_structures": {
    "article_information": {
      "values": [
        {
          "label": "Blog",
          "value": {
            "title": null,
            "subtitle": null,
            "author": null
          },
          "groups": [
            {
              "heading": "Titles",
              "inputs": [
                "title",
                "subtitle"
              ]
            },
            {
              "heading": "Details",
              "inputs": [
                "author"
              ]
            }
          ]
        }
      ]
    }
  }
}

This key defines which inputs are included in a group within a structure value.

The value is an array of input key name strings that specify which inputs belong to this group.

Appears in: groups[*].

Show examplesHide examples

In this example, we have configured a group to include the title and subtitle inputs.

Copied to clipboard
_structures:
  article_information:
    values:
      - label: Blog
        value:
          title: 
          subtitle: 
          author: 
        groups:
          - heading: Titles
            inputs:
              - title
              - subtitle
          - heading: Details
            inputs:
              - author
{
  "_structures": {
    "article_information": {
      "values": [
        {
          "label": "Blog",
          "value": {
            "title": null,
            "subtitle": null,
            "author": null
          },
          "groups": [
            {
              "heading": "Titles",
              "inputs": [
                "title",
                "subtitle"
              ]
            },
            {
              "heading": "Details",
              "inputs": [
                "author"
              ]
            }
          ]
        }
      ]
    }
  }
}
Examples:

In this example, we have configured a group with a heading and inputs array to organize structure inputs.

Copied to clipboard
_structures:
  article_information:
    values:
      - label: Blog
        value:
          title: 
          subtitle: 
          author: 
        groups:
          - heading: Titles
            inputs:
              - title
              - subtitle
          - heading: Details
            inputs:
              - author
{
  "_structures": {
    "article_information": {
      "values": [
        {
          "label": "Blog",
          "value": {
            "title": null,
            "subtitle": null,
            "author": null
          },
          "groups": [
            {
              "heading": "Titles",
              "inputs": [
                "title",
                "subtitle"
              ]
            },
            {
              "heading": "Details",
              "inputs": [
                "author"
              ]
            }
          ]
        }
      ]
    }
  }
}
Open in a new tab