Schema & Component Requirements

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

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 and Template Requirements

Requirements for Space and Logic components are as follows:

Logic Schema Requirements

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

Logic Template Requirements

A logic must render its embedded component. You specify this in the template.handlebars for the logic like this:

{{> (getComponentName embededComponent.ref) embeddedComponent.data }}

The template.handlebars excerpt above uses the getComponentName handlebars helper (see "Dependencies" above) to get the name of the component based on the ref (uri for a component) from the embeddedComponent property. It then uses > (Handlebars partial syntax) to render the template for the embedded component.

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

Optional Component Schema Property: _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 and clock icons are used in the screenshot above.