# New Dashboard 2.0 Tutorial: Custom Templates

**URL:** <https://discourse.nodered.org/t/new-dashboard-2-0-tutorial-custom-templates/92500>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [18 October 2024 14:33 UTC](https://discourse.nodered.org/t/new-dashboard-2-0-tutorial-custom-templates/92500 "2024-10-18T14:33:51Z")\
**Posts on this page:** 7\
**Page:** 1

<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:** [18 October 2024 14:33 UTC](https://discourse.nodered.org/t/new-dashboard-2-0-tutorial-custom-templates/92500/1 "2024-10-18T14:33:51Z")

</div>

Another tutorial is up: [https://www.youtube.com/watch?v=7bj\_DFnRtU8](https://www.youtube.com/watch?v=7bj_DFnRtU8)

This talks through from the very basics of HTML/JS in a custom template nodes, through to covering VueJS essentials and examples of using the Vuetify Component Library.

The full chapter list from the YouTube video detail the top-level content:

- [00:00](https://www.youtube.com/watch?v=7bj_DFnRtU8&t=0s) Introduction
- [00:30](https://www.youtube.com/watch?v=7bj_DFnRtU8&t=30s) What we will build
- [03:07](https://www.youtube.com/watch?v=7bj_DFnRtU8&t=187s) Getting ISS Tracking Data
- [06:38](https://www.youtube.com/watch?v=7bj_DFnRtU8&t=398s) First Template - Standard HTML/JS/CSS
- [10:35](https://www.youtube.com/watch?v=7bj_DFnRtU8&t=635s) In-Built Variables & Functions
- [18:15](https://www.youtube.com/watch?v=7bj_DFnRtU8&t=1095s) Adding an iframe
- [21:43](https://www.youtube.com/watch?v=7bj_DFnRtU8&t=1303s) Add Button to drive API
- [23:09](https://www.youtube.com/watch?v=7bj_DFnRtU8&t=1389s) Vue: Component Structure
- [29:15](https://www.youtube.com/watch?v=7bj_DFnRtU8&t=1755s) Vue: Conditional Rendering
- [31:25](https://www.youtube.com/watch?v=7bj_DFnRtU8&t=1885s) Vue: List Rendering
- [32:50](https://www.youtube.com/watch?v=7bj_DFnRtU8&t=1970s) Vue: Attribute Binding
- [36:23](https://www.youtube.com/watch?v=7bj_DFnRtU8&t=2183s) Vue: Form Binding (setup)
- [38:45](https://www.youtube.com/watch?v=7bj_DFnRtU8&t=2325s) Vue: Form Binding (v-model)
- [40:12](https://www.youtube.com/watch?v=7bj_DFnRtU8&t=2412s) Vuetify Component Library
- [42:45](https://www.youtube.com/watch?v=7bj_DFnRtU8&t=2565s) Sending Data
- [45:42](https://www.youtube.com/watch?v=7bj_DFnRtU8&t=2742s) Vue: Event Handlers
- [47:08](https://www.youtube.com/watch?v=7bj_DFnRtU8&t=2828s) Example: City Distance to ISS
- [57:15](https://www.youtube.com/watch?v=7bj_DFnRtU8&t=3435s) Example: Combining Inputs
- [01:02:43](https://www.youtube.com/watch?v=7bj_DFnRtU8&t=3763s) Recap

Feedback on this, the other tutorials, and ideas for future tutorials are all most welcome.

---

<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:** [18 October 2024 14:46 UTC](https://discourse.nodered.org/t/new-dashboard-2-0-tutorial-custom-templates/92500/2 "2024-10-18T14:46:37Z")

</div>

Is there a link to an index of tutorials that we can post when someone asks for help?

---

<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:** [18 October 2024 14:52 UTC](https://discourse.nodered.org/t/new-dashboard-2-0-tutorial-custom-templates/92500/3 "2024-10-18T14:52:00Z")

</div>

We are gathering them as a playlist on the FlowFuse YouTube Account: [https://www.youtube.com/playlist?list=PLpcyqc7kNgp3TWYwWzC7iJtN8XtEhKqlY](https://www.youtube.com/playlist?list=PLpcyqc7kNgp3TWYwWzC7iJtN8XtEhKqlY)

Link to that is available on the FlowFuse YouTube profile, I'm also adding them to the [Dashboard docs homepage](https://dashboard.flowfuse.com/), and the [Getting Started](https://dashboard.flowfuse.com/getting-started.html) page.

---

<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:** [18 October 2024 14:55 UTC](https://discourse.nodered.org/t/new-dashboard-2-0-tutorial-custom-templates/92500/4 "2024-10-18T14:55:29Z")

</div>

Great. I will provide a canned text response we can use here, if I can remember how to do it.

---

<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:** [18 October 2024 15:15 UTC](https://discourse.nodered.org/t/new-dashboard-2-0-tutorial-custom-templates/92500/5 "2024-10-18T15:15:22Z")

</div>

I have added a canned template to the forum, for getting started with d2:

See [Getting Started | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/getting-started.html) for docs and links to video tutorials for Dashboard 2.0 (`@flowfuse/node-red-dashboard`)

---

<div class="post-metadata">

**Author:** ![davidz](https://avatars.discourse-cdn.com/v4/letter/d/a88e57/32.png) [@davidz](https://discourse.nodered.org/u/davidz)\
**Post date:** [18 October 2024 15:55 UTC](https://discourse.nodered.org/t/new-dashboard-2-0-tutorial-custom-templates/92500/6 "2024-10-18T15:55:40Z")

</div>

Thank you very much Joe. This is very helpful.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [17 November 2024 15:56 UTC](https://discourse.nodered.org/t/new-dashboard-2-0-tutorial-custom-templates/92500/7 "2024-11-17T15:56:16Z")

</div>

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