What are visual data bindings

Visual data bindings are a way to tell CloudCannon what elements correlate to what data. With this information CloudCannon can generate inline controls for editing directly onto the page. Editors can simply click what they want to edit, and change, remove, move, clone and add items directly. This, paired with visual data previews, means they can see what changes as they change it.

Data bindings tell CloudCannon to add overlays to the Visual Editor. These overlays are absolutely positioned on the page. Once clicked, the overlay is selected and the controls become available. These controls are dependant on the type of data that is bound. Edit, for example, will always be available. Clicking off the selected area will unselect the current element.

Elements that have data bindings can contain elements with data bindings. In this case, the child data bindings are only available to click once the parent is selected. This helps to keep the interface clean and reduce confusion.

Adding a data binding#

Data bindings are added by adding the data-cms-bind attribute to any element. The value of this attribute is the slug of object/key you want to edit. Starting from the base of your structure, name each item as a step towards your desired object. Each object or property is separated by a dot. An array item is denoted by an open square bracket, an integer starting from 0, followed by a closing square bracket ([index]). For example:

• #title Targets the title of the current page
• #seo.title Targets the title within the seo object
• #people[0] Targets the first array item in an array named people.
• #people[0].title Targets the title of the first array item within an array named people.

<h1 data-cms-bind="#title">Edit the title</h1>

Working with arrays#

Data bindings on arrays give a few extra controls:

1. Add/Clone above and below
2. Move up/down and left/right depending on their relative position from their siblings
3. Remove with a double click confirm

Working with z-indexes#

Data binding overlays can sometimes get in the way of important navigation elements. By default, overlays are positioned between a 9000 and 9010 z-index. The lower bound of this range can be configured with the --editor-panel-zindex CSS variable. If your navigation is at 100 z-index, we recommend using a 90 z-index. In this example, you can use the following code snippet:

:root {
  --editor-panel-zindex: 90;
}