{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "import param\n",
    "\n",
    "pn.extension('ace', 'jsoneditor')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The ``JSONEditor`` widget provides a visual editor for JSON-serializable datastructures, e.g. Python dictionaries and lists, with functionality for different editing modes, inserting objects and validation using JSON Schema.\n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "For layout and styling related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\n",
    "\n",
    "* **``disabled``** (boolean): Whether the editor is disabled (equivalent to setting `mode='view'`)\n",
    "* **``menu``** (boolean): Adds main menu bar - Contains format, sort, transform, search etc. functionality. true by default. Applicable in all types of mode.\n",
    "* **``mode``** (str): Sets the editor mode. In 'view' mode, the data and datastructure is read-only. In 'form' mode, only the value can be changed, the data structure is read-only. Mode 'code' requires the Ace editor to be loaded on the page. Mode 'text' shows the data as plain text. The 'preview' mode can handle large JSON documents up to 500 MiB. It shows a preview of the data, and allows to transform, sort, filter, format, or compact the data.\n",
    "* **``search``** (boolean): Enables a search box in the upper right corner of the JSONEditor. true by default. Only applicable when mode is 'tree', 'view', or 'form'.\n",
    "* **``schema``** (dict): Validate the JSON object against a JSON schema. A JSON schema describes the structure that a JSON object must have, like required properties or the type that a value must have. See http://json-schema.org/ for more information.\n",
    "* **``value``** (str): The current JSON serializable datastructure to display and edit\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To construct a `JSONEditor` editor widget we simply give it a value to render:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "json_editor = pn.widgets.JSONEditor(value={\n",
    "    'dict'  : {'key': 'value'},\n",
    "    'float' : 3.14,\n",
    "    'int'   : 1,\n",
    "    'list'  : [1, 2, 3],\n",
    "    'string': 'A string',\n",
    "}, width=400)\n",
    "\n",
    "json_editor"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Mode\n",
    "\n",
    "The JSON Editor has a number of modes that provide different ways of viewing and editing the `JSONEditor.value`. Note that to enable support for `mode='code'` you must load 'ace' using `pn.extension('ace')`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.FlexBox(*(pn.Column(f'### Mode: {mode}', json_editor.clone(mode=mode)) for mode in pn.widgets.JSONEditor.param.mode.objects))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Validation\n",
    "\n",
    "The `JSONEditor` provides validation of the `value` by providing a JSON schema. A JSON schema describes the structure that a JSON object must have, like required properties or the type that a value must have. See http://json-schema.org/ for more information."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.widgets.JSONEditor(\n",
    "    schema={\n",
    "      \"title\": \"Person\",\n",
    "      \"type\": \"object\",\n",
    "      \"properties\": {\n",
    "        \"firstName\": {\n",
    "          \"type\": \"string\",\n",
    "          \"description\": \"The person's first name.\"\n",
    "        },\n",
    "        \"lastName\": {\n",
    "          \"type\": \"string\",\n",
    "          \"description\": \"The person's last name.\"\n",
    "        },\n",
    "        \"age\": {\n",
    "          \"description\": \"Age in years which must be equal to or greater than zero.\",\n",
    "          \"type\": \"integer\",\n",
    "          \"minimum\": 0\n",
    "        }\n",
    "      }\n",
    "    },\n",
    "    value={\n",
    "        'firstName': 2,\n",
    "        'lastName': 'Smith',\n",
    "        'age': 13.5\n",
    "    }, height=500, width=400\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Controls\n",
    "\n",
    "The `JSONEditor` widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.Row(json_editor.controls(jslink=True), json_editor)"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}