Changing a Group Name Dynamically

Dashboard
1

In dashboard 1 I used to use a template node containing some 'magic' code from this forum that allowed me to dynamically change the name of a group by passing msg.payload to this script:

<script>
(function($scope) {
$scope.oldGroupName = 'THP-X'; // initial group placeholder name

$scope.$watch('msg', function() {
    if ($scope.msg){
        $("p.nr-dashboard-cardtitle").each(function(){
            if($(this).text().trim() == $scope.oldGroupName.trim()){
                p = $(this);
                p.text($scope.msg.payload);
                 $scope.oldGroupName = $scope.msg.payload
            }
        })
    }
 });
})(scope);
</script>

This doesn't work in dashboard-2. Is there a piece of code available that does the same for dashboard-2? Or perhaps another way of doing it?

Gary

2

Do not show the group name.
Add a text widget with blank label at the top of the group.

2 Likes
3

Works perfectly, funny how the best solutions are often the simplest!

4

You could always do it the complicated way. This goes in a ui-template node with either page or group scope. :grin:

<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {
                groupTitle: 'Group Title'               // Default Group Title for first search (whatever you
                                                        // called the group when setting it up)

            }
        },

        methods: {
            // Update the Group Title and Save
            updateHeader: function (newGroupName) {
                const header = Array.from(document.getElementsByClassName("v-card-title"))
                    .find(el => el.textContent === this.groupTitle)

                this.groupTitle = newGroupName
                header.textContent = this.groupTitle

            }

        },

        mounted() {
            this.$socket.on('msg-input:' + this.id, (msg) => {
                this.updateHeader(msg.payload)
            })
        },

        unmounted() {
            // code here when the component is removed from the Dashboard
            // i.e. when the user navigates away from the page
        }
    }
</script>