# Dashboard 2.0 Pre-Alpha Available

**URL:** <https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142>\
**Category:** General\
**Tags:** dashboard-2\
**Created:** [28 July 2023 13:39 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142 "2023-07-28T13:39:33Z")\
**Posts on this page:** 20\
**Page:** 10

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [24 October 2023 20:08 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/181 "2023-10-24T20:08:30Z")

</div>

A job for Node-RED to provide the requisite output for sure! 😉

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [24 October 2023 20:45 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/182 "2023-10-24T20:45:06Z")

</div>

This was news to me, hadn't seen that discussion, nor is that my area. I will leave to Ian to handle

---

<div class="post-metadata">

**Author:** ![kevinGodell](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kevingodell/32/27040_2.png) [@kevinGodell](https://discourse.nodered.org/u/kevinGodell)\
**Post date:** [25 October 2023 00:47 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/183 "2023-10-25T00:47:17Z")

</div>

@joepavitt Thank you for taking on the task of building dashboard 2.0, and the more difficult task of dealing with us.

Do you have any plans on adding a feature to the d2 template node to allow adding code to the head, such that we can load whatever 3rd party scripts that are needed? Or perhaps this could be a setting in the side panel to add 3rd party assets?

I am starting work on wrapping a video player within a custom element so that I can contain its logic and reuse it elsewhere in the old dashboard or in any basic html page. In the d2 template, I would like to be able to just add the html  
`<custom-element v-bind:src="msg.payload"></custom-element>`. But that will not work unless I can add a `<script src="/custom-element.js">` to the head of the dashboard.

For this experiment to work, I had to use the [ui-example](https://github.com/FlowFuse/node-red-dashboard-example-node) and added some code so that it added my locally hosted file from a standard template node containing the custom element and pass the payload via the vue property binding.

 ![Screen Shot 2023-10-24 at 7.22.35 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/c/acd0dfa24d2fdd8cd20b96d34b26a7c05a03cf86.png)

```auto
config.head = [
{
  type: 'script',
    data: {
      defer: 'defer',
      src: '/custom-element.js'
    }
  }
]

```

Using the ui-example was just a temporary solution to get the script src into the head. I would like this to work in a simple template without the need to publish a node.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [25 October 2023 00:50 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/184 "2023-10-25T00:50:25Z")

</div>

In a UI template config you can change the type to - **added to site head section**?

---

<div class="post-metadata">

**Author:** ![kevinGodell](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kevingodell/32/27040_2.png) [@kevinGodell](https://discourse.nodered.org/u/kevinGodell)\
**Post date:** [25 October 2023 00:54 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/185 "2023-10-25T00:54:50Z")

</div>

In the old dashboard that was an option. The new dashboard has different options, but I am hoping that it is because it is not fully complete.

 ![Screen Shot 2023-10-24 at 7.51.51 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/f/9f9de0c1e9cba06149d980b827ce1bb0a3179428.png)

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [25 October 2023 01:09 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/186 "2023-10-25T01:09:33Z")

</div>

Sorry misunderstood 😉

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [25 October 2023 05:35 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/187 "2023-10-25T05:35:02Z")

</div>

> [@kevinGodell](#):
>
> Do you have any plans on adding a feature to the d2 template node to allow adding code to the head, such that we can load whatever 3rd party scripts that are needed? Or perhaps this could be a setting in the side panel to add 3rd party assets?

Yes! Absolutely. As you’ve discovered (thanks for exploring ui-example) it is actually functional under the hood, as that's how the third-party integrations work, I just need to work out how to cleanly expose the relevant bits in the NR Editor.

Have been focussed on Migration Guide and a really neat new update for Chart Key Mapping last couple of weeks, but this is my next major priority.

I'm trying to support two additional pieces:

1. Injection of scripts to 
2. Definition of custom JS functionality that would bind to the created Vue widget/component

Want to make that interface in Editor as clean/intuitive as possible

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [25 October 2023 09:25 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/188 "2023-10-25T09:25:03Z")

</div>

> [@kevinGodell](#):
>
> the more difficult task of dealing with us.

🤣

> [@kevinGodell](#):
>
> I am starting work on wrapping a video player within a custom element so that I can contain its logic and reuse it elsewhere in the old dashboard or in any basic html page.

Have you considered putting that in a Web Component? Then it would be useable not just in Dashboards but also http-in/-out and UIBUILDER and even outside Node-RED.

I have a build pattern I can share that outputs minimised IIFE and ESM versions of web components along with maps (for debugging) if that is of interest.

Web components may not be as feature rich as VueJS components but they are standards-based and so less likely to fall foul of future "upgrades" to the frameworks and they are usable in wider contexts.

* * *

And, of course, you don't HAVE to load scripts and styles in the head though that can have its advantages.

---

<div class="post-metadata">

**Author:** ![kevinGodell](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kevingodell/32/27040_2.png) [@kevinGodell](https://discourse.nodered.org/u/kevinGodell)\
**Post date:** [25 October 2023 10:28 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/189 "2023-10-25T10:28:55Z")

</div>

> [@TotallyInformation](#):
>
> Have you considered putting that in a Web Component?

Sorry for not being clear. Yes, that is exactly what I am doing.

> [@kevinGodell](#):
>
> I am starting work on wrapping a video player within a custom element so that I can contain its logic and reuse it elsewhere in the old dashboard or in any basic html page.

Yes, I just want to be able to include that dependency in the head of the dashboard so that I can simply drop the `<x-element></x-element>` right into the page and it should work.

And for further details, I will only use the dashboard to pass the connection details to the video player and the video player itself will be responsible for using what it needs to load the video buffer, such as hls .js or websockets. Going to get off the socket .io dependency so that I can avoid any versioning conflicts and have 1 less library to deal with.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [25 October 2023 10:39 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/190 "2023-10-25T10:39:43Z")

</div>

> [@kevinGodell](#):
>
> Yes, that is exactly what I am doing.

Nice! Well, if you want to know about my build process (using ESBUILD and Gulp), let me know.

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [27 October 2023 20:34 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/191 "2023-10-27T20:34:02Z")

</div>

Recent presentation by @joepavitt

> **[Dashboard 2.0 - Where we are, and what’s next? • FlowFuse](https://flowfuse.com/webinars/2023/dashboard-20/?utm_medium=email&_hsmi=77977705&_hsenc=p2ANqtz-_X8dbZGIZrmufevdhOn3zRrK_vvV2eCqYpItXgPgWr3BFOjmydMdqmokiQBnoCrmMew2JO-HM-LT_FMnEwrVaxADm8vA&utm_content=77977705&utm_source=hs_email)**
>
> FlowFuse and Node-RED allows your engineers to deliver fast, low-cost, low-code manufacturing applications.

Note - Dashboard 2.0 has changed to @flowfuse/node-red-dashboard

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/2/c26caec7a588b3e071d66fa1d3e547b9a8a059a5.png)

---

<div class="post-metadata">

**Author:** ![Mrb32](https://avatars.discourse-cdn.com/v4/letter/m/cdc98d/32.png) [@Mrb32](https://discourse.nodered.org/u/Mrb32)\
**Post date:** [4 November 2023 14:29 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/192 "2023-11-04T14:29:11Z")

</div>

Hi,

I am following the development from afar, and this all looks very exciting.  
I am waiting for the outstanding core nodes to become available before I start experimenting.

It may be a bit early to talk about this, but I think migrating to dashboard 2.0 will not be an easy affair based on my limited understanding of what is happening which I would summarise as follows:

- Dashboard 2 aims replicate the functionality of V1 core nodes/widgets with some enhancements.
- Dashboard 1 core nodes/widgets will not work on V2  
➞ as a result, moving from V1 to V2 involves at least a partial "rewrite".

Is that so?

Assuming it is so:

Apart from a few instances of ui-list and ui-media, I only use core dashboard nodes, but my app has quite a few flows, with a couple of them filling out the entire canvas available in NR2... They are not made solely of dashboard nodes of course, but these are shown/hidden and/or change colour/label/output based on conditions set all over the place...

Are there any migration tools or assistants in the pipeline? I don't mean by that something that would do everything for me, but simpler stuff like a consolidated reference table that would show the differences between v1 and V2 nodes for migration purposes, highlighting critical changes (payload handling change, formatting etc...), or may be some form of script to enumerate V1 nodes in a flow, basically small utilities that would make the task of porting V1 flows to V2 more approachable.

Nice to see some movement on the dashboard front in any case, thanks for doing that.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [4 November 2023 16:11 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/193 "2023-11-04T16:11:02Z")

</div>

> [@Mrb32](#):
>
> - Dashboard 2 aims replicate the functionality of V1 core nodes/widgets with some enhancements.
> - Dashboard 1 core nodes/widgets will not work on V2  
> ➞ as a result, moving from V1 to V2 involves at least a partial "rewrite"

This is correct

> [@Mrb32](#):
>
> Are there any migration tools or assistants in the pipeline?

Not _yet_, but this is definitely something I'd like to start working on (amongst everything else I still need to implement!)

> [@Mrb32](#):
>
> consolidated reference table that would show the differences between v1 and V2 nodes for migration purposes

I do have that: [Dashboard 1.0 Migration Guide | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/user/migration.html#dashboard-1-0-nodes)

It's contains all of the details of the configurable properties already, but is currently missing the details of events, for example the dynamic setting of properties, etc.

> [@Mrb32](#):
>
> may be some form of script to enumerate V1 nodes in a flow, basically small utilities that would make the task of porting V1 flows to V2 more approachable.

This is absolutely the plan: [Dashboard 1.0 Migration Guide | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/user/migration.html#migration-script)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [4 November 2023 16:26 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/194 "2023-11-04T16:26:33Z")

</div>

How should errors in the migration document be reported? As issues at [Issues · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues)

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [4 November 2023 16:41 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/195 "2023-11-04T16:41:07Z")

</div>

Yes, you're also welcome to open Pull Requests with the relevant changes/updates.

---

<div class="post-metadata">

**Author:** ![Mrb32](https://avatars.discourse-cdn.com/v4/letter/m/cdc98d/32.png) [@Mrb32](https://discourse.nodered.org/u/Mrb32)\
**Post date:** [4 November 2023 16:49 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/196 "2023-11-04T16:49:22Z")

</div>

Super, many thanks for taking the time to reply, I shall keep on eye on this too.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [5 November 2023 14:12 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/197 "2023-11-05T14:12:28Z")

</div>

Ignore please, the error was caused by something else that was refusing to upgrade.

~~Trying to upgrade to v0.7.0:~~

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/0/f0c6eb303dcc7bb14c39243c0c76e41052526f87.png)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [5 November 2023 14:27 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/198 "2023-11-05T14:27:00Z")

</div>

It is @flowfuse/node-red-dashboard now.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [5 November 2023 14:33 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/199 "2023-11-05T14:33:21Z")

</div>

That isn't the issue. However, I note that it wasn't d2 failing anyway, it was a problem with another package. Resolved now.

Also, from the homepage:

> Install the `@flowforge/node-red-dashboard` package

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [5 November 2023 15:17 UTC](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/200 "2023-11-05T15:17:59Z")

</div>

> [@TotallyInformation](#):
>
> from the homepage:
> 
> > Install the `@flowforge/node-red-dashboard` package

@joepavitt should the original package be removed from npm?

> **[@flowforge/node-red-dashboard](https://www.npmjs.com/package/@flowforge/node-red-dashboard)**
>
> A collection of Node-RED nodes that provide functionality to build your own UI applications (inc. forms, buttons, charts) within Node-RED.. Latest version: 0.7.0, last published: a month ago. Start using @flowforge/node-red-dashboard in your project...

Hopefully that should also remove it from [flows.nodered.org](http://flows.nodered.org)

[Previous page](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142.md?page=9)

[Next page](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142.md?page=11)