NOTICE: All information contained herein is, and remains
the property of TechnoCore.
The intellectual and technical concepts contained
herein are proprietary to TechnoCore and dissemination of this information or reproduction of this material
is strictly forbidden unless prior written permission is obtained
from TechnoCore.
This document explains the functionality of the ObjFieldEditTabulator.py component. Its purpose is to provide an intuitive, spreadsheet-like interface for editing JSON data within a web form, utilizing the Tabulator.js library.
The component replaces a standard text field with an interactive table for editing JSON. It maintains a hidden <textarea> to store the raw JSON string, ensuring seamless integration with standard HTML forms.
<div>: This element is targeted by the Tabulator.js library and transformed into an interactive grid or table.<textarea>: This field holds the raw JSON data. Its name attribute is used for form submission, making the underlying data available to the server.JavaScript logic handles the conversion between the JSON string and the table representation. When the page loads, the JSON is parsed and used to populate the table. When the user edits a cell in the table, the JavaScript code updates the table data, converts it back to a JSON string, and saves it to the hidden textarea.
The script defines the ObjFieldElement class, which inherits from WebFormElement.WebFormElement, giving it the standard behavior of a form field within the application's framework.
__init__ MethodThe constructor sets up the component and loads the necessary external resources.
_IsA = "TabulatorField".self.add_resource_css(...) and self.add_resource_script(...) to load the Tabulator stylesheet and JavaScript library from a CDN.RenderElement MethodThis is the core method that generates the component's HTML and JavaScript.
<div> for the table and the hidden <textarea> to hold the JSON string.{"key1": "value1", "key2": "value2"}). If it is, the script transforms it into an array of key-value pairs (e.g., [{key: "key1", value: "value1"}, {key: "key2", value: "value2"}]), which is the format Tabulator requires to populate rows. If the data is already an array, it's used directly.Tabulator instance on the visible <div>, configuring it with two editable columns: "Key" and "Value".cellEdited event listener. This listener fires whenever the user finishes editing a cell.JSON.stringify's the data (with formatting) and updates the value of the hidden textarea.ObjFieldEditTabulator.py is a powerful component that significantly improves the user experience for editing JSON data. It abstracts the complexity of JSON syntax behind a user-friendly table interface while ensuring the data remains in a standard, submittable format.