Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
D
docs-phd5
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
dmstr
docs-phd5
Commits
acac394a
Commit
acac394a
authored
Jul 26, 2017
by
g.bisurgi
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
updated tutorial: json-editor-customizations
parent
7c39fd8f
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
19 additions
and
10 deletions
+19
-10
json-editor-customizations.md
guide/tutorials/json-editor-customizations.md
+19
-10
No files found.
guide/tutorials/json-editor-customizations.md
View file @
acac394a
# Custom editor
First of all when we use the word "editor" in the JSONEditor world we are
actually saying "input". Every input in the generated form is an editor. So an
editor can be a textarea, a checkbox, a bunch of radio buttons, etc.
In the JSONEditor world, every input in a form is an Editor.
An editor can be a textarea, a checkbox, a bunch of radio buttons, etc.
JSONEditor "build" the form editor following parameters that are defines in a
json schema. Very important are the "type" and the "format properties"
for example this
"username": {
"type": "string",
"format": "checkbox"
}
will produce an input type checkbox whos value is a string.
JSONEditor comes with built in editors but we can "build" our custom editor
to. In order to build an editor we have to "extend"
(javascript does not have
inheritance) the built in "JSONEditor.AbstractEditor" class. and add it to the
`JSONEditor.defaults.editors`
object.
to. In order to build an editor we have to "extend"
the built in
"JSONEditor.AbstractEditor" class. and add it to the
`JSONEditor.defaults.editors`
object.
In example a date
picker editor that needs (as a dependency) the jquery datepicker
.
In example a date
picker editor (needs the jquery datepicker)
.
JSONEditor.defaults.editors.datepicker = JSONEditor.AbstractEditor.extend({
build: function () {
...
...
@@ -29,7 +38,7 @@ In example a date picker editor that needs (as a dependency) the jquery datepick
// input
self.input = document.createElement('input');
self.input.type = 'text';
self.input.name = self.formname; // IMPORTANT
self.input.name = self.formname; // IMPORTANT
this will set the correct name of the input
self.input.classList.add('form-control');
self.group.appendChild(self.input);
...
...
@@ -43,8 +52,8 @@ In example a date picker editor that needs (as a dependency) the jquery datepick
self.customDatepickerOptions = self.schema.datepickerOptions ? self.schema.datepickerOptions : {};
self.customDatepickerOptions.minDate = new Date();
self.customDatepickerOptions.onSelect = function(selectedDate) {
self.value = selectedDate;
// IMPORTANT
self.onChange(true); // IMPORTANT
self.value = selectedDate;
self.onChange(true); // IMPORTANT
this will tell JSONEditor that something change (the value)
if(self.jsoneditor.options.show_errors !== "never") {
window.requestAnimationFrame(function() {
if (self.validate()) {
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment