inputEx - Form from JsonSchema example

Create a form from a json-schema

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

// 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 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 = inputEx(inputExDefinition);

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.

// Create a schemaIdentifierMap 
var schemaIdentifierMap = {
 // Person definition
 "Person": {
	"id": "Person",
	"description":"A person",
 	"type":"object",
 	"properties": {
  		"name": { "type":"string", "_inputex": {typeInvite: "you can add a type invitation", 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 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 = inputEx(inputExDefinition);

inputEx - form from a JsonSchema

Create a form from a json-schema

Overriding inputEx options