[Feature] JSON Editor Widget

[Nikhil-Nandagopal]

Summary

Users need a way to edit & explore JSON objects

Requirement

Title	Desc	Comment
JSON Data	Object which needs to be parsed into the widget; editable or view only; The sample data should be short and be related to fruits	-
Mode	Editable | Explore	Editable mode: The json object will display as code; Explore mode: The json object will show up as a nested tree, And option to append new key value will be given; Both modes will allow editing
Expand Fields	Expand all the field in the explore mode	-
Save	action onSave will trigger the registered event; When the event is set a button to save the json object should show up	-
Allow Copy	Boolean - false; Should give an option to the end user to copy the object in one click	-
Indentation	Allow this automatically or with a button click on the widget; Should only be available in the edit mode	-

Figma Link

https://www.figma.com/file/w9CaXHF5iYcrLtiEbAHcFu/Widgets-Library?node-id=421%3A11596

Front conversations

[somangshu]

@nikhil do we need something like this or a linter like this

[Nikhil-Nandagopal]

@somangshu more like the former but we can add linting also to it. Like this is a great example https://jsoneditoronline.org/

[wmdev0808]

Estimation details:

• Research on the solution : 2
• Implementation: 3
• Test, refactor, documentation: 1

[asmiller]

Just submitted a PR for a read-only JSON widget - which could be expanded to read/write without too much difficulty

https://github.com/appsmithorg/appsmith/pull/7030

[momcilo-appsmith]

@somangshu I just added the link to Figma

[areyabhishek]

@momcilo-appsmith @somangshu This editor needs more states to be designed. See screenshots below from the JSON editor that haven't been designed.

Is it possible to list every single interaction that is necessary for this JSON editor? There's a lot of scenarios to cover here.

Loom video showing some interactions:

[somangshu]

@momcilo-appsmith the given design is not covering the PRD, simply restyling the current widget is not out goal, We also have additional options like save and copy that need to be an option for the end user (if allowed by the developer)

Apart from the the mode according to me should be an option in the property pane, I dont see why the end user needs this option.

@areyabhishek regarding the above feedback, the functionality you see is all default of the package, Do we really need to alter all that, We could control / hide some options based on the PRD

[areyabhishek]

@somangshu The UI looks inconsistent with what we have today. Can we simplify the current editor to only include the essential features? We can then only style the essential features the right way.

I'm worried about this widget's styling because it looks so bad and totally out of place in Appsmith.

[somangshu]

@areyabhishek we can work on changing the basic UI of the widget to make it consistent, The functionality offered by the package is useful and lets us offer more to the user when it comes to JSON Widget, In case we do not want the functionality we will use a very basic package which can just display JSON is an indented manner.

My conclusion here would be that:

• Either use a basic JSON editor, probably something like what we already have in appsmith
• Customise the current implementation as per out need

[areyabhishek]

Please ensure UI consistency. That's my main point. It shouldn't look out of place in an Appsmith app. Once you decide the core features, we can style the app to work like that

[somangshu]

@wmdev0808 we need to check what kind of options are provided by the package to customise the UI, Check out the design for a basic idea

[wmdev0808]

OK, let me check

[riodeuno]

• The features we have are quite limited today. disable, visible, copy, defaultJSON and onSave. In component features are: edit mode, view mode, JSON error reporting. We might need disableEditing and defaultEditMode here. As @areyabhishek and @somangshu mentioned, let's not increase the scope for v1. The core problem to solve is to have a nice way to edit and view JSON.
• About the library choice, we will need to figure out how customizable the current one is. I can recommend one, once the designs are available.

[nidhi-nair]

@somangshu A user was requesting an enhancement on this widget. Not sure if it had been implemented, is in scope for v1, or even whether we want to be supporting the feature at all. :)

is it possible to have a preview of images when there is links in the JSON?

[Nikhil-Nandagopal]

@nidhi-nair could you ask the user to share context of a place where they have seen something like this anywhere on the web? It doesn't seem like it should be a part of this widget

[nidhi-nair]

Here's what the user has shared on Discord:

thay's how I am doing it on vscode but I wanted to do it in appsmith interface instead ^^', so a preview of the picture when it's a link

[dilippitchika]

Adding notes from re-opening the PR and testing it out

Checked this, i think the widget wasn't fully built out UX and DX wise, but keeping that aside there are some challenges from theming perspective -

• The top bar uses a color for which it doesn't expose a configuration parameter to change - We can use custom css classes here
• The icons look different to standard icons we use - We can replace the icons from our end as behind the scenes they use svgs
• The fonts used in the editor's top bar and other places except code - I wasn't able to figure out if we can change this will need help
• There's a "powered by ace" watermark visible - I don't know if we should remove it. If we should then we can use custom classes again to hide.
• The dropdowns used don't follow theme - We can update using custom css

[somangshu]

@dilippitchika do we plan to pick this up?

[Nikhil-Nandagopal]

We recently added a custom widget where you can create a custom JSON widget. Check out the post below where you can fork and try out the widget https://community.appsmith.com/template/json-editorviewer