☁️ Loving our new documentation website? Provide feedback in the CloudCannon Community! ✨

groups[*]

Table of contents

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

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.

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.

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.

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.

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