Skip to content

Scaffold

Daryl Hedley edited this page Feb 3, 2015 · 15 revisions

Description

Scaffold is used to build out all our main form editing pages. At the heart of it is Backbone Forms that enables us to use schemas to render forms with very little effort. Scaffold wraps around Backbone Forms and offers us an API that can enable fieldsets, custom views, custom fields, custom templates and custom validators. It also manages overlays opened during editing forms and pulls down new schemas when plugins are configured.

API

Origin.scaffold.buildForm(options)

This will build a form object that can be used to append and commit the Backbone Form object. To build a form:

var form = Origin.scaffold.buildForm({
    model: contentObjectModel
});

If you would like a different schemaType from the _type attribute you can pass in a schemaType attribute when building a form.

var form = Origin.scaffold.buildForm({
    model: contentObjectModel,
    schemaType: 'menuSchema'
});

Commiting and saving the form

To save a form call commit() on the object returned from Origin.scaffold.buildForm:

var myForm = Origin.scaffold.buildForm({
    model: contentObjectModel
});

// Commit the code to the model and check for validation errors
var errors = myForm.commit();

if (errors) {
    return;
}

contentObjectModel.save(null, {
    error: function() {
        // Error code here...
    },
    success: function() {
        // Success code here...
    }
});

Updating schema models

Schema models are cached in a collection on app initialize for speed. If you ever need to update the schema models trigger 'scaffold:updateSchemas':

Origin.trigger('scaffold:updateSchemas', function() {
    // Callback function is called when new schemas have been fetched
}, this); 

Origin.scaffold.addCustomField(fieldName, view, overwrite)

To add a custom field pass in the fieldName and the view. This creates a custom view that whenever this field is present in a schema it will use this instead of a standard Backbone Form input. Passing in overwrite as a boolean will overwrite this custom view - this enables plugins to overwrite a core plugin custom view.

Origin.scaffold.addCustomField('Asset:image', ScaffoldAssetView);

// Schema property
"inputType": "Asset:image"

When building a custom view it's advised to follow this template: Backbone Forms Custom Editor

Origin.scaffold.addCustomValidator(name, validatorMethod)

To add a custom validator pass in the name of the validator and the function you would like to validate the form input field. Scaffold and Backbone Forms use an array of validators so it's possible to have multiple validators on one input field.

Origin.scaffold.addCustomValidator('titleLength', function(value, formValues) {
    var err = {
        type: 'title',
        message: 'Titles must be at least 3 characters long'
    };

    if (value.length < 3) return err;
});

// Schema property
"validators": ["titleLength", "required"]
// Required here is a default validator provided by Backbone Forms

Origin.scaffold.addCustomTemplate(templateName, template, overwrite)

Sometimes you might want to use a different template without a new view. This is useful when using HTML input types like password or number.

Origin.scaffold.addCustomTemplate('inputPassword', Handlebars.templates['inputPassword']);

// Schema property
"template": "inputPassword" 

Origin.scaffold.getCurrentModel

Use this method to return the current model being edited in Backbone Forms. This is useful if you want attributes like the _courseId or _parentId of the current model.

var currentModel = Origin.scaffold.getCurrentModel();
console.log(currentModel.get('_parentId'));
Clone this wiki locally