VisualNEO Web

neoJsonEditor takes a JSON Schema and uses it to generate an HTML form. It has full support for JSON Schema version 3 and 4.
You can set and get the form JSON data.

Based on:
https://github.com/json-editor/json-editor/tree/master

Description

The neoJsonEditor plugin for VisualNEO Web provides a robust solution for managing JSON data structures within web applications. By using this plugin, developers can create, edit, and validate JSON data directly in the app, making it ideal for applications that require user-generated or dynamic content. Here’s a breakdown of its main functionalities and practical applications:

Dynamic JSON Form Creation

The plugin leverages JSON Schema to generate HTML forms dynamically. By providing a JSON Schema, developers can create structured forms automatically, guiding users through data input while enforcing data types, required fields, and validation rules.

• Command: neoJsonEditorInit
• Syntax: neoJsonEditorInit "containerId" "schema"
• containerId: The ID of the container where the editor will display.
• schema: JSON Schema defining the structure and validation rules for the form.

Example: To initialize a JSON editor with a schema for user information:

neoJsonEditorInit "editorContainer" "{...}" 

Replace `{...}` with the JSON Schema for the form

This setup is particularly useful in form-based applications requiring consistent data structures, like user profiles or surveys.

Data Retrieval and Update

The plugin supports retrieving and updating JSON data within the editor, allowing applications to load existing data or save user input easily.

• Commands:
• neoJsonEditorGetData: Retrieves JSON data from the form.
• neoJsonEditorSetData: Loads JSON data into the editor.

These commands are beneficial for applications that involve frequent data updates, such as editable content management interfaces.

Form Enabling and Disabling

For control over form accessibility, the plugin includes commands to enable or disable the entire JSON form, useful in scenarios where editing may need to be restricted based on user roles or conditions.

• Commands:
• neoJsonEditorEnable: Enables the form.
• neoJsonEditorDisable: Disables the form.

Change Detection with Callbacks

The neoJsonEditorOnChange command allows developers to define a callback subroutine that triggers whenever a change occurs in the JSON editor. This feature is ideal for applications that need real-time validation or instant feedback on form changes.

Example Usage:

plaintextCopiar códigoneoJsonEditorOnChange "editorContainer" "myCallbackFunction"

In this setup, myCallbackFunction will execute every time the form content changes, supporting dynamic interactions like live previews.

Practical Applications

The neoJsonEditor plugin is versatile and can be used in:

• Content Management Systems (CMS): For structured content entry and editing.
• User Profiles: Allowing users to create and edit profiles with JSON-based form validation.
• Configurable Settings: Ideal for applications that require JSON configurations, like preference settings or dashboard setups.
  
  

By incorporating JSON Schema and dynamic data handling, the neoJsonEditor plugin makes it easy to manage complex data within user-friendly forms in VisualNEO Web​​.

neoJsonEditorInit

neoJsonEditorGetData

neoJsonEditorSetData

neoJsonEditorDestroy

neoJsonEditorEnable

neoJsonEditorDisable

neoJsonEditorOnChange

Created with the Personal Edition of HelpNDoc: Benefits of a Help Authoring Tool