Ui-list of switches replacement

Dashboard
1

I have a ui-list with switches and need to replace that with dashboard v2.
How can I replace that?

Bildschirmfoto 2025-12-16 um 17.01.42
Bildschirmfoto 2025-12-16 um 17.01.42614×802 49.5 KB

I read this: https://discourse.nodered.org/t/ui-list-for-dashboard-2
It seems like a dynamic list of switches doesn't yet exist?

2

I am not aware of anyone writing a ui-list contrib node. You can however quite easily create this using a ui-template.

If I get time later in the week I'll show you how - feel free to nudge me if I've not replied by Friday afternoon.

If anyone else in the meantime wants to provide a solution, please jump in.

3

Thanks. I created a template node that takes two additional fields to annotate the switch label and description.

<template>
  <v-list class="switch-list" density="compact">
    <v-list-item v-for="item in items" :key="item.id" density="compact" class="switch-item">
      <v-list-item-title class="label">
        {{ item.label }}
      </v-list-item-title>

      <v-list-item-subtitle class="description">
        {{ item.description }}
      </v-list-item-subtitle>

      <template #append>
        <v-switch v-model="item.value" density="compact" hide-details :color="item.value ? 'primary' : undefined"
          @update:modelValue="onToggle(item)" />
      </template>
    </v-list-item>
  </v-list>
</template>

<script>
export default {
  props: ["msg"],

  data() {
    return {
      items: []
    }
  },

  watch: {
    msg: {
      immediate: true,
      handler(newMsg) {
        if (Array.isArray(newMsg?.payload)) {
          // Deep copy, damit Vue reaktiv bleibt
          this.items = JSON.parse(JSON.stringify(newMsg.payload))
        }
      }
    }
  },

  methods: {
    onToggle(item) {
      this.$socket.emit("msg", {
        payload: {
          id: item.id,
          value: item.value
        },
        label: item.label,
        description: item.description
      })
    }
  }
}
</script>

<style scoped>
  .switch-list {
    padding: 0;
  }

  .switch-item {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .label {
    font-weight: 600;
  }

  .description {
    opacity: 0.7;
  }
</style>