Forms

Forms

The forms module gives you various different option types for you to implement your preferred form.

Props

The props needed for this component are listed and explained below:

• model - This prop must be an object.

• title - This prop must be a string

• onUpdate - This prop must be a function

• schema - This prop must be a object

Example

// ...Schema model
var schema = {
    "_shouldDisplayTitle": {
        "type": "Boolean",
        "label": "Should Display The Title?"
    },
    title: {
        "type": "Text",
        "label": "Course Title",
        "help": "This title will be displayed where ever there's a course",
        "conditions": [{
            "type": "shouldDisplayTitle",
            "text": "Toggle the above switch to edit me"
        }],
        "validators": ["required"]
    },
    body: {
        "type": "TextArea",
        "label": "Course Body",
        "help": "",
        "conditions": [],
        "validators": []
    },
    _score: {
        "type": "Number",
        "label": "Score"
    },
    _items: {
        "type": "Array",
        "label": "Items",
        "help": "",
        "itemType": "Object",
        "conditions": [],
        "validators": [],
        "addButtonText": "Add New Item",
        "deleteButtonText": "Delete Item",
        "itemTextAttribute": "title",
        "defaultPrefix": "Item",
        "subSchema": {
            "title": {
                "type": "Text",
                "label": "Item Title"
            },
            "body": {
                "type": "TextArea",
                "label": "Item Body"
            }
        }
    }
}

// ...Form Component
<Form 
    model={this.state} 
    schema={schema}
    onUpdate={this.onUpdate}
    title="Form Title"
/>

// ...React Component
getInitialState: function() {
    return {
        _shouldDisplayTitle: true,
        title: 'My First Title',
        body: 'Some body text...edit me',
        _items: []
    }
},

onUpdate: function(attributes, hasError, fieldKey) {

    if (fieldKey === '_items') {
        console.log(attributes);
    }

    return new Promise((resolve, reject) => {
        if (hasError) {
            return resolve();   
        }
        this.setState(attributes, function() {
            resolve()
        });
    });
},

Related

• SearchBar
• Button