An Object input is an editing interface for nested structured data in data files or front matter. By configuring your inputs, you can customize the appearance and functionality for a better editing experience.
These instructions assume that you know what subtype of Object input you want to configure and where in the configuration cascade. For more information, please read our documentation on Object inputs, inputs in general, and the configuration cascade.
To configure an Object input:
- Open your website files in your local development environment, or log in to CloudCannon and select the Site for which you want to configure your input.
- Navigate to the location in the configuration cascade where you want to configure your input. This can be the root of your CloudCannon Configuration File, within the
collections_config.*key in your CloudCannon Configuration File, a Schema file, the frontmatter of a markup file, or any where you configure a Structure. - Identify the
_inputskey, or create one at that level of the configuration cascade. - Add an input name key for your input under the
_inputskey (a.k.a.,_inputs.*). We recommend naming your input something simple that indicates the function or context. - Add the
typekey under your input name key, with the valueobject. - (Optional.) Add any other general configuration keys (e.g.,
label,comment,context) under your input name key. - Add the
subtypekey under_inputs.*.options, with the valueobject,tabbed, ormutable. - (Optional.) Add any other specific configuration keys under
_inputs.*.options(e.g.,preview,structures,groups).
CloudCannon will now apply this input configuration to all markup files that use your input name key, without needing to save your configuration. This allows you to make changes to your input configuration and see those changes affect inputs live.
When you are happy with your input configuration, you must save your input configuration.
_inputs:
seo:
type: object
options:
subtype: object
event:
type: object
options:
subtype: tabbed
terminology:
type: object
options:
subtype: mutable{
"_inputs": {
"seo": {
"type": "object",
"options": {
"subtype": "object"
}
},
"event": {
"type": "object",
"options": {
"subtype": "tabbed"
}
},
"terminology": {
"type": "object",
"options": {
"subtype": "mutable"
}
}
}
}All inputs are defined under the _inputs key, regardless of where they are in the configuration cascade.
This Object input is called seo.
The value of the type key determines the input type. This is an object input.
The value of the options.subtype key determines the Object input's subtype. This is an object input.
This Object input is called event.
The value of the options.subtype key determines the Object input's subtype. This is a tabbed input.
This Object input is called terminology.
The value of the options.subtype key determines the Object input's subtype. This is a mutable input.
When you add your input key name to a data or markup file, your configured Object input will appear in the Data Editor, Visual Editor, or Content Editor.
---
seo:
title: How you can optimize publishing workflows for your content team
image: /images/logo.svg
description: CloudCannon's drafting and publishing workflows can tie all of your optimizations together, offering enhanced control, flexibility, and coordination.
event:
details:
title:
image:
description:
cast:
main_cast:
- Actor A
- Actor B
- Actor C
special_guests:
- Actor X
- Actor Y
- Actor Z
terminology:
CloudCannon: A CMS for static websites.
Input: An editing interface for structured data.
new_term: ''
---
Blog content goes here.For Object inputs to function correctly, they must contain at least one entry. You can add entries to an Object using the Source Editor. Alternatively, you can configure a structure or a mutable Object with an entry input type to allow team members to populate and empty Object.
Input configuration options#
General configuration options are available for all input types. You can define the label, comment, and context box for your Object input, whether it is hidden or disabled, and how CloudCannon should handle configuration at multiple levels of the configuration cascade.
Specific configuration options for Object inputs include defining the format of the input, enabling structures, configuring groups and previews, and how CloudCannon handles empty values. For mutable Objects, you can also configure allowed keys, assigned structures, and label formatting.
Here is an example of an Object input using some of the most commonly used configuration keys.
_inputs:
homepage_feature:
type: object
options:
subtype: object
structures: _structures.feature_template
groups:
- heading: SEO
comment: Values for search engines to read
inputs:
- title
- description
- image
place_groups_below: false
preview:
text: Homepage Feature Image
subtext: Edit the main image in the header of the homepage.
icon: photo_library
image:
- key: image
empty_type: string{
"_inputs": {
"homepage_feature": {
"type": "object",
"options": {
"subtype": "object",
"structures": "_structures.feature_template",
"groups": [
{
"heading": "SEO",
"comment": "Values for search engines to read",
"inputs": [
"title",
"description",
"image"
]
}
],
"place_groups_below": false,
"preview": {
"text": "Homepage Feature Image",
"subtext": "Edit the main image in the header of the homepage.",
"icon": "photo_library",
"image": [
{
"key": "image"
}
]
},
"empty_type": "string"
}
}
}
}For a complete list of configuration keys available for inputs please read our Inputs reference documentation.
If you want to configure the root Object in a Structure Value (i.e. _structures.*.values[*]._inputs.$), please configure the tabbed (replaces the subtype key on Object inputs), groups, place_groups_below, preview, picker_preview, comment, and documentation keys on the Structure Value itself.
These keys configure the appearance and functionality of Object inputs in CloudCannon.
This key defines how an 'empty' value will be saved. Does not apply to existing empty values.
Defaults to: null
Allowed values: null object
Appears in: Object Input options.
Show examplesHide examples
In this example, we have configured how empty object values will be saved.
_inputs:
metadata:
type: object
options:
empty_type: object{
"_inputs": {
"metadata": {
"type": "object",
"options": {
"empty_type": "object"
}
}
}
}This key defines how you can group the inputs inside this object together without changing the data structure.
Appears in: Object Input options.
This key represents an individual group object in the _inputs.*(object-input).options.groups array.
The value is an object that groups inputs together inside an Object Input without changing the data structure. Each group typically contains a heading and inputs array.
Appears in: options.groups.
This key toggles whether this group is collapsed or expanded when first viewed.
Setting this key to true will collapse this group when first viewed.
Defaults to: false
Appears in: groups[*].
This key defines the subtext below the heading.
Supports a limited set of Markdown: links, bold, italic, subscript, superscript, and inline code elements are allowed.
Appears in: groups[*].
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.
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"
}
}
}
}This key defines the icon for the documentation link at the top of a Collection browser.
Values can be from Google's Material Symbols library.
Defaults to: auto_stories
Allowed values: 123 360 10k 10mp 11mp 12mp 13mp 14mp 15mp 16mp and 3574 more.
Appears in: documentation.
Show examplesHide examples
In this example, we have configured the star icon for the blog Collection documentation link.
collections_config:
blog:
documentation:
url: https://www.cloudcannon.com/documentation/
icon: star{
"collections_config": {
"blog": {
"documentation": {
"url": "https://www.cloudcannon.com/documentation/",
"icon": "star"
}
}
}
}This key defines the link text for the documentation link at the top of a Collection browser.
Appears in: documentation.
Show examplesHide examples
In this example, the text for the documentation link is CloudCannon Documentation.
collections_config:
data:
documentation:
url: https://cloudcannon.com/documentation/
text: CloudCannon Documentation{
"collections_config": {
"data": {
"documentation": {
"url": "https://cloudcannon.com/documentation/",
"text": "CloudCannon Documentation"
}
}
}
}This key defines the URL for the documentation link at the top of a Collection browser.
You must define this key for the
documentation object to function.
This key has no default.
Appears in: documentation.
Show examplesHide examples
In this example, we have configured the blog Collection documentation link to go to example.com.
collections_config:
blog:
documentation:
url: https://example.com{
"collections_config": {
"blog": {
"documentation": {
"url": "https://example.com"
}
}
}
}This key defines the main text for the group shown when collapsed or expanded.
Appears in: groups[*].
This key defines the keys of each input in this group.
Appears in: groups[*].
This key represents an individual input key name string in the _inputs.*(object-input).options.groups[*].inputs array.
The value is a string that specifies the key name of an input to include in a group within an Object Input.
Appears in: [*].inputs.
This key defines which order input groups and ungrouped inputs appear in.
Setting this key to true will place input groups below ungrouped inputs.
Defaults to: false
Appears in: Object Input options.
This key toggles whether CloudCannon requires this Input to have a value.
Setting this key to true will require you to enter a value to save your changes, or discard your unsaved changes.
By default, this key is false (i.e., CloudCannon does not require this Input to have a value).
This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.
Defaults to: false
Appears in: Text Input options, Textarea Input options, Code Input options, Color Input options, Number Input options, Range Input options, URL Input options, Select Input options, Rich Text Input options, Date/Datetime Input options, Time Input options, File Input options, Multiselect Input options, Choice Input options, Multichoice Input options, Object Input options, Array Input options.
Show examplesHide examples
In this example, we want to require our team to enter an author value for markup files with this Input.
_inputs:
author:
type: text
comment: Enter the name of the author for this blog post.
options:
required: true{
"_inputs": {
"author": {
"type": "text",
"comment": "Enter the name of the author for this blog post.",
"options": {
"required": true
}
}
}
}This key defines a custom error message that explains why a value has failed the validation criteria from options.required.
This key requires you to define options.required.
This key has no default.
This key is available for Array, Code, Color, Date and Time, File, Number, Object, Select and Multiselect, Text, Rich Text, and URL Inputs.
Appears in: Text Input options, Textarea Input options, Code Input options, Color Input options, Number Input options, Range Input options, URL Input options, Select Input options, Rich Text Input options, Date/Datetime Input options, Time Input options, File Input options, Multiselect Input options, Choice Input options, Multichoice Input options, Object Input options, Array Input options.
Show examplesHide examples
In this example, we prompt our team to enter an Input value using a required message.
_inputs:
author:
type: text
comment: Enter the name of the author for this blog post.
options:
required: true
required_message: You are not allowed to leave this blank.{
"_inputs": {
"author": {
"type": "text",
"comment": "Enter the name of the author for this blog post.",
"options": {
"required": true,
"required_message": "You are not allowed to leave this blank."
}
}
}
}This key defines data formats for value of this object.
When choosing an item, team members are prompted to choose from a number of values you have defined. structures applies to the object itself.
Appears in: Object Input options.
This key defines the appearance and behavior of the input.
Defaults to: object
Allowed values: object mutable tabbed
Appears in: Object Input options.
This key defines the appearance of a Card.
You can configure Card preview for Collections, Schemas, Object inputs, Array inputs, Select inputs, Structures, the Structure modal, Snippets, and the Snippet modal.
For more information about previews, please read our documentation on configuring card previews.
Appears in: Select Input options, Multiselect Input options, Choice Input options, Multichoice Input options, Object Input options, [*], schemas.*, collections_config.*, Snippet.
Show examplesHide examples
In this example, we have configured the appearance of file Cards in the Collection browser.
collections_config:
blog:
preview:
text:
- key: title
subtext:
- key: author
icon: edit_note
icon_color:
- key: color
- '#ff0000'
image:
- key: image
metadata:
- template:
- url
- icon: event
text:
- template: Published on {date|date_long}
gallery:
- key: featured_image{
"collections_config": {
"blog": {
"preview": {
"text": [
{
"key": "title"
}
],
"subtext": [
{
"key": "author"
}
],
"icon": "edit_note",
"icon_color": [
{
"key": "color"
},
"#ff0000"
],
"image": [
{
"key": "image"
}
],
"metadata": [
{
"template": [
"url"
]
},
{
"icon": "event",
"text": [
{
"template": "Published on {date|date_long}"
}
]
}
],
"gallery": [
{
"key": "featured_image"
}
]
}
}
}
}In this example, we have configured the appearance of Cards in inputs using the Structure staff.
_structures:
staff:
values:
- value:
_type: Employee
name:
job_description:
profile_picture:
preview:
text:
- key: name
- Employee
subtext:
- key: job_description
- Description of position
image:
- key: profile_picture
icon: support_agent
- value:
_type: Manager
name:
job_description:
profile_picture:
url:
preview:
text:
- key: name
- Manager
subtext:
- key: job_description
- Description of position
image:
- key: profile_picture
icon: face{
"_structures": {
"staff": {
"values": [
{
"value": {
"_type": "Employee",
"name": null,
"job_description": null,
"profile_picture": null
},
"preview": {
"text": [
{
"key": "name"
},
"Employee"
],
"subtext": [
{
"key": "job_description"
},
"Description of position"
],
"image": [
{
"key": "profile_picture"
}
],
"icon": "support_agent"
}
},
{
"value": {
"_type": "Manager",
"name": null,
"job_description": null,
"profile_picture": null,
"url": null
},
"preview": {
"text": [
{
"key": "name"
},
"Manager"
],
"subtext": [
{
"key": "job_description"
},
"Description of position"
],
"image": [
{
"key": "profile_picture"
}
],
"icon": "face"
}
}
]
}
}
}This key defines the icon displayed on Cards in the Collection browser, Structures, and Snippets.
The value can be an array or a single value, and reference a key, template, text string, that results in one of Google's Material Symbols. When multiple entries are provided, CloudCannon will use them in order as fallback options.
For Cards in the Collection Browser, this key defaults to the value of collections_config.*.icon. Otherwise, this key has no default.
Appears in: preview, metadata[*], gallery, picker_preview.
Show examplesHide examples
In this example, we have configured the icon for Cards in the blog Collection to use the edit_note icon.
collections_config:
blog:
preview:
icon: edit_note{
"collections_config": {
"blog": {
"preview": {
"icon": "edit_note"
}
}
}
}In this example, we have configured the icon for Cards in the blog Collection with an array of values to provide fallback options. CloudCannon will use the value of logo first, then fall back to the edit_note icon.
collections_config:
blog:
preview:
icon:
- key: logo
- edit_note{
"collections_config": {
"blog": {
"preview": {
"icon": [
{
"key": "logo"
},
"edit_note"
]
}
}
}
}This key defines the background color of the icon displayed on Cards in the Collection browser, Structures, and Snippets.
The value can be an array or a single value, and reference a key, template, or text string. When multiple entries are provided, CloudCannon will use them in order as fallback options.
Color values can be hex codes (e.g., #ff0000), CSS color names, or reference a data key that contains a color value.
Appears in: preview, metadata[*], gallery, picker_preview.
Show examplesHide examples
In this example, we have configured the icon background color for Cards in the blog Collection with an array of values to provide fallback options. CloudCannon will use the value of bg_color first, then fall back to the static hex color value.
collections_config:
blog:
preview:
icon_background_color:
- key: bg_color
- text: '#f0f0f0'{
"collections_config": {
"blog": {
"preview": {
"icon_background_color": [
{
"key": "bg_color"
},
{
"text": "#f0f0f0"
}
]
}
}
}
}This key defines the color of the icon displayed on Cards in the Collection browser, Structures, and Snippets.
The value can be an array or a single value, and reference a key, template, or text string. When multiple entries are provided, CloudCannon will use them in order as fallback options.
Color values can be hex codes (e.g., #ff0000), CSS color names, or reference a data key that contains a color value.
Appears in: preview, metadata[*], gallery, picker_preview.
Show examplesHide examples
In this example, we have configured the icon color for Cards in the blog Collection with an array of values to provide fallback options. CloudCannon will use the value of color first, then fall back to the static hex color value.
collections_config:
blog:
preview:
icon_color:
- key: color
- text: '#ff0000'{
"collections_config": {
"blog": {
"preview": {
"icon_color": [
{
"key": "color"
},
{
"text": "#ff0000"
}
]
}
}
}
}This key defines the image displayed on Cards in the Collection browser, Structures, and Snippets.
The value can be an array or a single value, and reference a key, template, or text string that results in a file path or URL to an image file. When multiple entries are provided, CloudCannon will use them in order as fallback options.
Appears in: preview, metadata[*], gallery, picker_preview.
Show examplesHide examples
In this example, we have configured the image for Cards in the blog Collection with an array of values to provide fallback options. CloudCannon will use the value of featured_image first, then the {thumbnail} template, and finally fall back to the static text value.
collections_config:
blog:
preview:
image:
- key: featured_image
- template: '{thumbnail}'
- text: default-image.jpg{
"collections_config": {
"blog": {
"preview": {
"image": [
{
"key": "featured_image"
},
{
"template": "{thumbnail}"
},
{
"text": "default-image.jpg"
}
]
}
}
}
}In this example, we have configured the image for Structure Cards to display the profile_picture key.
_structures:
staff:
values:
- value:
_type: Employee
name:
profile_picture:
preview:
image:
- key: profile_picture{
"_structures": {
"staff": {
"values": [
{
"value": {
"_type": "Employee",
"name": null,
"profile_picture": null
},
"preview": {
"image": [
{
"key": "profile_picture"
}
]
}
}
]
}
}
}This key defines the secondary text displayed below the main text on Cards in the Collection browser, Structures, and Snippets.
The value can be an array or a single value, and reference a key, template, or text string. When multiple entries are provided, CloudCannon will use them in order as fallback options.
Appears in: preview, picker_preview.
Show examplesHide examples
In this example, we have configured the subtext for Cards in the blog Collection with an array of values to provide fallback options. CloudCannon will use the value of author first, then the {writer} template, and finally fall back to the static text value.
collections_config:
blog:
preview:
subtext:
- key: author
- template: '{writer}'
- text: Unknown author{
"collections_config": {
"blog": {
"preview": {
"subtext": [
{
"key": "author"
},
{
"template": "{writer}"
},
{
"text": "Unknown author"
}
]
}
}
}
}In this example, we have configured the subtext for Cards in the blog Collection to display the author key.
collections_config:
blog:
preview:
subtext:
- key: author{
"collections_config": {
"blog": {
"preview": {
"subtext": [
{
"key": "author"
}
]
}
}
}
}This key defines the main text displayed on Cards in the Collection browser, Structures, and Snippets.
The value can be an array or a single value, and reference a key, template, or text string. When multiple entries are provided, CloudCannon will use them in order as fallback options.
Appears in: preview, metadata[*], gallery, picker_preview.
Show examplesHide examples
In this example, we have configured the main text for Cards in the blog Collection with an array of values to provide fallback options. CloudCannon will use the value of title first, then the {name} template, and finally fall back to the static text value.
collections_config:
blog:
preview:
text:
- key: title
- template: '{name}'
- text: Untitled{
"collections_config": {
"blog": {
"preview": {
"text": [
{
"key": "title"
},
{
"template": "{name}"
},
{
"text": "Untitled"
}
]
}
}
}
}In this example, we have configured the main text for Cards in the blog Collection to display the title key.
collections_config:
blog:
preview:
text:
- key: title{
"collections_config": {
"blog": {
"preview": {
"text": [
{
"key": "title"
}
]
}
}
}
}If the input is a mutable Object, the following options are also available:
_inputs:
example:
type: object
options:
subtype: mutable
entries:
allowed_keys:
- image
- link
- link_or_image
structures:
values:
- id: image_template
label: Image
icon: image
value:
image:
caption:
- id: link_template
label: External link
icon: link
value:
url:
title:
assigned_structures:
link:
- link_template
image:
- image_template
link_or_image:
- image_template
- link_template
comment: Select a key name.
documentation:
url: /documentation/user-articles/what-is-an-object-input/
text: Documentation
icon: help
allow_label_formatting: true{
"_inputs": {
"example": {
"type": "object",
"options": {
"subtype": "mutable",
"entries": {
"allowed_keys": [
"image",
"link",
"link_or_image"
],
"structures": {
"values": [
{
"id": "image_template",
"label": "Image",
"icon": "image",
"value": {
"image": null,
"caption": null
}
},
{
"id": "link_template",
"label": "External link",
"icon": "link",
"value": {
"url": null,
"title": null
}
}
]
},
"assigned_structures": {
"link": [
"link_template"
],
"image": [
"image_template"
],
"link_or_image": [
"image_template",
"link_template"
]
},
"comment": "Select a key name.",
"documentation": {
"url": "/documentation/user-articles/what-is-an-object-input/",
"text": "Documentation",
"icon": "help"
}
},
"allow_label_formatting": true
}
}
}
}This key toggles whether labels on mutable object entries are formatted.
Setting this key to true will format labels on mutable object entries.
By default, this key is false (i.e., labels are not formatted).
Defaults to: false
Appears in: Object Input options.
This key defines the appearance and function of entries in a mutable Object Input.
The value is an object that can contain optional allowed_keys, structures, assigned_structures, comment, and documentation keys.
Available for Mutable Objects only.
Appears in: Object Input options.
Show examplesHide examples
In this example, we have configured entries options with assigned structures for specific allowed keys.
_inputs:
metadata:
type: object
options:
allow_create: true
entries:
allowed_keys:
- title
assigned_structures:
title:
- article_metadata
- page_metadata{
"_inputs": {
"metadata": {
"type": "object",
"options": {
"allow_create": true,
"entries": {
"allowed_keys": [
"title"
],
"assigned_structures": {
"title": [
"article_metadata",
"page_metadata"
]
}
}
}
}
}
}This key defines a limited set of key names for nested keys within your Object Input.
The value is an array of key name strings. This affects entries when adding or renaming nested keys.
This set is used when entries are added and renamed with allow_create enabled. Has no effect if allow_create is not enabled.
Available for Mutable Objects only.
By default, this key is [].
Appears in: options.entries.
Show examplesHide examples
In this example, we have configured an allowed key name for entries in a mutable Object Input.
_inputs:
metadata:
type: object
options:
allow_create: true
entries:
allowed_keys:
- title{
"_inputs": {
"metadata": {
"type": "object",
"options": {
"allow_create": true,
"entries": {
"allowed_keys": [
"title"
]
}
}
}
}
}This key represents an individual allowed key string in the _inputs.*(object-input).options.entries.allowed_keys array.
The value is a string that specifies a key name that can exist on the data within an Object Input. This set is used when entries are added and renamed with allow_create enabled.
Appears in: entries.allowed_keys.
Show examplesHide examples
In this example, we have configured an allowed key name for entries in a mutable Object Input.
_inputs:
metadata:
type: object
options:
allow_create: true
entries:
allowed_keys:
- title{
"_inputs": {
"metadata": {
"type": "object",
"options": {
"allow_create": true,
"entries": {
"allowed_keys": [
"title"
]
}
}
}
}
}This key defines how to assign structures to specific key names for entries in the Object Input.
The value is an object where each property key is an allowed key name, and each property value is an array of structure key name strings. When selecting an entry key name, CloudCannon will prompt team members to choose one of the assigned structures for that allowed key. Structure values are referred to by their id.
Available for Mutable Objects only.
Appears in: options.entries.
This key represents the assigned structures for a specific allowed key name in the _inputs.*(object-input).options.entries.assigned_structures object.
The value is an array of structure key name strings. When team members select this allowed key name, CloudCannon will prompt them to choose one of these structures.
Available for Mutable Objects only.
Appears in: entries.assigned_structures.
This key represents an individual assigned structure string in the _inputs.*(object-input).options.entries.assigned_structures.* array.
The value is a string that specifies a structure key name assigned to entries in an Object Input.
Appears in: assigned_structures.*.
Show examplesHide examples
In this example, we have configured an assigned structure for entries in a mutable Object Input.
_inputs:
metadata:
type: object
options:
allow_create: true
entries:
allowed_keys:
- title
assigned_structures:
title:
- article_metadata{
"_inputs": {
"metadata": {
"type": "object",
"options": {
"allow_create": true,
"entries": {
"allowed_keys": [
"title"
],
"assigned_structures": {
"title": [
"article_metadata"
]
}
}
}
}
}
}This key defines the subtitle text above the key input when adding or renaming entries within a mutable Object Input.
The value is a string that supports a limited selection of Markdown formatting: links, bold, italic, subscript, superscript, and inline code elements are allowed.
Available for Mutable Objects only.
Appears in: options.entries.
Show examplesHide examples
In this example, we have configured a comment with Markdown formatting to provide help text above the key input.
_inputs:
metadata:
type: object
options:
allow_create: true
entries:
comment: >-
Key names should be **lowercase** and use underscores (e.g.,
`article_title`){
"_inputs": {
"metadata": {
"type": "object",
"options": {
"allow_create": true,
"entries": {
"comment": "Key names should be **lowercase** and use underscores (e.g., `article_title`)"
}
}
}
}
}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.
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"
}
}
}
}This key defines the icon for the documentation link at the top of a Collection browser.
Values can be from Google's Material Symbols library.
Defaults to: auto_stories
Allowed values: 123 360 10k 10mp 11mp 12mp 13mp 14mp 15mp 16mp and 3574 more.
Appears in: documentation.
Show examplesHide examples
In this example, we have configured the star icon for the blog Collection documentation link.
collections_config:
blog:
documentation:
url: https://www.cloudcannon.com/documentation/
icon: star{
"collections_config": {
"blog": {
"documentation": {
"url": "https://www.cloudcannon.com/documentation/",
"icon": "star"
}
}
}
}This key defines the link text for the documentation link at the top of a Collection browser.
Appears in: documentation.
Show examplesHide examples
In this example, the text for the documentation link is CloudCannon Documentation.
collections_config:
data:
documentation:
url: https://cloudcannon.com/documentation/
text: CloudCannon Documentation{
"collections_config": {
"data": {
"documentation": {
"url": "https://cloudcannon.com/documentation/",
"text": "CloudCannon Documentation"
}
}
}
}This key defines the URL for the documentation link at the top of a Collection browser.
You must define this key for the
documentation object to function.
This key has no default.
Appears in: documentation.
Show examplesHide examples
In this example, we have configured the blog Collection documentation link to go to example.com.
collections_config:
blog:
documentation:
url: https://example.com{
"collections_config": {
"blog": {
"documentation": {
"url": "https://example.com"
}
}
}
}This key defines which predefined templates to use for populating entries nested in the Object Input.
The value can be a string or an object. When configured, team members can select a structure to populate the Object with input/input groups.
If configured as an object, CloudCannon will use the values directly. If configured as a string, CloudCannon will use the matching structures value defined under _structures in the configuration cascade.
Available for Mutable Objects only.
Note: This key looks similar to
structures. However, thestructureskey applies to the Object input itself, whileentries.structuresapplies to the entries within the object.
This key has no default.
Appears in: options.entries.
Valid values#
Here are some examples of valid values for an Object input.
Empty/null value:
object:
Any valid nested key-value pairs:
object:
key1: value1
key2: value2
nested_object:
key3: value3
Any valid nested key-value pairs:
[object]
key1 = "value1"
key2 = "value2"
[object.nested_object]
key3 = "value3"
Empty/null value:
"object": null
Any valid nested key-value pairs:
{
"object": {
"key1": "value1",
"key2": "value2",
"nested_object": {
"key3": "value3"
}
}
}
Unconfigured Object inputs#
In some cases, CloudCannon can still detect an Object input even if you have not configured it.
CloudCannon will interpret any unconfigured input with nested keys as an Object input. You cannot create structured or mutable Object inputs without configuration.
company_photo:
image:
date:
description:This behavior is convenient if you have simple inputs or do not want to configure inputs. It is also beneficial for new websites on CloudCannon where you have yet to create any CloudCannon-specific configuration.
We recommend configuring your inputs for greater control over their functionality and appearance.