Contentment Code Editor - Can it pretty print my JSON?

Questions
1

We are using the lovely Contentment package from Mr Lee K :umbraco-heart: in conjunction with UI builder to help display a record/audit of important requests we send out from the site.

We are using the the Umbraco.Community.Contentment.CodeEditor property editor to help display the JSON of the payload we send out to a service and the JSON payload we receive back from the service.

The DB table has the raw JSON string on a single line, but I was wondering if there was a way for the code editor to pretty print or format my JSON for me, as nicely indented JSON.

image
image2086Ă—1385 216 KB

Any thoughts or ideas if this could be achieved?

2

Do you actually want to format the data, or just have a friendlier view of it?

If it’s not for editing then a custom property “editor” would be straightforward, parse and stringify with JS then render in a pre tag with highlight.js

3

Yeh that might be a good shout to do Jason, as no we don’t need to modify the value as its read only.

Sounds like I am off to create a simple property editor view then, I was just being lazy and trying to use some of the stuff that we have here in this project and seeing if it could be bent a little to do what we needed.

4

You can possible try colorizeElement from monaco editor, wrapped in a custom property editor:

An example:

5

It would be nice, but I reckon by the time you’ve bent Ace to you will you’ll have expended more effort than doing something custom.

6

Yep you are probably right… I think I was just hoping in my head someone was gonna just give me a bit of magic as they had already solved it.

7

A little round the houses, but I tend to use https://chromewebstore.google.com/detail/json-viewer-pro/eifflpmocdbdmepbjaopkkhbfmdgijcc so I can just paste in some JSON, make it look beautiful and tweak if needed, then paste back out without leaving my browser.

1 Like
8

I’m assuming this is Contentment for Umbraco 13? (I can’t quite tell from the screengrab).

If you don’t need to edit the JSON data, then you could try the Templated Label property-editor instead?

It’ll let you use an AngularJS template to display the JSON data. The built-in default code snippet would give you…

<umb-code-snippet language="'JSON'">{{ model.value | json }}</umb-code-snippet>

The json filter has some extra options too, see AngularJS docs for more info: AngularJS: API: json.

4 Likes
9

Hi Lee,
Yep it is V13, sorry I should have made it clearer. I only tagged the post with V13 so perhaps its not so obvious…

Anyway I LOVE the idea of the templated list and this quick approach without me having to scratch my head on writing AngularJS code again after my head has adjusted to WebComponent land.

Will give it a go and let you know how it goes…

1 Like
10

Ah, I didn’t see where the tags were displayed on the topic… I see now, right underneath the title! :person_facepalming:

11

Thank you Lee that worked lovely :heart_eyes:

image
image2747Ă—1802 237 KB

The solution is exactly as Lee mentioned above and shown in the screenshot below

<umb-code-snippet language="'JSON'">
{{ model.value | json }}
</umb-code-snippet>

image
image2747Ă—1802 331 KB

4 Likes
12

This topic was automatically closed 5 days after the last reply. New replies are no longer allowed.