[18.0][ADD] web_json_widget by len-foss · Pull Request #3231 · OCA/web

len-foss · 2025-07-27T12:33:55Z

Add a Json editor widget.
Supports edits, dark mode (should work on OCA's version, since it relies on setting the color_theme cookie to dark). Can even be put in a tree view, although you probably don't want to do that.

This module uses the library jsoneditor.
It is released under the Apache-2.0 license.

ivs-cetmix · 2025-08-16T16:14:30Z

Hello @len-foss and thank you for your contribution!
Could you please create a simple web_json_widget_demo module like this one that would serve as an example and also will allow to do functional review of your PR? Just add a field to the res.partner module same way as on your screenshot.

len-foss · 2025-08-17T11:16:30Z

@ivs-cetmix should be ready to test 👍

ivs-cetmix

Perfect, thank you @len-foss!

Here are some glitches I encountered during testing on MacOs 15.6 (24G84) in Safari Version 18.6 (20621.3.11.11.3)

Issue 1

Steps to reproduce (on runboat)

In the second (text) key start typing "qwerty"

Expected behaviour

The entire string can be typed in without loosing the focus

Current behaviour

Need to click in the widget after each symbol is typed in. Eg "q" -> click, "w" -> click , ....

Issue2

Field properties drop down is rendered below the chatter buttons.

Video of both issues.

len-foss · 2025-08-17T15:12:47Z

@ivs-cetmix
First, thank you for the testing. This is valuable feedback.

Easy point 2; I've added a CSS rule to increase the z-index. Good catch.

So, point 1. I actually broke editing trying to do a "quick patch" of a very specific problem: if the user calls the record switcher while the recordset is dirty, the component does not go through onWillUpdateProps, like it does if changes were already saved. As a result, you'd get outdated data in these cases. I'm not sure what is the proper solution, but I followed the approach of the chatter (which is to keep track of the displayed record, so that we can update if it changed). In any case, everything should be working now.

ivs-cetmix

Functional review LGTM
@len-foss works now, thank you!
P.S. If you have LinkedIn we can promote this module to get more attention and have it merged faster 😄

ShehbajTechultra · 2025-08-19T10:12:02Z

web_json_widget/static/src/components/json_editor/json_editor.esm.js

+    };
+    static defaultProps = {};
+
+    setup() {


Your createEditor() already has a great docstring. Adding the same for setup() and detect_dark_mode() helps future developers:
/**

Setup lifecycle hooks and state initialization.

Tracks record resId and resModel

Binds editor creation on mount

Cleans up editor on unmount
*/
setup() { ... }

/**

Detect if dark mode is active.

Currently relies on cookie color_scheme.
*/
detect_dark_mode() { ... }

Currently, the code is pretty short, at barely a 100 lines of logic. Adding such fluff would only make it less readable, and would only serve a purpose if it was used by some automatic documentation generation tool, which aren't used within the project.

ShehbajTechultra · 2025-08-19T10:12:53Z

web_json_widget/static/src/components/json_editor/json_editor.esm.js

+                    this.state.value = new_value;
+                    this.props.record.update({[this.props.name]: new_value});
+                } catch (error) {
+                    console.error("Error updating JSON value:", error);


Replace console.error with Odoo’s Notification service
this.env.services.notification.add(_t("Error updating JSON: ") + error.message, { type: "danger" });

ShehbajTechultra · 2025-08-19T10:16:35Z

web_json_widget/static/src/components/json_editor/json_editor.esm.js

+            onChange: () => {
+                try {
+                    const new_value = this.editor.get();
+                    this.state.value = new_value;


also update state with setter
this.state.value = { ...newValue };

antoniodavid

LGTM

OCA-git-bot · 2025-08-22T19:09:11Z

This PR has the approved label and has been created more than 5 days ago. It should therefore be ready to merge by a maintainer (or a PSC member if the concerned addon has no declared maintainer). 🤖

ivs-cetmix · 2025-08-22T21:30:48Z

Hi @len-foss , could you please check the code review comment and reply or apply them? Would be really great to have your excellent module merged!

len-foss · 2025-08-26T14:35:35Z

Hi @ivs-cetmix done 👍

Thank you @ShehbajTechultra for the suggestions.

ivs-cetmix · 2025-08-26T17:44:58Z

@ShehbajTechultra could you please do an after-update review? Than you in advance!

ShehbajTechultra

Approved

ivs-cetmix · 2025-08-26T17:58:06Z

Approved

@ShehbajTechultra , perfect, thank you!
@len-foss could you please prepare the PR for merge?

len-foss · 2025-08-26T18:20:53Z

@ivs-cetmix do you mean you prefer to have the commits squashed?

ivs-cetmix · 2025-08-26T18:22:33Z

@len-foss , yes, we need to squash commits so we have two - one per module.

ivs-cetmix · 2025-08-27T06:57:56Z

Hey @OCA/web-maintainers looks like we have a new cool widget ready to join the OCA family. Would appreciate your review)

hbrunn

please check out https://github.com/OCA/web/blob/18.0/web_widget_x2many_2d_matrix/static/tests/web_widget_x2many_2d_matrix.test.js for an example of how easy you can have your code tested nowadays.

This is called by https://github.com/OCA/web/blob/18.0/web_widget_x2many_2d_matrix/tests/test_web_widget_x2many_2d_matrix.py

hbrunn · 2025-08-29T13:07:24Z

web_json_widget/__manifest__.py

+            # content from https://app.unpkg.com/jsoneditor@10.2.0/files/dist
+            # source: https://github.com/josdejong/jsoneditor?tab=readme-ov-file
+            # licenced under Apache-2.0 license
+            "/web_json_widget/static/src/lib/dark-theme.css",


those usually go into /static/lib

hbrunn · 2025-08-29T13:09:10Z

web_json_widget/static/src/components/json_editor/json_editor.esm.js

+    // Improvements: add supportedOptions, ExtractProps...
+};
+
+registry.category("fields").add("json_editor", JsonEditor);


I'd suggest

Suggested change

registry.category("fields").add("json_editor", JsonEditor);

registry.category("fields").add("json", JsonEditor);

because then Odoo should pick the widget automatically, given there's not standard json widget

hbrunn · 2025-08-29T13:12:36Z

web_json_widget/static/src/components/json_editor/json_editor.esm.js

+                this.resId = this.props.record.resId;
+                this.resModel = this.props.record.resModel;
+                if (this.editor) {
+                    this.editor.set(this.props.record.data[this.props.name] || {});


Suggested change

this.editor.set(this.props.record.data[this.props.name] || {});

this.editor.set(this.state.value);

So, this one is pretty bad. Because of the very stupid OCA rule I squashed my commits, but basically if your recordset is dirty, using the record switcher makes it so that none of the widget lifecycle hooks are called. So, this.state.value is not updated, so you switch and the widget is not updated. I couldn't find anything that seemed to make sense and the odoo dev I asked was a clueless. This is inspired by how it's done by the mail JS code.

To clarify, onParched is a lifecycle hook but that is called continuously, whereas you'd want a 1-time one like onWillUpdateProps.

So, if there's a good explanation and solution, I'd like to know it.

hbrunn · 2025-08-29T13:14:00Z

web_json_widget/static/src/components/json_editor/json_editor.esm.js

+
+        const isDarkMode = this.detect_dark_mode();
+        if (isDarkMode) {
+            this.editorRef.el.classList.add("json-editor-theme-dark");


I wonder why you don't do this in the template?

Not sure exactly but the doc about the Json editor was a bit confusing to me, and I found confusing answers as to how to instantiate a dark version. I think the 'Odoo way' is to put that in a CSS without the dark mangling which is put into the dark assets bundle. As of now I find it simpler to keep it this way because I copy-pasted this from recommended setup, but it wouldn't be hard to change afterwards.

hbrunn · 2025-08-29T13:16:43Z

web_json_widget/static/src/components/json_editor/json_editor.esm.js

+            onChange: () => {
+                try {
+                    const new_value = this.editor.get();
+                    this.state.value = {...new_value};


isn't it the point of useState that you don't need to update this manually? Actually, what use is the state proxy in this widget in the first place?

You're right, it's not needed at all. I started by copying a basic widget, it's a 'PoC' remnant.

len-foss · 2025-08-30T18:52:43Z

@hbrunn
Regarding the test, in my opinion, it would be much more cost much more that what it's worth, so I won't implement it on my limited free time.
You're free to disagree of course, but I'm seeing test_web_systray_button_init_action make the tests red for everything, so consider the time lost for all (potential) contributors.

len-foss force-pushed the 18.0-web_json_widget-len branch from 68c5758 to b13df6a Compare July 27, 2025 12:50

ivs-cetmix requested changes Aug 17, 2025

View reviewed changes

len-foss force-pushed the 18.0-web_json_widget-len branch from 26e4630 to 8cd2914 Compare August 17, 2025 14:53

ivs-cetmix approved these changes Aug 17, 2025

View reviewed changes

ShehbajTechultra reviewed Aug 19, 2025

View reviewed changes

antoniodavid approved these changes Aug 22, 2025

View reviewed changes

OCA-git-bot added approved ready to merge labels Aug 22, 2025

ShehbajTechultra approved these changes Aug 26, 2025

View reviewed changes

len-foss added 2 commits August 26, 2025 20:51

[ADD] web_json_widget

2fcd643

[ADD] web_json_widget_demo

d700636

len-foss force-pushed the 18.0-web_json_widget-len branch from 9fa5534 to d700636 Compare August 26, 2025 18:51

hbrunn requested changes Aug 29, 2025

View reviewed changes

OCA-git-bot removed approved ready to merge labels Aug 29, 2025

bizzappdev mentioned this pull request Aug 29, 2025

[17.0] web_json_widget, web_json_widget_demo: Backport to 17.0 #3266

Open

fixup!

1e7b2d0

	registry.category("fields").add("json_editor", JsonEditor);
	registry.category("fields").add("json", JsonEditor);

	this.editor.set(this.props.record.data[this.props.name] \|\| {});
	this.editor.set(this.state.value);

Uh oh!

Conversation

len-foss commented Jul 27, 2025

Uh oh!

ivs-cetmix commented Aug 16, 2025

Uh oh!

len-foss commented Aug 17, 2025

Uh oh!

ivs-cetmix left a comment

Choose a reason for hiding this comment

Issue 1

Issue2

Uh oh!

len-foss commented Aug 17, 2025

Uh oh!

ivs-cetmix left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

antoniodavid left a comment

Choose a reason for hiding this comment

Uh oh!

OCA-git-bot commented Aug 22, 2025

Uh oh!

ivs-cetmix commented Aug 22, 2025

Uh oh!

len-foss commented Aug 26, 2025

Uh oh!

ivs-cetmix commented Aug 26, 2025

Uh oh!

ShehbajTechultra left a comment

Choose a reason for hiding this comment

Uh oh!

ivs-cetmix commented Aug 26, 2025

Uh oh!

len-foss commented Aug 26, 2025

Uh oh!

ivs-cetmix commented Aug 26, 2025

Uh oh!

ivs-cetmix commented Aug 27, 2025

Uh oh!

hbrunn left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

len-foss commented Aug 30, 2025

Uh oh!

Reviewers

Assignees

Labels