Configure your inputs

You can configure your inputs to determine the editing interface for structured data in your data files or the front matter of markup files. You can also customize the appearance and functionality of each input to improve the experience for your team members.

You can configure your inputs anywhere in the configuration cascade. In this article, we will show you how to configure an input at the global level in your configuration file.

To configure your inputs:

1. Navigate to your CloudCannon configuration file and open it in the Source Editor.
2. Identify the _inputs key, or create one at the top level of your configuration file.
3. Add the key name of your input under _inputs.
4. Add the type key nested under your input key, with an appropriate value for the type of input you want.
5. Add any other keys you want to configure under your input key (e.g., label, comment, context, options).
6. Save your changes to the CloudCannon configuration file.

Once you have configured your input, you must add the input key to a data file or the front matter of a markup file. CloudCannon will display the input in the Data Editor or the sidebar of the Visual or Content Editor when you open this file.

Example#

Let’s walk through an example.

We want to create a tag system for our blog articles so that users can filter our articles by tag for better search results. For this to work, we need to add a list containing relevant tags to the front matter of each blog file. When content creators write a new blog, they can select which tags apply using a Multiselect input in the sidebar of the Content Editor.

Here’s our input configuration:

_inputs:
  blog_tags:
    type: multiselect
    label: Blog type
    comment: Select a blog type
    context:
      open: false
      title: Help
      icon: help
      content: |
        Blog tags help our users filter articles by topic.
    options:
      values:
        - Opinion
        - Feature
        - Resource

{
  "_inputs": {
    "blog_tags": {
      "type": "multiselect",
      "label": "Blog type",
      "comment": "Select a blog type",
      "context": {
        "open": false,
        "title": "Help",
        "icon": "help",
        "content": "Blog tags help our users filter articles by topic.\n"
      },
      "options": {
        "values": [
          "Opinion",
          "Feature",
          "Resource"
        ]
      }
    }
  }
}

Once we add the above code to our configuration file, we need to add the input to the front matter of our blog file.

---
blog_tags:
---

The content of the blog goes here.

CloudCannon will show the blog_tags input in the Data Editor and the sidebar of the Visual or Content Editor.

For more information about options you can configure in your Inputs, please read our Inputs reference documentation.