# Form output and placeholder template\_ui

**URL:** https://discourse.nodered.org/t/form-output-and-placeholder-template-ui/91160
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [21 September 2024 12:53 UTC](https://discourse.nodered.org/t/form-output-and-placeholder-template-ui/91160 "2024-09-21T12:53:43Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![Panda](https://avatars.discourse-cdn.com/v4/letter/p/71c47a/32.png) [@Panda](https://discourse.nodered.org/u/Panda)
#### Post date: [21 September 2024 12:53 UTC](https://discourse.nodered.org/t/form-output-and-placeholder-template-ui/91160/1 "2024-09-21T12:53:43Z")

</div>

Hey guys,  
I want to make a form in the template node and then make an output for the next node. Unfortunately I can't get it right, do any of you have an idea where the problem is?

Thanks in advance

```auto
<style>
    .input-container {
        margin-bottom: 15px;
    }
    .input-label {
        display: block;
        margin-bottom: 5px;
    }
    .my-class {
        color: red;
    }
</style>

<template>
    <div>
    <div class="input-container">
        <label class="input-label">Abschlag (€):</label>
        <input type="number" id="abschlag" placeholder="Abschlag in €" />
    </div>
    <div class="input-container">
        <label class="input-label">Arbeitspreis (ct/kWh):</label>
        <input type="number" id="arbeitspreis" placeholder="Arbeitspreis in ct/kWh" />
    </div>
    <div class="input-container">
        <label class="input-label">Grundpreis (€):</label>
        <input type="number" id="grundpreis" placeholder="Grundpreis in €" />
    </div>
    <div class="input-container">
        <label class="input-label">Zählerstand:</label>
        <input type="number" id="zaehler" placeholder="Zählerstand" />
    </div>
    <button class="my-class" onclick="onClick()">Daten senden</button>
</template>

<script>
    window.onClick = function () {
        const abschlag = document.getElementById('abschlag').value;
        const arbeitspreis = document.getElementById('arbeitspreis').value;
        const grundpreis = document.getElementById('grundpreis').value;
        const zaehlerstand = document.getElementById('zaehler').value;
        
        const msg = {
            abschlag: abschlag,
            arbeitspreis: arbeitspreis,
            grundpreis: grundpreis,
            zaehler: zaehlerstand
        };

        alert('Daten gesendet: ' + JSON.stringify(msg));
        this.send(msg);
    }
</script>

```

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [21 September 2024 13:09 UTC](https://discourse.nodered.org/t/form-output-and-placeholder-template-ui/91160/2 "2024-09-21T13:09:51Z")

</div>

docs: [UI Template Examples | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/user/template-examples.html)

![chrome_kYNOk6HbmH](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/5/8536c6064e2219814ff7c56269af8456ddfe2349.gif)

```auto
<template>
    <div>
        <div class="input-container">
            <label class="input-label">Abschlag (€):</label>
            <input type="number" v-model="abschlag" placeholder="Abschlag in €" />
        </div>
        <div class="input-container">
            <label class="input-label">Arbeitspreis (ct/kWh):</label>
            <input type="number" v-model="arbeitspreis" placeholder="Arbeitspreis in ct/kWh" />
        </div>
        <div class="input-container">
            <label class="input-label">Grundpreis (€):</label>
            <input type="number" v-model="grundpreis" placeholder="Grundpreis in €" />
        </div>
        <div class="input-container">
            <label class="input-label">Zählerstand:</label>
            <input type="number" v-model="zaehler" placeholder="Zählerstand" />
        </div>
        <button class="my-class" @click="onClick">Daten senden</button>
</template>

<script>
    export default {
        data() {
            return {
                abschlag: '',
                arbeitspreis: '',
                grundpreis: '',
                zaehler: ''
            }
        },
        methods: {
            onClick: function () {
                this.msg.payload = {
                    abschlag: this.abschlag,
                    arbeitspreis: this.arbeitspreis,
                    grundpreis: this.grundpreis,
                    zaehler: this.zaehler
                }
                this.send(this.msg);
            }
        }
    }
</script>

<style>
    .input-container {
        margin-bottom: 15px;
    }

    .input-label {
        display: block;
        margin-bottom: 5px;
    }

    .my-class {
        color: red;
    }
</style>

```

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [21 September 2024 13:26 UTC](https://discourse.nodered.org/t/form-output-and-placeholder-template-ui/91160/3 "2024-09-21T13:26:34Z")

</div>

And if you want it to look native, the use the [vuetify components](https://vuetifyjs.com/en/components/buttons/#usage)

---

<div class="post-metadata">

### Author: ![Panda](https://avatars.discourse-cdn.com/v4/letter/p/71c47a/32.png) [@Panda](https://discourse.nodered.org/u/Panda)
#### Post date: [21 September 2024 13:32 UTC](https://discourse.nodered.org/t/form-output-and-placeholder-template-ui/91160/4 "2024-09-21T13:32:51Z")

</div>

Thanks man, I just start using the template node today, I think there is many to learn for me

---

<div class="post-metadata">

### Author: ![Panda](https://avatars.discourse-cdn.com/v4/letter/p/71c47a/32.png) [@Panda](https://discourse.nodered.org/u/Panda)
#### Post date: [21 September 2024 14:12 UTC](https://discourse.nodered.org/t/form-output-and-placeholder-template-ui/91160/5 "2024-09-21T14:12:49Z")

</div>

Ok, next step but sorry for my dump question. But how can I replace the "placeholder"  
`<input type="number" v-model="abschlag" placeholder="Abschlag in €" />`  
by msg.payload.abschlag.

ChatGPT cant help me.  
I tried:

` {{msg.payload.abschlag}}`

and

```auto
    export default {
        data() {
            return {
                abschlag: '',
                phabschlag: '', 
                arbeitspreis: '',
                grundpreis: '',
                zaehler: ''
            }
        },
        mounted() {
            // Abruf von flow.get('zaehler') bei der Initialisierung und sicherstellen, dass es eine Zahl ist
            this.phabschlag = msg.payload; // Standardwert, falls flow.get kein Ergebnis liefert
        }, 

```

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [21 September 2024 15:19 UTC](https://discourse.nodered.org/t/form-output-and-placeholder-template-ui/91160/6 "2024-09-21T15:19:45Z")

</div>

> [@Panda](#):
>
> But how can I replace the "placeholder"

As dashboard is built on Vue, you can use attribute binding - it's in the docs too: [Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#working-with-variables)

```auto
<input type="number" v-model="abschlag" :placeholder="msg.whatever" />

```

---

<div class="post-metadata">

### Author: ![Panda](https://avatars.discourse-cdn.com/v4/letter/p/71c47a/32.png) [@Panda](https://discourse.nodered.org/u/Panda)
#### Post date: [21 September 2024 15:30 UTC](https://discourse.nodered.org/t/form-output-and-placeholder-template-ui/91160/7 "2024-09-21T15:30:06Z")

</div>

I don't get it, I tried this allready and it didn't work. Now it's working, thanks again

---

<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: [5 October 2024 15:30 UTC](https://discourse.nodered.org/t/form-output-and-placeholder-template-ui/91160/8 "2024-10-05T15:30:37Z")

</div>

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