# Display a log file in dashboard

**URL:** <https://discourse.nodered.org/t/display-a-log-file-in-dashboard/11134>\
**Category:** Dashboard\
**Created:** [14 May 2019 20:17 UTC](https://discourse.nodered.org/t/display-a-log-file-in-dashboard/11134 "2019-05-14T20:17:21Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [14 May 2019 20:17 UTC](https://discourse.nodered.org/t/display-a-log-file-in-dashboard/11134/1 "2019-05-14T20:17:21Z")

</div>

Continuing the discussion from [I need to display a program event log in dashboard](https://discourse.nodered.org/t/i-need-to-display-a-program-event-log-in-dashboard/1695/8):

@shrickus tried your suggestion in post #8, and it almost works, except there are no line breaks, and the log displays as one long string.  
I've tried putting a change node between the exec node and the ui\_template node, to change `\n` to `<b>` but it's still doesn't display individual lines of the log.

Any suggestions?

![log](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/09f26da67b06143fbbf947d0a6c462edf3853cc1.jpeg)

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [14 May 2019 20:29 UTC](https://discourse.nodered.org/t/display-a-log-file-in-dashboard/11134/2 "2019-05-14T20:29:22Z")

</div>

Wow, there's a blast from the past...

There are lots of html tricks for displaying plain text with line breaks in a browser. I like to put a bit of CSS styling into my `ui_template` node, like so:

```auto
<style>
    #mylog {
        min-height: 300px;
        padding: 0;
        white-space: pre;
    }
</style>

<div id="mylog" ng-bind="msg.payload" contenteditable="true">
    <!-- file contents will go here -->
</div>

```

which works well if you just want to show some multi-line text. I've also used Angular syntax to render a payload array into separate `<li>` elements or table rows, for instance. It really depends on whether your data is unstructured text, or columns of data.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [14 May 2019 20:52 UTC](https://discourse.nodered.org/t/display-a-log-file-in-dashboard/11134/3 "2019-05-14T20:52:35Z")

</div>

Yes, that works exactly as I want, but I don't understand how you've done it!  
How come it now breaks as it should without changing line breaks to html elements?

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [14 May 2019 20:57 UTC](https://discourse.nodered.org/t/display-a-log-file-in-dashboard/11134/4 "2019-05-14T20:57:43Z")

</div>

> [@shrickus](#):
>
> white-space: pre;

That bit of styling tells the `<div>` element to respect "preformatted" text (line breaks, tabs, indentation, etc). This overrides the usual html rendering that collapses all white space to a single space.

Alternately, you could use a `<pre>` element (which is the old way to show preformatted text).

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [14 May 2019 21:05 UTC](https://discourse.nodered.org/t/display-a-log-file-in-dashboard/11134/5 "2019-05-14T21:05:02Z")

</div>

Ah! Thanks for the help.

---

<div class="post-metadata">

**Author:** ![daveferrier](https://avatars.discourse-cdn.com/v4/letter/d/7c8e57/32.png) [@daveferrier](https://discourse.nodered.org/u/daveferrier)\
**Post date:** [5 April 2021 13:58 UTC](https://discourse.nodered.org/t/display-a-log-file-in-dashboard/11134/6 "2021-04-05T13:58:24Z")

</div>

I have been trying to format my log data. This was extremely helpful. Thanks Dave.

---

<div class="post-metadata">

**Author:** ![luc1207](https://avatars.discourse-cdn.com/v4/letter/l/f475e1/32.png) [@luc1207](https://discourse.nodered.org/u/luc1207)\
**Post date:** [22 October 2021 08:46 UTC](https://discourse.nodered.org/t/display-a-log-file-in-dashboard/11134/7 "2021-10-22T08:46:15Z")

</div>

Hi.  
My flows are writing some messages into a file. I used your template to display these on my dashboard. Unfortunately only the newest written line is displayed. What am I doing wrong?