[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

+    };
+    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:16:35Z

+            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

+            # 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

+    // 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

+                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

+
+        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.

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.

flotho · 2026-04-15T21:21:43Z

Hi @len-foss thnaks for your contribution.
Any chance to rebase ?

simahawk

LG overall. Couldn't test as Runboat is hanging.

simahawk · 2026-04-16T06:56:00Z

@@ -0,0 +1,11 @@
+To insert a json editor in a form view, you can use the widget:
+```xml
+    <field name="json_field" widget="json_editor"/>


is this needed since it's now registered for all json fields?

I'm not sure this was a good idea, since in 19.0 there is a default json widget -- that is just a json string dump on the content (which I don't understand why you didn't have that since the introduction of the field).

So if you use json_editor, you can migrate without any view change, whereas json means it won't, you'll get the default one.

len-foss · 2026-04-16T07:47:54Z

Rebased 👍

simahawk · 2026-09-15T14:56:02Z

@hbrunn ping

won't continue reviewing this

OCA-git-bot · 2026-09-15T18:00:02Z

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). 🤖

simahawk · 2026-09-15T20:17:45Z

@len-foss pls squash and I would set the maturity level to alpha if you don't mind (cheaper than adding tests 😉 )

etobella · 2026-09-16T03:23:08Z

@simahawk it is true that alpha doesn't require tests, but we should encourage people to add them, isn't it? 😉

simahawk · 2026-09-16T07:41:40Z

@simahawk it is true that alpha doesn't require tests, but we should encourage people to add them, isn't it? 😉

We should and we did (Holger did) and @len-foss didn't ignore that, he provided an answer.
Now, we have 2 choices:

keep this PR stuck forever
let it go and have someone using it for real

In this particular case, I'm for opt 2, but this is a democracy and you can still block the PR 😉

etobella · 2026-09-16T08:05:22Z

@simahawk I was not going to block the PR don't worry for that. I already know how hard it is to add tests (even more JS). I can understand that it is not an easy step and it was not blocking me.

My only concern was that your comment could be interpreted as "add everything as alpha and then we don't need to care about tests" 😉 (I know what you were thinking and I agree, however I wanted to clarify to avoid confusion).

One last thing, @len-foss can you squash all commits in a single one?

simahawk · 2026-09-16T09:46:14Z

My only concern was that your comment could be interpreted as "add everything as alpha and then we don't need to care about tests" 😉 (I know what you were thinking and I agree, however I wanted to clarify to avoid confusion).

Totally fair ☺️ Thank you!

len-foss · 2026-09-18T13:52:30Z

There's just the fact that in that version the widget is registered as json, which in 19.0 will migrate to the default Odoo json, which isn't editable; so I'd change that to json_editor by default, so that it's clean across migrations. Rebase/squashed commits.

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

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

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 force-pushed the 18.0-web_json_widget-len branch from 9fa5534 to d700636 Compare August 26, 2025 18:51

hbrunn previously 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

simahawk reviewed Apr 16, 2026

View reviewed changes

len-foss force-pushed the 18.0-web_json_widget-len branch from 1e7b2d0 to d56ccf9 Compare April 16, 2026 07:34

OCA-git-bot added series:18.0 mod:web_json_widget_demo Module web_json_widget_demo mod:web_json_widget Module web_json_widget labels Apr 16, 2026

This was referenced Sep 15, 2026

[ADD] web_widget_json_editor: JSON Editor widget for form views #3380

Open

[MIG] connector_importer_api: Migration to 18.0 + Improvements OCA/connector-interfaces#187

Open

OCA-git-bot added approved ready to merge labels Sep 15, 2026

len-foss added 2 commits September 18, 2026 15:48

[ADD] web_json_widget

294806b

[ADD] web_json_widget_demo

1c58802

len-foss force-pushed the 18.0-web_json_widget-len branch from d56ccf9 to 1c58802 Compare September 18, 2026 13:51

	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!

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!

Uh oh!

len-foss commented Aug 30, 2025

Uh oh!

flotho commented Apr 15, 2026

Uh oh!

simahawk 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!