How to show Json object in a notification popup, pretty-printed

Dashboard
1

I can pretty print an object to the debug panel:

const myObject = {
  name: 'Eleanor',
  age: 30,
  hobbies: ['Chocolate', 'Swimming', 'Ornithology']
};

const prettyPrintedObject = JSON.stringify(myObject, null, 2);
msg.payload = (prettyPrintedObject);
return msg;

This is the output

image
image328Ă—357 11.4 KB

But passing that string to a dashboard notify node recombines all the lines:

image
image871Ă—140 9.04 KB

How can I get a similar pretty print in a dashboard notification?

2

Not really D2 but should be usable anyway. I have a web component that will do this.

1 Like
3

since the notification supports html, just wrap your string in a <pre>

2 Likes
4

Thanks both. :grinning_face_with_smiling_eyes:

The <pre> tags do what I need.

image
image283Ă—370 9.55 KB

5

Oops, I spoke too soon.

It does indeed work for the above json snippet (ie it satisfies the title of the thread).

But with real world data it causes the notification popup to extend below the bottom of the screen; no scrollbar is shown.

Without a scrollbar there is no way to get to the "Close" button to click it.
This looks like a bug in the notification node?

Further, ctrl a also selects everything in the dashboard beneath the popup.
This also looks like a bug in the notification node?

What I'm actually trying to do is display the json that defines a change node so the user can copy it and import into their editor. There are several "Set .... to" lines each containing json, so the pretty output from JSON.stringify() is not really ideal.

I've had a look at the Markdown node too but I can't seem to get the code to both display and be importable.

Edit - What I am trying to achieve is analgous to the editor's "Export a selected node in compact format" function, only with the node settings generated in the dashboard.

6

can you add some local CSS to make the scrollbars auto ?

7

That can be solved by adding styles or utility classes to the pre - or wrap it in a div.

something like:

      <v-sheet
        class="overflow-y-auto"
        max-height="300"
      >
        <pre style="white-space: pre-wrap; word-wrap: break-word; padding: 2px;">JSON_HERE</pre>
      </v-sheet>
8

Good suggestion @dceejay. I can right click in the popup and Inspect to see it's makeup.

I can add

v-overlay__content {
overflow: scroll;
}

Which does create a scrollbar but it's slider is also off the bottom of the screen.
So I can scroll down and then select all the code, but only using the keyboard up/down keys.