Schema Properties

A range of special properties are available to control the behavior of each document field.

SimpleSchema Properties

See the SimpleSchema documentation.

type

The JavaScript/SimpleSchema type of the field’s contents. Will automatically be converted to a matching GraphQL type in your GraphQL schema.

The Date Type

The Date type benefits from an extra feature: for any foo date field, a new GraphQL-only fooFormatted field will automatically be generated to return the date as a formatted string.

You can pass a format argument to this new field to control the format using the Moment.js formatting API. You can also pass the string ago to display the date in a “two hours ago” format.

For example, here’s a sample query:

1
2
3
4
5
6
7
8
9
10
11
12

query PostsQuery{
  posts{
    results{
      title
      postedAt
      postedAtFormatted # will default to YYYY/MM/DD format
      postedAtFormattedMonth: postedAtFormatted(format:"MMM")
      postedAtFormattedAgo: postedAtFormatted(format:"ago")

    }
  }
}

arrayItem

For fields of type Array, this property accepts an object containing the properties applied to the array items.

(Note: this is a Vulcan-only equivalent to SimpleSchema’s foo.$ fields).

1
2
3
4
5
6
7
8

addresses: {
  type: Array,
  optional: true,
  arrayItem: {
    type: createSchema(addressSchema),
    optional: true
  }
}

Data Layer Properties

canRead

Can either be a string, an array of group names, or a function.

If it’s a function, it’ll be called on the user viewing the document and the document itself, and should return true or false.

canCreate

Can either be a string, an array of group names, or a function.

If it’s a function, it’ll be called on the user performing the operation, and should return true or false. When generating a form for inserting new documents, the form will contain all the fields that return true for the current user.

canUpdate

Can either be a string, an array of group names, or a function.

If it’s a function, it’ll be called on the user performing the operation, and the document being operated on, and should return true or false. When generating a form for editing existing documents, the form will contain all the fields that return true for the current user.

resolveAs

You can learn more about resolveAs in the Field Resolvers section.

onCreate, onUpdate, onDelete

These three properties can take a callback function that will run during the corresponding operation, and should return the new value of the corresponding field.

• onCreate({ document, currentUser })
• onUpdate({ data, document, currentUser })
• onDelete({ document, currentUser })

Form Properties

These schema properties are mostly used for controlling the appearance and behavior of Vulcan’s auto-generated forms.

label

The form label. If not provided, the label will be generated based on the field name and the available language strings data.

input

Either a text string (one of text, textarea, checkbox, checkboxgroup, radiogroup, or select) or a React component.

order

A number corresponding to the position of the property’s field inside the form.

group

An optional object containing the group/section/fieldset in which to include the form element. Groups have name, label, order, and other properties.

For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

postedAt: {
  type: Date,
  optional: true,
  canRead: ['guests'],
  canCreate: ['admins'],
  canUpdate: ['admins'],
  control: "datetime",
  group: {
    name: "admin",        // The name of the group
    label: "Admin",       // The label; if omitted, the name will be used as an i18n id
    order: 100,           // Used for ordering the groups
    collapsible: true,    // The group can be collapsed
    startCollapsed: true, // If true, the group will start collapsed
    adminsOnly: true,     // Lets you put fields that members canUpdate in a group that only admins can see
    beforeComponent: 'PostedAtHelp', // Component to place at the start of the group
    afterComponent: 'PostedAtFoot',  // Component to place at the end of the group
  },
},

Note that fields with no groups are always rendered first in the form in a default group without a label.

You only need to specify the group details for the first field that refers to it. Subsequently you can just use group: { name: "admin" }.

placeholder

A placeholder value for the form field.

beforeComponent

A React component that will be inserted just before the form component itself.

afterComponent

A React component that will be inserted just after the form component itself.

hidden

Can either be a boolean or a function accepting form props as argument and returning a boolean.

Remove the field from the form altogether. To pass the value of the field to a SmartForm, use prefilledProps.

In a custom form component, to populate the field manipulate the value through the context, e.g.:

1

this.context.updateCurrentValues({ foo: 'bar' });

As long as a value is in this.state.currentValues it should be submitted with the form, no matter whether there is an actual form item or not.

options

An array containing a set of options for the form (for select, checkbox, radio, etc. controls), or a function that takes the component’s props as argument and returns an array.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

status: {
  type: Number,
  optional: true,
  canRead: ['admins'],
  canCreate: ['admins'],
  canUpdate: ['admins'],
  control: 'select',
  default: 2,
  options: () => {
    return [
      {
        value: 1,
        label: 'private',
      },
      {
        value: 2,
        label: 'public',
      },
    ];
  },
  description: `The room' status (Private/Public)`
},

query

A query used to require extra data needed to display the form field. See field-specific data loading.

inputProperties

An object defining the props that will be passed to the input component to customize it. You can pass either values, or a function that will be evaluated each time the form is generated.

1
2
3
4
5

inputProperties: {
  locale: 'fr',
  defaultValue: () => new Date(), // will be evaluated each time a form is generated
},
input: 'datetime'

You may sometimes want to pass a function or a React component in the form. Since all functions in the inputProperties object will be evaluated before rendering the form, you’ll need to pass a closure that returns the desired function or component instead.

1
2
3
4
5
6
7

inputProperties: {
  locale: 'fr',
  defaultValue: () => new Date(), // will be evaluated each time a form is generated
  renderOption: () => MyCustomComponent, // will return MyCustomComponent as expected
  sortValues: () => mySortingFunction, // will return mySortingFunction as expected
},
control: 'MyCustomSelect'

When the form is generated, the closure is evaluated and return your component or function. Thus in
MyCustomSelect, props.renderOption will equal MyCustomComponent as expected.

min

You can set min to force the field to be longer than a certain length (e.g. min: 20).

max

You can set max to limit the field to a certain length (e.g. max: 140).

minCount

The minimum count of items that must be in an array field.

maxCount

The maximum count of items that can be in an array field.

defaultValue

The field’s default value. Note that you can also use onCreate to achieve the same effect.

description

A description that will be used as help text for the field in forms and in the GraphQL API.