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

Developer ReferenceConfiguration File

context

Table of contents

Description:

This key defines a context box for extra information about an Input.

This key has no default.

Appears in:
└── _inputs
    └── *
        ├── Text Input
        │   └── context
        ├── Textarea Input
        │   └── context
        ├── Code Input
        │   └── context
        ├── Color Input
        │   └── context
        ├── Boolean Input
        │   └── context
        ├── Number Input
        │   └── context
        ├── Range Input
        │   └── context
        ├── Rich Text Input
        │   └── context
        ├── Date/Datetime Input
        │   └── context
        ├── Time Input
        │   └── context
        ├── File Input
        │   └── context
        ├── URL Input
        │   └── context
        ├── Select Input
        │   └── context
        ├── Multiselect Input
        │   └── context
        ├── Choice Input
        │   └── context
        ├── Multichoice Input
        │   └── context
        ├── Object Input
        │   └── context
        └── Array Input
            └── context
Type:
Object
Properties:
contentstring#

This key defines the text content inside the context box.

CloudCannon supports a limited selection of Markdown formatting for the value of this key: links, headings, bold, italic, subscript, superscript, and inline code.

This key is required for the context object to function.

This key has no default.

Show examplesHide examples

In this example, we want to provide detailed guidance for our blog_tags Input.

Copied to clipboard
_inputs:
  blog_tags:
    type: multiselect
    label: Blog Tags
    context:
      title: Tag Guidelines
      icon: help
      content: >
        # Tag Guidelines


        Choose 3-5 relevant tags that best describe this article. Tags help
        readers find related content and improve SEO.


        **Good examples:** technology, web development, tutorials

        **Avoid:** generic terms like "blog" or "article"
{
  "_inputs": {
    "blog_tags": {
      "type": "multiselect",
      "label": "Blog Tags",
      "context": {
        "title": "Tag Guidelines",
        "icon": "help",
        "content": "# Tag Guidelines\n\nChoose 3-5 relevant tags that best describe this article. Tags help readers find related content and improve SEO.\n\n**Good examples:** technology, web development, tutorials\n**Avoid:** generic terms like \"blog\" or \"article\"\n"
      }
    }
  }
}
iconstring#

This key defines which icon appears next to the context box title.

The value must match an icon name from Google's Material Symbols list.

This key has no default.

Allowed values: 123 360 10k 10mp 11mp 12mp 13mp 14mp 15mp 16mp and 3574 more.

Show examplesHide examples

In this example, we want to use a warning icon to draw attention to important information about our file_upload Input.

Copied to clipboard
_inputs:
  file_upload:
    type: file
    label: Upload Document
    context:
      title: File Requirements
      icon: warning
      content: Maximum file size is 10MB.
    options:
      max_file_size: 10000
{
  "_inputs": {
    "file_upload": {
      "type": "file",
      "label": "Upload Document",
      "context": {
        "title": "File Requirements",
        "icon": "warning",
        "content": "Maximum file size is 10MB."
      },
      "options": {
        "max_file_size": 10000
      }
    }
  }
}
openboolean#

This key defines whether the context box is open to display text content by default.

By default, this key is false (i.e., closed).

Defaults to: false

Show examplesHide examples

In this example, we want the context box to be open by default so users can immediately see the help information.

Copied to clipboard
_inputs:
  seo_description:
    type: text
    label: SEO Description
    context:
      open: true
      title: SEO Guidelines
      icon: info
      content: >-
        Keep descriptions between 150-160 characters for optimal search engine
        display.
{
  "_inputs": {
    "seo_description": {
      "type": "text",
      "label": "SEO Description",
      "context": {
        "open": true,
        "title": "SEO Guidelines",
        "icon": "info",
        "content": "Keep descriptions between 150-160 characters for optimal search engine display."
      }
    }
  }
}
titlestring#

This key defines the title of the context box.

Show examplesHide examples

In this example, we want to customize the context box title to be more descriptive for our author_bio Input.

Copied to clipboard
_inputs:
  author_bio:
    type: textarea
    label: Author Biography
    context:
      title: Writing Guidelines
      icon: edit
      content: >-
        Write a brief, professional biography (2-3 sentences) that highlights
        your expertise and experience.
{
  "_inputs": {
    "author_bio": {
      "type": "textarea",
      "label": "Author Biography",
      "context": {
        "title": "Writing Guidelines",
        "icon": "edit",
        "content": "Write a brief, professional biography (2-3 sentences) that highlights your expertise and experience."
      }
    }
  }
}
Examples:

In this example, we want to add a context box to our date_created Input to explain its purpose.

Copied to clipboard
_inputs:
  date_created:
    type: datetime
    label: Date of article creation
    instance_value: NOW
    context:
      open: false
      title: Help
      icon: help
      content: This date field will automatically populate when you create an article.
{
  "_inputs": {
    "date_created": {
      "type": "datetime",
      "label": "Date of article creation",
      "instance_value": "NOW",
      "context": {
        "open": false,
        "title": "Help",
        "icon": "help",
        "content": "This date field will automatically populate when you create an article."
      }
    }
  }
}
Open in a new tab