Fork me on GitHub

inputex-jsonschema

Jump to Table of Contents

Build a form from JsonSchema

Instantiate a inputEx.JsonSchema.Builder object, configure the schemaIdentifierMap (Hash of json-schema definitions) and call the schemaToInputEx method to get the inputEx definition.

Overriding inputEx options

Use the "_inputEx" attribute on json-schema properties. This object will override inputEx' default properties in the field definition. You may also override the inputEx type through the "_type" attribute.

HTML

<div id="container1"></div>
<div id="container2"></div>

JavaScript

Implementation

// Create a schemaIdentifierMap
var schemaIdentifierMap = {
    // Person definition
    "Person": {
        "id": "Person",
        "description":"A person",
        "type":"object",
        "properties": {
            "name": { "type":"string"},
            "born" : { "type":"string", "format":"date", "optional":true},
            "gender" : { "type":"string", "choices": [ {"value":"male","label":"Guy"}, {"value":"female","label":"Girl"} ]},
            "grownup": { "type": "boolean" },
            "favoritecolors": { "type": "array" },
            "address": {
                "type":"object",
                "properties":{
                    "street":{"type":"string"},
                    "city":{"type":"string"},
                    "state":{"type":"string"}
                }
            }
        }
    }
};

// Create the JsonSchema builder object
var builder = new Y.inputEx.JsonSchema.Builder({
    'schemaIdentifierMap': schemaIdentifierMap
});

// Get the inputEx field definition from the "Person" object
var inputExDefinition = builder.schemaToInputEx(schemaIdentifierMap["Person"]);

// Add 'container1' as parent element
inputExDefinition.parentEl = 'container1';

// Create the form
var f = Y.inputEx(inputExDefinition);


//----------------------------------------------------------------------------

// Create a schemaIdentifierMap
var schemaIdentifierMap = {
    // Person definition
    "Person": {
        "id": "Person",
        "description":"A person",
        "type":"object",
        "properties": {
            "name": { "type":"string", "_inputex": {placeholder: "you can add a placeholder", label: 'Your name'} },
            "born" : { "type":"string", "format":"date", "optional":true, "_inputex": {"_type": "datepicker", valueFormat: 'Y-m-d', value: '2009-01-01', label: 'Birthdate'} },
            "gender" : { "type":"string", "choices": [ {"value":"male","label":"Guy"}, {"value":"female","label":"Girl"} ]},
            "grownup": { "type": "boolean", "_inputex": { label: "Grownup?", "description": "Over 18 only"} },
            "favoritecolors": { "type": "array", "_inputex": { label: "Favorites colors", elementType: {"type": "color"} }}
        }
    }
};


// Create the JsonSchema builder object
var builder = new Y.inputEx.JsonSchema.Builder({
    'schemaIdentifierMap': schemaIdentifierMap,

    // Those options will be added on all fields
    'defaultOptions': {
        'showMsg':true
    }
});

// Get the inputEx field definition from the "Person" object
var inputExDefinition = builder.schemaToInputEx(schemaIdentifierMap["Person"]);

// Add 'container2' as parent element
inputExDefinition.parentEl = 'container2';

// Create the form
var f = Y.inputEx(inputExDefinition);