UI Scoped widget position

Dashboard
1

Hi!

I want to control where a UI-scoped widget is positioned.

I'm using a template node with a simple Vue component. The idea is to show the current time at the top of the dashboard and across all pages.

I assumed that using the node as UI-scoped would make it appear on all tabs, but there's an issue. The widget appears, but it’s in the wrong position (at the bottom). I'd like to fix it at the top.

Is this possible? How can I do it?

Thanks!

I attach the node over here:

[
    {
        "id": "54ed42912c48e6bb",
        "type": "ui-template",
        "z": "60086c689e27a112",
        "group": "",
        "page": "",
        "ui": "99b0f7213609f95f",
        "name": "Time in DashTabs",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n    <v-app>\n        <v-container>\n            <v-system-bar>\n                <span class=\"ms-2\">{{ currentTime }}</span>\n            </v-system-bar>\n        </v-container>\n    </v-app>\n</template>\n\n<script>\n    export default {\n    data() {\n        return {\n            currentTime: this.getCurrentTime(),\n        };\n    },\n    methods: {\n        getCurrentTime() {\n            const now = new Date();\n            return now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n        },\n    },\n    mounted() {\n        this.timer = setInterval(() => {\n            this.currentTime = this.getCurrentTime();\n        }, 500);\n    },\n    beforeDestroy() {\n        clearInterval(this.timer); // Cleans up timer on component destruction\n    },\n};\n</script>\n\n<style>\n    .v-system-bar {\n        position: fixed;\n        top: 0;\n        width: 100%;\n        z-index: 10;\n        background-color: #bababa;\n    }\n</style>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "widget:ui",
        "className": "",
        "x": 130,
        "y": 64,
        "wires": [
            []
        ],
        "icon": "node-red/timer.svg"
    },
    {
        "id": "99b0f7213609f95f",
        "type": "ui-base",
        "name": "MyDashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": true,
        "showPageTitle": false,
        "navigationStyle": "icon",
        "titleBarStyle": "hidden",
        "showReconnectNotification": false,
        "notificationDisplayTime": "5",
        "showDisconnectNotification": true
    }
]
2

You can use Teleports - that gives an option to show it in the app-bar.

You're correct on UI Scoped, but by default it just appends that to the end of any widgets/groups already on the page.

3

Understood @joepavitt , thanks! I'll try Teleport