jsonviewer_widget.esm.js

/** @odoo-module **/

import {registry} from "@web/core/registry";
import {loadJS} from "@web/core/assets";
import {Component, onWillStart, useEffect, useRef} from "@odoo/owl";
import { standardFieldProps } from '@web/views/fields/standard_field_props';

class JsonWidget extends Component {
    static template = "api_connector.JsonWidgetField";
    static props = { ...standardFieldProps };
    setup() {
        this.json_tree = null;
        this.divRef = useRef("json_response");

        onWillStart(() =>
            loadJS("/api_connector/static/src/lib/jsonview/jsonview.min.js")
        );

        useEffect(() => {
            this.updateJson();
            return () => {
                if (this.json_tree) {
                    this.json_tree.destroy();
                }
            };
        });
    }
    updateJson() {
        if (this.json_tree) {
            this.json_tree.destroy();
        }
        const tree = jsonview.create(this.props.record.data[this.props.name]);
        this.json_tree = jsonview.render(tree, this.divRef.el);
        jsonview.expand(tree);
    }
}

export const jsonWidget = {
    component: JsonWidget,
};

registry.category("fields").add("json_viewer", jsonWidget);