Smart JSON Editor




  1. Smart Json Editor Windows 10
  2. Smart Json Editor Software
  3. Smart Json Editor Review
  4. Smart Json Editor App

SmartBox - all JSON Editor Options (pro)

JSON Editor Online - view, edit and format JSON online. Drag 'n drop your JSON document here. Open recent file. Here is the list of best free JSON Viewer software for Windows which will let you view a JSON file in a formatted manner on your PC.You can use these free JSON file viewer software to view as well as edit a JSON file.Some of these offer dual mode view which is Tree mode and Text mode to view a JSON. While you can use the former mode to view JSON file in a Tree based hierarchy, the latter will. Couchbase review: A smart NoSQL database. The free JSON Editor Plugin for the Eclipse IDE includes capabilities such as custom syntax highlighting, code folding, formatting, and editing.



The Editor allows you to define Input Fields with JSON. For example, you can allow an end-user to choose a color or pick a file. This choice, in turn, gets written into a CSS class automatically, which defines the Smartbox.


The basic syntax is as follows:


In JSON format, start with the brackets, then make an entry for every class you use in the HTML definition (here: “bgbox”), inside of it, an entry for every CSS property, with it’s editor definition:


  • Class
    • Property (CSS-Property, e.g. background-color)
      • Config for Editor


You can create as many classes and properties as you want.



{

'colorsection': { /* CSS Class */

'background-color': { /* CSS Property */

'inputType': 'colorfield', /* Editor Input Type: Color Picker */

'allowBlank': true /* Value can be left blank */

/* further Editor settings */

},

'background-image': { /* CSS Property */

'inputType': 'filefield' /* Editor Input Type: File Picker */

}

}

App

}



inputType

This defines the input type the end user can interact with. Available types are:


text: simple text field

numberfield: allows for numeric input

colorfield: hex values & colorpicker

filefield: incms file chooser (for bg images, favicons..)

select: select-options field

checkbox: checkbox


Depending on the choosen inputType, there are more options available:


All Input Types

allowBlank (true,false): if field can be left blank by the user

value: default value


Only numberfield

minValue, maxValue

outputType: if not specified, all numberfield values will be taken as “px”. if specified, the specified outputType will be appended, so “%”, or “em”, or even “” are useful values here


Only colorfield

showAlpha (true, false): shows a opacity regulator for color


Only select

options: the selectable options, as key-value object


Example - instead of allowing the end user to choose any color, you could create a select field from which he can choose 3 color options:


{

'colorsection': { /* CSS Class */

'background-color': { /* CSS Property */

'inputType': 'select', /* Editor Input Type: Select Dropdown */

'options': {

'#ff0000': 'Red',

'#00ff00': 'Green',

'#0000ff': 'Blue'

}

}

}

}


label

Custom field label can be set with this. Default css attributes have labels already, but this might still be handy to use own labels.


html

If set (to true), the value will not be added to CSS, but it will look for a placeholder in the HTML markup in curly braces. So when the property name is “cls”, you can use {CLS} as placeholder in the HTML markup.


Fixed Values

Instead of having an object config for the editor, you can also add a value directly, which will then not be editable but will be added to the css directly, like: “border”: “1px solid black”.


It is recommended to paste these fixed values directly into the CSS area and not into the editor, as it's a lot more clearly.


Special Values

There are a few reserved properties with special meanings:

  • _label (string): gives the Fieldset a custom label




If you want to make a SmartBox editable for end-users, without them having to mess about with CSS Code, you can do this by defining a SmartBox 'Options Editor'.


Smart Json Editor Windows 10

Important: the SmartBox Editor can only be set as long as the 'Expert mode' for SmartBoxes is still active!



Let's take a slim example for a SmartBox where you can simply choose the background-color:

Smart JSON Editor


1. Create a new SmartBox

Smart Json Editor Software


Name: Colorselection


HTML: <div>%CONTENT%</div>


2. In the Editor, we define that there's a CSS class named 'colorsection'. This has a property named 'background-color', which we want to make 'changeable' with a color picker:


{

'colorsection': {

'background-color': {

'inputType': 'colorfield'

}

}

}


3. Save and close the new SmartBox


4. When you re-open the SmartBox, you can see that the Background Color is now editable with a color picker:



5. If you remove the 'Expert mode' SmartBox in 'Settings / General Settings', you will no longer see the JSON-Editor. You will only see the user friendly editor fields you've defined.


6. If the CSS class (in this case) 'colorsection' requires further CSS, you can add an according CSS class definition in the CSS field of the SmartBox.




SmartFlexi


HTML:





CSS:




Editor:



Editor

Standard SmartBox with Color Mask



HTML:


Smart json editor pro


CSS:



Smart Json Editor Review


Editor:


Smart Json Editor App