# Basic Template migration
**URL:** https://discourse.nodered.org/t/basic-template-migration/85790
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [23 February 2024 03:21 UTC](https://discourse.nodered.org/t/basic-template-migration/85790 "2024-02-23T03:21:32Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [23 February 2024 03:21 UTC](https://discourse.nodered.org/t/basic-template-migration/85790/1 "2024-02-23T03:21:32Z")
[template\_d1.json](https://discourse.nodered.org/uploads/short-url/2XzD4QmnBsByUvdd3h5WV4ZCB75.json) (1.1 KB)
I want to migrate below DB1 template to DB2, but somehow unable to handle the msg.payload
The msg.payload value is "[//cdn.weatherapi.com/weather/64x64/day/113.png](https://cdn.weatherapi.com/weather/64x64/day/113.png)" to show an icon
How can I do this with Db2 ?
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [23 February 2024 06:24 UTC](https://discourse.nodered.org/t/basic-template-migration/85790/2 "2024-02-23T06:24:33Z")
Place the img tag inside template tag
```auto
```
---
### Author:  [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [23 February 2024 06:56 UTC](https://discourse.nodered.org/t/basic-template-migration/85790/3 "2024-02-23T06:56:49Z")
@hotNipi I have managed the hard-coded part already, but as soon I i replace the hardcoded _ **src="image-source"** _ with the variable _**(e.g. src="{{msg.payload.icon}}")**_ than the template is failing.
the msg.payload.icon has a valid load " [//cdn.weatherapi.com/weather/64x64/day/113.png](https://cdn.weatherapi.com/weather/64x64/day/113.png)" but it is on;y showing when hardcoded and not provided from outside the template
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [23 February 2024 08:03 UTC](https://discourse.nodered.org/t/basic-template-migration/85790/4 "2024-02-23T08:03:51Z")
```auto
![img-alt]()
```
---
### Author:  [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [23 February 2024 08:21 UTC](https://discourse.nodered.org/t/basic-template-migration/85790/5 "2024-02-23T08:21:29Z")
wow... it works!
where can I read about these new teamplate structures & formats? ...e.g. "`${msg.payload.icon}`"
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [23 February 2024 08:37 UTC](https://discourse.nodered.org/t/basic-template-migration/85790/6 "2024-02-23T08:37:01Z")
The dollar thing is not directly related to vue nor the ui\_template but it is [template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
Why it is working and every other (I'm sure you tried hard) failed - I'm not on position to explain it in vue terms but as it is dynamic property value it's an expression. Using template literals for expressions is common way to solve that kind of problems.
---
### Author:  [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [23 February 2024 08:58 UTC](https://discourse.nodered.org/t/basic-template-migration/85790/7 "2024-02-23T08:58:54Z")
yeah .. looks like I have to do a lot of freshen-up to do .. before I can migrate all my DB1 dashboards to DB2 🤣 🤣
thx a lot for your great and quick help
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [23 February 2024 09:04 UTC](https://discourse.nodered.org/t/basic-template-migration/85790/8 "2024-02-23T09:04:26Z")
In Vue-land, no need to have `{{ }}` when it's inside an attribute. Instead, you can preced the attribute with a `:` to tell Vue _"there is code in here, go run it"_.
So another way to write this, which is a little more _Vue_ would be:
```html
![img-alt]()
```
Note I also included `?` on the `.payload` as it then handles the case where `msg.payload` doesn't yet exist, by checking it exists before trying to read `.icon` (generally on first load)
The `${}` syntax used by @hotNipi is a general JavaScript notation, and can be used, for example, if you want to merge strings with a dynamic variable:
```html
![img-alt]()
```
Where here, it would auto-append `.png` to anything read from `.icon`
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [23 February 2024 09:10 UTC](https://discourse.nodered.org/t/basic-template-migration/85790/9 "2024-02-23T09:10:36Z")
> [@joepavitt](#):
>
> handles the case where `msg.payload` doesn't yet exist
That explanation should be written in docs with red & bold & xxx-large. 🙂
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [23 February 2024 09:20 UTC](https://discourse.nodered.org/t/basic-template-migration/85790/10 "2024-02-23T09:20:10Z")
PR is open: [Docs: "Important Note" to use conditional operators by joepavitt · Pull Request #605 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/pull/605)
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [23 February 2024 09:24 UTC](https://discourse.nodered.org/t/basic-template-migration/85790/11 "2024-02-23T09:24:52Z")
> [@hotNipi](#):
>
> That explanation should be written in docs with red & bold & xxx-large.
`.?` won't work on old browsers though so make sure you aren't using it if you use old tablets or phones around the house as displays.
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [23 February 2024 09:27 UTC](https://discourse.nodered.org/t/basic-template-migration/85790/12 "2024-02-23T09:27:42Z")
The one should know the target as always ...
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [23 February 2024 09:34 UTC](https://discourse.nodered.org/t/basic-template-migration/85790/13 "2024-02-23T09:34:44Z")
I try to strike a balance between JavaScript features and supporting older browsers.
All my front-end code is, these days, targeted at browsers from early 2019 onwards. While perhaps not relevant to D2 use, I use ESBUILD to ensure that I can enforce that target as well as to produce parallel non-module (IIFE) and module (ESM) versions of front-end code.
JavaScript is in massive flux (as is CSS) unfortunately so some caution about what features should be used is needed.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [8 March 2024 09:34 UTC](https://discourse.nodered.org/t/basic-template-migration/85790/14 "2024-03-08T09:34:58Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.