Data Editor

The data editor provides a CMS-esque interface for managing data coming from Arrow models. This document will detail how some of this works.

The Model’s Metadata Object

Below are the options for customizing the data editor’s interface, directly from the model. Note that none of this
is required to use the data editor, however you can control the user experience and data entry by specifying the options
below on the model.

// Metadata object receives a 'cms' object with the following configuration:
metadata: {
    cms: {
        /**
         * This specfies where this model will show up in the nav menu, grouped by this category.
         */
        group: 'CRM',
        /**
         * This changes the page title to a more human readable name, in case your model is oddly named.
         * If left out, it will default to the model name.
         */
        readableName: 'Customers',
        /**
         * Limit the table to the specified columns.  Each value should map to a field in the model field schema.
         * If left out, all columns will be visible.
         */
        defaultColumns: ['first_name', 'last_name', 'email'],
        /**
        * Maps to the field schema of the model
        */
        fields: {
            email: {
                // The column and form key name for this field.  Defaults to field key name if omitted.
                readableName: 'Email',
                // The form field plugin to use.  Defaults to a standard textfield if omitted.
                type: 'email'
            }
        }
    }
}

Available Field Plugins

Email

type: "email" is a standard textfield that validates an email address

List

type: "list" is a select drop down with a preset number of options. You must add a options array to the field to indicate the available options to choose from:

location: { type: 'list', options: ['Florida', 'California', 'Texas', 'North Carolina'] }

Mask

type: "mask" Will render an input text field with a required masking pattern
(Good for things like SSN numbers, ISBN numbers, or any format you need to enforce).

// This enforces a text field like "tyi-9281"
code: { type: 'mask', mask: 'aaa-9999' }

This field type uses the https://github.com/RobinHerbots/jquery.inputmask plugin. You can use any mash pattern indicated here.

Date

type: "date" is a date picker (WIP).

Number

type: "number" Will use a number field

Range

type: "range" Will use a range field

URL

type: "url" Will use a url field

Tel

type: "tel" Will use a tel field

Textarea

type: "textarea" is a text area with several rendering styles. You can add a style property to the field to define how the text area should render.
Only current option is markdown. If you leave off the style property, a native textarea will be used.

notes: { type: 'textarea', style: 'markdown' }

Pillbox

type: "pillbox" is a tag-like UI that will store values as an array (appropriate for array-type fields)

####Sample Model

var Arrow = require('arrow');

var Customer = Arrow.Model.extend('customer', {
    fields: {
        first_name: { type: String },
        last_name: { type: String },
        email: { type: String, required: true },
        location: { type: String },
        joined: { type: String },
        notes: { type: String },
        assignedTo: { type: Number },
        preferences: { type: Array },
        website: { type: String },
        phone: { type: String },
        code: { type: String },
        skill: { type: Number }
    },
    connector: 'appc.arrowdb',
    metadata: {
        cms: {
            group: 'CRM',
            readableName: 'Customers',
            defaultColumns: ['first_name', 'last_name', 'location'],
            fields: {
                first_name: { readableName: 'First Name' },
                last_name: { readableName: 'Last Name' },
                email: { readableName: 'Email', type: 'email' },
                location: { readableName: 'Location', type: 'list', options: ['Florida', 'California', 'Texas', 'North Carolina'] },
                joined: { readableName: 'Joined', type: 'date' },
                website: { type: 'url' },
                phone: { type: 'tel' },
                code: { type: 'mask', mask: 'aaa-9999' },
                assignedTo: { readableName: 'Assigned to employee' },
                preferences: { type: 'pillbox' },
                skill: { type: 'range', min: 1, max: 10 },
                notes: { type: 'textarea', style: 'markdown' }
            }
        }
    }
});

module.exports = Customer;

Disabling Fields

You may disable any field by setting it to `disabled: true

Disabling the Entire Editor

If you need to completely disable the editor, add enableDataEditor: false in your conf/default.js‘s admin object.