Skip to content
A configurable GUI editor for JSON Objects
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

#Json Object Editor by Corey Hadden

Visually Edit Objects Using this GUI tool, what you do from there is up to you.

todo: -conditional fields

##What's new 12/3/14 - +Added dynamicDisplay specs. (default:30) this allows for infinite scroll of big lists. Set how many items to load on initial draw. Changed search in accordance to use list not dom elements. Not updates _listCount property in title after searching. onUpdate and onMultipleUpdate added to schema for callbacks to these functions/buttons


  • use back button +url field


  • Added Image field
  • Added MultiSort field


  • List subset Selector
  • Multi-Select in Object List
  • Multi Update
  • Autocomplete textfield

##required includes

  • jquery
  • craydent
  • "js/JsonObjectEditor.jquery.craydent.js"
  • "css/joe-styles.css"

##In the pipeline

  • Remove Profiles
  • Conditional Fields
  • required fields

##instantiation var specs = { fields:{ species:{label:'Species',type:'select', values:['cat','dog','rat','thing'], onchange:adjustSchema}, gender:{type:'select', values:['male','female']}, legs:{label:'# of Legs',type:'int', onblur:logit}, weight:{label:' Weight (lbs)',type:'number', onblur:logit}, name:{label:' pet Name', onkeyup:logValue}, //id:{label:'ID',type:'text', locked:true}, id:{label:'ID',type:'guid'},

	//example of select that takes function (function is passed item)	
		animalLink:{label:'Link to other animal',type:'select', values:getAnimals},
	container:string ('body'),
    title:'${itemtype} | ${display}'
var JOE = new JsonObjectEditor(specs);


  • useBackButton:[false] if true, back button moves through joe panels when joe has history to go to (is open).
  • useHashlink:(false), true or a template for hashlinks. default template is '${schema_name}_${_id}'

###fields Properties for all Fields

  • label / display: what the field should display as *If the field type is boolean, label controls checkbox/boolean label
  • value: default value if not one in object
  • default: default value for field || function(object)
  • type: what type of field should JOE show
  • hidden: boolean / function, value will be added (but unsees by user)
  • locked: boolean
  • condition: boolean
  • width: used for layout control.
    • can use pixels or percentages (as string)
  • comment: a commentthat shows up at the beginning of the field
  • tooltip: hover/clickable tooltip that shows up next to name

field types:

  • rendering: for css html and js

  • text: default single line text.

    • autocomplete: boolean // obj of specs (template, idprop)
      • values:array of possibilities -maxlength:string
  • int: integer field

  • number: number (float) field

  • select: select list.

    • multiple(bool)
    • values(array of objects, [{value:"",name/display:""]), can be a function
      • disabled:boolean(func acceptable)
    • idprop: string of prop name
  • geo: shows a map

    • takes a string array "[lat,lon]"
    • center:[lat,lon], center of map
    • zoom: zoom level (higher zooms in more)
    • returns "[lat,lon]" -image : shows an image and HxW as th image url is typed in.
  • multisorter : allows arrays of objects to be selected and sorted in right bin.

    • values(array of objects, [{value:"",name/display:""]), can be a function
  • content : show content on in the editor

    • run: function to be run(current_object,field_properties)
    • template: html template for fillTemplate(template,current_object);
  • objectlist : a table of objects with editable properties

    • properties: array of objects|strings for the object property names -name: value in object -display: header in objectList
    • max: integer, number or items that can be added. use zero for infinite.
    • hideHeadings: don't show table headings
  • objectReference : a list of object ids

    • template
    • autocomplete_template
    • idprop
    • values
    • max(0 unlimited)
    • sortable(true)
  • code :

    • language
  • boolean:

    • label:controls checkbox label
  • preview : -content: string or function(current joe object) to replace everything on page (template). -bodycontent: same as content, only replaces body content. -url: preview page if not the default one.

    • encoded: boolean, if pre uriencoded labels:
  • pass an object instead of a string to the fields array.

    {label:'Name of the following properties section'}

##page sections {section_start: 'SectionName', section_label:'Section Name with Labels', condition:function(item){ return;} }, {section_end: 'CreativeBrief'}

  • pass an object instead of a string to the fields array. these show up on the details view as anchors.

  • Object Properties

    • section_start: name/id of section
    • 'section_label:use instead of section_start for display name
    • section_end: name/id of section(str)
    • template: html template for fillTemplate(template,current_object);

##page sidebar {sidebar_start: 'SectionName', sidebar_label:'Section Name with Labels', condition:function(item){ return;} }, {sidebar_end: 'CreativeBrief'}

  • pass an object instead of a string to the fields array. these show up on the details view as anchors.

  • Object Properties

    • sidebar_start: name/id of sidebar
    • sidebar_label:use instead of sidebar_start for display name
    • sidebar_end: name/id of sidebar(str)
    • template: html template for fillTemplate(template,current_object);

###defaultProfile overwrites the default profile


a list of schema objects that can configure the editor fields, these can be given properties that are delegated to all the corresponding fields.

var animalschema = 
	title:'Animal', *what shows as the panel header* 
	fields:['id','name','legs','species','weight','color','gender','animalLink'], *list of visible fields*
	_listID:'id', *the id for finding the object*
	_listTitle:'${name} ${species}', *how to display items in the list*
	menu:[array of menu buttons],
	listMenuTitle: (string) template forjoe window title in list view,
	listmenu:[array of menu buttons] (multi-edit and select all always show),
	hideNumbers:boolean *toggle list numbers*
	multipleCallback:function to be called after a multi-edit. passed list of edited items.
	onUpdate: callback for after update. passed single edited items.
	onMultipleUpdate:callback for after multi update.passed list of edited items.
            filters: array of objects

##Table View - add tableView object to a schema; -cols = [strings||objects] -string is the name and value -display/header is the column title -property/name = object property ###Pre-formating you can preformat at the joe call or schema level. The data item will be affected by the passed function (which should return the preformated item).

##menu## an array of menu buttons

//the default save button
//this is the dom object, 
//use _joe.current.object for current object
condition:function(field,object) to call
self = Joe object
var __saveBtn__ = {name:'save',label:'Save', action:'_joe.updateObject(this);', css:'joe-save-button'};

##itemMenu## as array of buttons for each item in list views - name - action (action string) - url (instead of js action) - condition

##itemExpander## template or run for content to be shown under the main list item block.

###Addition properties Changing the schema on the fly?

_joe.resetSchema(new schema name);

css (included) options

  • joe-left-button
  • joe-right-button


{extend:'name',specs:{display:'Request Title'}},//extends the field 'name' with the specs provided.


a | adding a new object{},{schema:'animal',callback:addAnimal); 
//or goJoe(object,specs)

function addAnimal(obj){

b | viewing a list of objects

goJoe([array of objects],specs:{schema,subsets,subset}),{schema:'animal',subsets:[{name:'Two-Legged',filter:{legs:2}}]});
//use the specs property subset to pre-select a subset by name


  • _listWindowTitle: the title of the window (can be passed in with the schema);

  • _listCount: added to the current object and can be used in the title.

  • _listTitle:'${name} ${species}', how to display items in the list

  • _icon: [str] template for a list item icon (standard min 50x50), '${itemname}', can be obj with width, height, url

  • listSubMenu:a function or object that represents the list submenu

  • stripeColor:string or function that returns valid css color descriptor.

  • bgColor:string or function that returns valid css color descriptor.

  • subsets: name:string, filter:object

  • subMenu:a function or object that represents the single item submenu

  • _listTemplate: html template that uses ${var} to write out the item properties for the list item.

    • standard css class joe-panel-content-option

###c | Conditional select that changes the item schema

	species:{label:'Species',type:'select', values:['cat','dog','rat','thing'], onchange:adjustSchema},
		+label : STR
		+type : STR
		value : STR (default value)
		+values : ARRAY/FUNC (for select)
		+hidden:BOOL/STRING(name of field that toggles this) //don't show, but value is passed
		+locked:BOOL // show, but uneditable
		+onchange : FUNC
		+onblur : FUNC
		+onkeypress : FUNC
		+rerender : STRING // name of field to rerender

function adjustSchema(dom){
	var species = $(dom).val();
	if(species == "thing"){

###d | duplicating an item

//duplicates the currently active object (being edited)


  • deletes:array of properties to clear for new item
    • note that you will need to delete guid/id fields or the id will be the same.

e | exporting an object in pretty format json (or minified)

JOE.exportJSON = function(object,objvarname,minify)

##Useful Functions _joe.reload(hideMessage,specs)

  • use specs.overwreite object to extend reloaded object.


You can’t perform that action at this time.