{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "c6ef475d-f4d2-44fe-b4d2-12495d4efe74",
   "metadata": {},
   "source": [
    "# ipywidgets-jsonschema demo"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5b1bb7b8-06ca-473e-8bf7-07592bf29c77",
   "metadata": {},
   "source": [
    "`ipywidgets-jsonschema` allows you to generate a widget form from an existing schema that follows th JSON Schema specification. We first define a schema:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0b28466d-54d5-4b3e-909c-1c3038d3d7e6",
   "metadata": {},
   "outputs": [],
   "source": [
    "schema = {\n",
    "    \"type\": \"object\",\n",
    "    \"properties\": {\n",
    "        \"name\": {\"type\": \"string\", \"title\": \"Name\"},\n",
    "        \"food\": {\n",
    "            \"type\": \"array\",\n",
    "            \"items\": {\"type\": \"string\"},\n",
    "            \"title\": \"Preferred Food\",\n",
    "        },\n",
    "    },\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7cc08b1c-ac7d-4254-941c-81848024dc32",
   "metadata": {},
   "source": [
    "Generating the widget form for it and visualizing it in Jupyter is as simple as this:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5c33de7b-4568-49e3-8c40-a901e9bd0505",
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipywidgets_jsonschema import Form"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "53d75508-3945-496e-8ac4-ecc34b148067",
   "metadata": {},
   "outputs": [],
   "source": [
    "form = Form(schema)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "863174a7-1436-4357-9464-36ae24293e91",
   "metadata": {},
   "outputs": [],
   "source": [
    "form.show(width=\"500px\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "68487025-bddd-4820-93c3-cc7f81ce0ad1",
   "metadata": {},
   "source": [
    "To get access to the current data, we can use the `data` property of `form`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f98cda2e-7371-49df-90e3-f6e32ab054b0",
   "metadata": {},
   "outputs": [],
   "source": [
    "form.data"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "aff26b6e-08ca-4e28-a168-fe0e95d208ea",
   "metadata": {},
   "source": [
    "The data displayed in the widget can also be live-updated by setting the `data` property:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cf54749e-92de-46ac-b874-6372b9d5997c",
   "metadata": {},
   "outputs": [],
   "source": [
    "form.data = {\"name\": \"Me\"}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "23254122-b5da-48ae-901d-ce1ca69d063a",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.9.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}