Schema & Component Requirements

Spaces are dependent on two components and two properties in your schemas.

Component Dependencies

Spaces require:

• The getComponentName Handlebars Helper from nymag-handlebars. The getComponentName helper is used in embedding components inside other components.
• This plugin, clay-space-edit

Schema Requirements

Requirements for Space and Logic components are as follows:

Logic

The only requirement for a Logic is that its schema contains a property called embeddedComponent which is set to an empty object. Here is an example Logic component which displays its embedded component based on time:

_description: |
  A description of this Logic

startTime:
  _label: Start Time
  _display: settings
  _has:
    -
      fn: text
      type: datetime-local
    - label
    -
      fn: description
      value: The start time that the component should be displayed on

endTime:
  _label: End Time
  _display: settings
  _has:
    -
      fn: text
      type: datetime-local
    - label
    -
      fn: description
      value: The end time that the component should stop being displayed on

_groups:
  settings:
    fields:
      - startTime
      - endTime

Optional Component Schema _targeting for Readouts

When adding a component to a space, the panel for selecting/editing a component shows "readouts", which are labels and icons that help to distinguish between component instances that are of the same component type.

schema.yml:

_targeting:
    -
    property: tag
    icon: tag
    -
    property: title
    icon: clock

The _targeting property expects an array of objects with keys property and icon:

• property is the property of the component to use to determine the text to show in the readout. Pro tip: you can construct text based on multiple properties by adding a new property in the save function of your model.js. For example, to show a range of times, you can compute an additional property like this in your model.js:

'use strict'

const moment = require('moment')
const DATE_FORMAT = require('../services/date-format')
module.exports.save = (uri, data, locals) => {
    data.timeRange = [data.dateFrom, data.dateTo]
                      .map(str => moment(str).format(DATE_FORMAT))
                      .join(' – ')
    return data
}

• icon is the icon to show for the readout. The following icons are available, please open an issue if you would like to add an icon to the icon set: person, tag, clock. The tag icon is used in the screenshot above.

The component that will be inside of the logic component

embeddedComponent: {}

---

Space

A Space component requires two things:

1. A name that begins with clay-space. Name the component clay-space-<SOMETHING DESCRIPTIVE>
2. A property called content which has the _componentList behavior. Instantiates as an empty array.
3. Only has one component in the Component List. This component is assumed to be the corresponding Logic component for the Space and will wrap each component.

An example of a Space schema might look like:

_description: |
  My Space!

content:
  _componentList:
    min: 1
    include:
      - my-logic-component