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 |
2 | var 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 |
27 | var builder = new inputEx.JsonSchema.Builder({ |
28 | 'schemaIdentifierMap': schemaIdentifierMap |
29 | }); |
30 | |
31 | // Get the inputEx field definition from the "Person" object |
32 | var inputExDefinition = builder.schemaToInputEx(schemaIdentifierMap["Person"]); |
33 | |
34 | // Add 'container1' as parent element |
35 | inputExDefinition.parentEl = 'container1'; |
36 | |
37 | // Create the form |
38 | var f = inputEx(inputExDefinition); |
39 | |
view plain | print | ? |
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.
1 | // Create a schemaIdentifierMap |
2 | var 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 |
19 | var 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 |
29 | var inputExDefinition = builder.schemaToInputEx(schemaIdentifierMap["Person"]); |
30 | |
31 | // Add 'container2' as parent element |
32 | inputExDefinition.parentEl = 'container2'; |
33 | |
34 | // Create the form |
35 | var f = inputEx(inputExDefinition); |
36 | |
view plain | print | ? |