Skip to content
Michael Lefebvre edited this page May 3, 2014 · 6 revisions

Tapioca Collection's schemas

All Tapioca's collections are driven by a JSON formatted schema. Here is the guidelines for these schemas:

required attributes:

All fields need those two attributes. ID define the name of the field in MongoDb and the name of the HTML element.

    "id":    string
    "label": string
    "type":  string

Default field type is text, the complete fields format is listed bellow.

optionals attributes:

    "summary": true

If you want a field to be present in the collection table of documents. Summary fields are automatically collect on creation and update of a collection, but you can specify a different order in the collection admin UI.

    "placeholder": string

A default text to display in the field

    "template": string

Override the current element generated HTML by the string pass as argument.

    "repeat": true

Set the value of the row as array.

Fields type:

text:

Default type. Display a simple text input.

Slugify

You can restrict the text to alphanumeric characters, underscores and dashes. Useful for URL.

    "slugify": true

You modify the range of allowed characters by passing an RegExp:

    "slugify": 'a-ZA-Z_'

You can link field's source to another field, where title is the linked field in the same node:

    "slugify": {
    	 'pattern': 'a-ZA-Z_'
       , 'link':   'title'
     }

textarea:

Display a simple textarea input, several options are available.

####Markdown

this mode is enable by setting the following attribute

    "markdown": true,

This will turn textarea as an Markdown enable field. Tapioca use EpicEditor.js.

####HTML WYSIWYG

this mode is enable by setting the following attribute

    "wysiwyg": true,

This will add the default toolbar above the textarea. If you want to specify the elements the toolbar you can pass an array of elements. Tapioca use Redactor.js, you can refer to the project document.

    "wysiwyg": [
        toolbar element,
        ...
    ]

Tapioca's team has a long debate about WYSIWYG's editor, we strongly not recommend this feature for final client.

Code editor

if you want to display a text editor set the code attribute to true.

    "code": true,

select:

To define a set of values/labels pass the following attribute:

    "options": [
        {
            "label": string,
            "value": string
        }
    ]

You can use another collection as source of the select's options.

    "source": 
        {
            "collection": string,
            "value": field.id,
            "label": field.id
            "sortBy": field.id (optional)
        }

You can allow multiple choice with following attibute:

	"multiple": true

checkbox:

Display checkbox inputs, same attribute as select. Multiple is not available


radio:

Display radio inputs, same attribute as select


bool:

Allow you to create a single checkbox who will return 0/1. Perfect for "true/false" or others dual choices.

Schema structure:

The document benefit of all the json possibilities to structure datas. You can create nested object, set the values of a row as array, etc... without limit of depth. Here is the structure mechanism:

Rules:

Validation rules can be define for each fields. The rules are listed in an array.

    "rules": [
        string,
        ...
    ]

Validation library is inspired by CodeIgniter and Validate.js, they share the same rules:

        <tr>
            <td>matches</td>
            <td>returns false if the form element value does not match the one in the parameter.</td>
            <td>yes</td>
            <td>matches[other_element]</td>
        </tr>
        
        <tr>
            <td>valid_email</td>
            <td>returns false if the form element value is not a valid email address.</td>
            <td>no</td>
            <td></td>
        </tr>

        <tr>
            <td>valid_emails</td>
            <td>returns false if any value provided in a comma separated list is not a valid email.</td>
            <td>no</td>
            <td></td>
        </tr>

        <tr>
            <td>min_length</td>
            <td>returns false if the form element value is shorter than the parameter.</td>
            <td>yes</td>
            <td>min_length[6]</td>
        </tr>
        
        <tr>
            <td>max_length</td>
            <td>returns false if the form element value is longer than the parameter.</td>
            <td>yes</td>
            <td>max_length[8]</td>
        </tr>
        
        <tr>
            <td>exact_length</td>
            <td>returns false if the form element value length is not exactly the parameter.</td>
            <td>yes</td>
            <td>exact_length[4]</td>
        </tr>
        
        <tr>
            <td>greater_than</td>
            <td>returns false if the form element value is less than the parameter after using parseFloat.</td>
            <td>yes</td>
            <td>greater_than[10]</td>
        </tr>
        
        <tr>
            <td>less_than</td>
            <td>returns false if the form element value is greater than the parameter after using parseFloat.</td>
            <td>yes</td>
            <td>less_than[2]</td>
        </tr>
        
        <tr>
            <td>alpha</td>
            <td>returns false if the form element contains anything other than alphabetical characters.</td>
            <td>no</td>
            <td></td>
        </tr>
        
        <tr>
            <td>alpha_numeric</td>
            <td>returns false if the form element contains anything other than alpha-numeric characters.</td>
            <td>no</td>
            <td></td>
        </tr>
        
        <tr>
            <td>alpha_dash</td>
            <td>returns false if the form element contains anything other than alphanumeric characters, underscores, or dashes.</td>
            <td>no</td>
            <td></td>
        </tr>
        
        <tr>
            <td>numeric</td>
            <td>returns false if the form element contains anything other than numeric characters.</td>
            <td>no</td>
            <td></td>
        </tr>
        
        <tr>
            <td>integer</td>
            <td>returns false if the form element contains anything other than an integer.</td>
            <td>no</td>
            <td></td>
        </tr>

        <tr>
            <td>decimal</td>
            <td>returns false if the form element is not exactly the parameter value.</td>
            <td>no</td>
            <td></td>
        </tr>
    </tbody>
</table>
Rule Description Parameter Example
required returns false if the form element is empty. no

Clone this wiki locally