Why You Need This Module

Working with raw JSON data in Odoo's default text fields can be cumbersome, error-prone, and visually unappealing. The Elmore JSON Selector Widget revolutionizes this by providing:

• Crystal-Clear Readability: No more squinting at minified JSON. View your data in a beautifully formatted, color-coded, and collapsible tree structure.
• Effortless Navigation: Quickly expand and collapse nodes to explore complex JSON objects with ease.
• Instant Path Extraction: Developers, rejoice! Double-click any key or value to instantly get its precise JSON path then copy it to your clipboard (clipboard access subject to browser security policies), saving valuable time during development and debugging.
• Enhanced User Experience: A dedicated "View" button next to your JSON fields opens a sophisticated popup viewer, keeping your forms clean and focused.

Key Features

• Dedicated "View" Button: Appears next to JSON (Char/Text) fields for quick access.
• Elegant Popup Viewer: A modern, dark-themed modal displays your JSON data, featuring color-coded syntax highlighting and clear distinction for keys and values.
• Interactive Tree Navigation: Expand and collapse individual JSON objects and arrays with clear visual cues (➕/➖ icons).
• One-Click JSON Path Interaction: Simply double-click on any key or value. The full JSON path (e.g., model.account.name) is shown, and a notification displays it. (Automatic copy to clipboard depends on browser security).
• Smooth Scrolling: Handles large JSON objects gracefully with internal scrolling.
• Professional Design: Clean, intuitive, and visually appealing interface.
• Easy Integration: Works as a field widget, seamlessly enhancing existing JSON fields.

See It In Action!

How It Works

The Elmore JSON Selector Widget enhances standard Odoo Char or Text fields intended to store JSON data.

1. "View" Button: A "View" button (👁️) appears alongside the textarea for fields using this widget.
2. Popup Viewer: Clicking this button opens a modal. The JSON is parsed and rendered by a JavaScript JSON viewing library into a structured, collapsible tree with syntax highlighting.
3. Interaction: Click ➕ / ➖ icons or keys to expand/collapse nodes. Collapsed sections show placeholders like {...} or [...].
4. Path Interaction: Double-click any key/value. The widget calculates the dot-notation path (e.g., account.marketer.name) and displays it in a notification. (Clipboard copy depends on browser security).

Installation

1. Download the module.
2. Place the elmore_json_widget folder into your Odoo addons directory.
3. Restart your Odoo server.
4. Navigate to Apps in Odoo.
5. Click Update Apps List.
6. Search for "Elmore JSON Selector Widget" and click Install.

Usage

Once installed, the widget enhances Char/Text fields used for JSON.

For Developers:

Define Char or Text fields in your Python models for JSON storage to benefit from the improved UI viewing experience.

from odoo import models, fields

class YourModel(models.Model):
    _name = 'your.model'

    json_data = fields.Text(string="JSON Data")
    # Or: json_data_char = fields.Char(string="JSON Data (Char)")

Optionally, specify the widget in your XML views:

<field name="json_data" widget="json_selector"/>

For Users:

Click the "View" button next to a JSON field to open the interactive viewer. Double-click elements to get their paths.

Support & Contact

License