Render JSON forms with d3-view.
Last active
May 28, 2018 15:33
-
-
Save lsbardel/ee4ca05791e13997b7289a538ad7864d to your computer and use it in GitHub Desktop.
d3-view forms
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>d3 forms with d3-view</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"/> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script> | |
| <script src="https://giottojs.org/d3-view/0.5.0/d3-view.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-sm-6"> | |
| <d3form schema="test.json"></d3form> | |
| </div> | |
| <div class="col-sm-6"> | |
| <div d3-html='formData'></div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function () { | |
| vm = d3.view({ | |
| model: { | |
| formData: '' | |
| } | |
| }).use(d3.viewForms).use(d3.viewBootstrapForms); | |
| vm.mount('body', function (vm) { | |
| if (vm.name !== 'd3form') return; | |
| var form = vm.model; | |
| form.$on(function () { | |
| var markdown = [ | |
| "## Form inputs", | |
| "```json", | |
| JSON.stringify(form.$inputData(), null, ' '), | |
| "```" | |
| ]; | |
| vm.model.formData = marked(markdown.join('\n')); | |
| }); | |
| }); | |
| }()); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "type": "form", | |
| "children": [ | |
| { | |
| "type": "text", | |
| "maxLength": 64, | |
| "minLength": 2, | |
| "label": "Name", | |
| "required": true, | |
| "name": "name" | |
| }, | |
| { | |
| "type": "password", | |
| "maxLength": 32, | |
| "minLength": 8, | |
| "label": "Application Token", | |
| "required": true, | |
| "name": "token" | |
| }, | |
| { | |
| "type": "textarea", | |
| "label": "Write a message (note no label!)", | |
| "srOnly": true, | |
| "name": "message" | |
| }, | |
| { | |
| "type": "select", | |
| "label": "Choose an option", | |
| "name": "opt", | |
| "options": [ | |
| ["", "Choose..."], | |
| "opt1", | |
| ["op2", "Option 2"], | |
| ["op3"] | |
| ], | |
| "help": "Choose a random option, just for fun" | |
| }, | |
| { | |
| "type": "checkbox", | |
| "label": "Remember me", | |
| "name": "remember" | |
| }, | |
| { | |
| "type": "email", | |
| "srOnly": true, | |
| "name": "email", | |
| "required": "inputs.remember.value" | |
| }, | |
| { | |
| "type": "submit", | |
| "label": "Submit", | |
| "name": "submit", | |
| "disabled": "!form.$isValid()" | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment