Configure the Add button in collections

Last modified: January 14th, 2024

Working with a specific static site generator?
Customize CloudCannon's documentation to suit your SSG.

Great! We'll show you documentation relevant to .
You can change this any time using the dropdown in the navigation bar.

CloudCannon provides a good default set of actions in the +Add menu in the collection file list. These actions are generated from schemas configured for that collection. If there are no schemas, actions are generated based on the first file in that collection.

You can override these default actions with the add_options option when defining your collections.

You can make actions for the current collection, other collections, and external links.

Examples#

Some example configurations are shown below:

cloudcannon.config.yaml
copied
collections_config:
  posts:
    add_options:
      - name: Add Post
        editor: content
      - name: Add Draft
        editor: content
        collection: drafts
        schema: default
cloudcannon.config.json
copied
{
  "collections_config": {
    "posts": {
      "add_options": [
        {
          "name": "Add Post",
          "editor": "content"
        },
        {
          "name": "Add Draft",
          "editor": "content",
          "collection": "drafts",
          "schema": "default"
        }
      ]
    }
  }
}
cloudcannon.config.cjs
copied
module.exports = {
  collections_config: {
    posts: {
      add_options: [
        {
          name: "Add Post",
          editor: "content"
        },
        {
          name: "Add Draft",
          editor: "content",
          collection: "drafts",
          schema: "default"
        }
      ]
    }
  }
};
cloudcannon.config.yaml
copied
collections_config:
  pages:
    add_options:
      - name: New page
      - name: New contact page
        default_content_file: content/pages/contact.html
  people:
    add_options:
      - name: Add Staff Member
        schema: staff
      - name: Add Author
        icon: edit
        schema: author
        base_path: authors
    schemas:
      staff:
        path: schemas/staff.json
      author:
        path: schemas/author.json
  offices:
    add_options:
      - name: Add Office
        editor: data
      - name: Add Office Location
        icon: public
        href: edit?editor=data&path=_data/office-locations.yml
      - name: Open external link
        icon: search
        href: https://www.example.com/
cloudcannon.config.json
copied
{
  "collections_config": {
    "pages": {
      "add_options": [
        {
          "name": "New page"
        },
        {
          "name": "New contact page",
          "default_content_file": "content/pages/contact.html"
        }
      ]
    },
    "people": {
      "add_options": [
        {
          "name": "Add Staff Member",
          "schema": "staff"
        },
        {
          "name": "Add Author",
          "icon": "edit",
          "schema": "author",
          "base_path": "authors"
        }
      ],
      "schemas": {
        "staff": {
          "path": "schemas/staff.json"
        },
        "author": {
          "path": "schemas/author.json"
        }
      }
    },
    "offices": {
      "add_options": [
        {
          "name": "Add Office",
          "editor": "data"
        },
        {
          "name": "Add Office Location",
          "icon": "public",
          "href": "edit?editor=data&path=_data/office-locations.yml"
        },
        {
          "name": "Open external link",
          "icon": "search",
          "href": "https://www.example.com/"
        }
      ]
    }
  }
}
cloudcannon.config.cjs
copied
module.exports = {
  collections_config: {
    pages: {
      add_options: [
        {
          name: "New page"
        },
        {
          name: "New contact page",
          default_content_file: "content/pages/contact.html"
        }
      ]
    },
    people: {
      add_options: [
        {
          name: "Add Staff Member",
          schema: "staff"
        },
        {
          name: "Add Author",
          icon: "edit",
          schema: "author",
          base_path: "authors"
        }
      ],
      schemas: {
        staff: {
          path: "schemas/staff.json"
        },
        author: {
          path: "schemas/author.json"
        }
      }
    },
    offices: {
      add_options: [
        {
          name: "Add Office",
          editor: "data"
        },
        {
          name: "Add Office Location",
          icon: "public",
          href: "edit?editor=data&path=_data/office-locations.yml"
        },
        {
          name: "Open external link",
          icon: "search",
          href: "https://www.example.com/"
        }
      ]
    }
  }
};

For the offices collection, this will result in the following menu:

Screenshot of a collection with add options configured

Options#

Each add_options entry has the following options:

name - String#

The text displayed for the menu item. Defaults to using name from the matching schema if set.

icon - String#

The icon next to the text in the menu item. Must match a Material Icon name. Defaults to using icon from the matching schema if set, then falls back to add.

href - String#

The link that opens when the option is clicked. Can either be an external or internal link. If internal, the link is relative to the current site.

If this is set, the collection, editor, base_path and schema options are ignored. Since this acts as an override, we recommend using those options directly in favor of this if possible.

editor - String#

The editor to open the new file in. Must be one of content, data, or visual. Defaults to an appropriate editor for new file's type if possible. If no default editor can be calculated, or the editor does not support the new file type, a warning is shown in place of the editor.

base_path - String#

Enforces a path for new files to be created in, regardless of path the user is currently navigated to within the collection file list. Relative to the path of the collection defined in collection. Defaults to the path within the collection the user is currently navigated to.

collection - String#

Sets which collection this action is creating a file in. This is used when matching the value for schema. Defaults to the containing collection these add_options are configured in.

schema - String#

The schema that new files are created from with this action. This schema is not restricted to the containing collection, and is instead relative to the collection specified with collection. Defaults to default if schemas are configured for the collection.

Although useful, it's not required to configure schemas for the initial contents of new files.

default_content_file - String#

The path to a file used to populate the initial contents of a new file if no schemas are configured. We recommend using schemas, and this is ignored if a schema is available.

Related Articles

Related links

Open in a new tab