Form output and placeholder template_ui

Dashboard
1

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

<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>
2

docs: UI Template Examples | Node-RED Dashboard 2.0

chrome_kYNOk6HbmH

<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>
1 Like
3

And if you want it to look native, the use the vuetify components

4

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

5

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

    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
        },
6

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

<input type="number" v-model="abschlag" :placeholder="msg.whatever" />
1 Like
7

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

8

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