inputEx - form from a JsonSchema

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.

1// Create a schemaIdentifierMap  
2var schemaIdentifierMap = { 
3 // Person definition 
4 "Person": { 
5    "id""Person"
6    "description":"A person"
7    "type":"object"
8    "properties": { 
9        "name": { "type":"string"}, 
10        "born" : { "type":"string""format":"date""optional":true}, 
11        "gender" : { "type":"string""choices": [ {"value":"male","label":"Guy"}, {"value":"female","label":"Girl"} ]}, 
12        "grownup": { "type""boolean" }, 
13        "favoritecolors": { "type""array" }, 
14        "address": {  
15            "type":"object"
16            "properties":{ 
17                "street":{"type":"string"}, 
18                "city":{"type":"string"}, 
19                "state":{"type":"string"
20            } 
21        } 
22    } 
23 } 
24}; 
25 
26// Create the JsonSchema builder object 
27var builder = new inputEx.JsonSchema.Builder({ 
28    'schemaIdentifierMap': schemaIdentifierMap 
29}); 
30 
31// Get the inputEx field definition from the "Person" object 
32var inputExDefinition = builder.schemaToInputEx(schemaIdentifierMap["Person"]); 
33 
34// Add 'container1' as parent element 
35inputExDefinition.parentEl = 'container1'
36 
37// Create the form 
38var f = inputEx(inputExDefinition); 
39         
view plain | print | ?

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.

Over 18 only
1// Create a schemaIdentifierMap  
2var schemaIdentifierMap = { 
3 // Person definition 
4 "Person": { 
5    "id""Person"
6    "description":"A person"
7    "type":"object"
8    "properties": { 
9        "name": { "type":"string""_inputex": {typeInvite: "you can add a type invitation", label: 'Your name'} }, 
10        "born" : { "type":"string""format":"date""optional":true"_inputex": {"_type""datepicker", valueFormat: 'Y-m-d', value: '2009-01-01', label: 'Birthdate'} }, 
11        "gender" : { "type":"string""choices": [ {"value":"male","label":"Guy"}, {"value":"female","label":"Girl"} ]}, 
12        "grownup": { "type""boolean""_inputex": { label: "Grownup?""description""Over 18 only"} }, 
13        "favoritecolors": { "type""array""_inputex": { label: "Favorites colors", elementType: {"type""color"} } } 
14    } 
15 } 
16}; 
17 
18// Create the JsonSchema builder object 
19var builder = new inputEx.JsonSchema.Builder({ 
20    'schemaIdentifierMap': schemaIdentifierMap, 
21     
22    // Those options will be added on all fields 
23    'defaultOptions': { 
24        'showMsg':true 
25    } 
26}); 
27 
28// Get the inputEx field definition from the "Person" object 
29var inputExDefinition = builder.schemaToInputEx(schemaIdentifierMap["Person"]); 
30 
31// Add 'container2' as parent element 
32inputExDefinition.parentEl = 'container2'
33 
34// Create the form 
35var f = inputEx(inputExDefinition); 
36         
view plain | print | ?