Buttons in Header?

Dashboard
1

How to add a few buttons at the header so that they are visible/available in all the pages for action.

2

Unless I'm mistaken, each dashboard page is independent and has its own header. There is an option to define global (all-page) CSS classes, but as far as I know this is not possible for widgets, which need to be associated to a single selected page.
One way to bypass this could be using template nodes which import common shared elements.

3

This can be achieved within a UI Template node using Teleport: Template ui-template | Node-RED Dashboard 2.0

I'd like us to introduce the option for every widget to have a "location" field (or something similar) which can be group/slot, where the slot option allows you to place that widget in the header, sidebar or other useful locations

1 Like
4

Thanks for the direction.
it is appearing on ALL pages as expected when i make ui-template (Widget UI Scoped).
But for some reason, clicking the button does not give any result in the attached debug node.

EDIT: this is in hte template node. (copied from dashboard.flowfuse)

<template>
    <Teleport v-if="mounted" to="#app-bar-title">
        <v-btn>Button 1</v-btn>
        <v-btn>Button 2</v-btn>
    </Teleport>
</template>
<script>
    export default {
        data() {
            return {
                mounted: false
            }
        },
        mounted() {
            this.mounted = true
        }
    }
</script>

buttoninheader

5

The v-btns in your template have no click handlers. They are doing exactly what you have programmed them to do (nothing).

Here is an example of what you could do...

        <v-btn @click="send({payload:'button 1'})">Button 1</v-btn>
        <v-btn @click="send({payload:'button 2'})">Button 2</v-btn>
2 Likes
6

Thanks a lot.

With this 'button in headers', I can clear up so much real estate in my dashboard.

1 Like