diff --git a/bundles/org.openhab.ui/web/src/assets/sitemap-lexer.nearley b/bundles/org.openhab.ui/web/src/assets/sitemap-lexer.nearley
index 387e7e8aa2..0c62f0c46f 100644
--- a/bundles/org.openhab.ui/web/src/assets/sitemap-lexer.nearley
+++ b/bundles/org.openhab.ui/web/src/assets/sitemap-lexer.nearley
@@ -22,7 +22,7 @@
     widgetclickattr:  'click=',
     widgetreleaseattr:'release=',
     widgetperiodattr: 'period=',
-    nlwidget:         ['Switch ', 'Selection ', 'Slider ', 'Setpoint ', 'Input ', 'Video ', 'Chart ', 'Webview ', 'Colorpicker ', 'Mapview ', 'Button ', 'Default '],
+    nlwidget:         ['Switch ', 'Selection ', 'Slider ', 'Setpoint ', 'Input ', 'Video ', 'Chart ', 'Webview ', 'Colorpicker ', 'Colortemperaturepicker', 'Mapview ', 'Button ', 'Default '],
     lwidget:          ['Text ', 'Group ', 'Image ', 'Frame ', 'Buttongrid '],
     lparen:           '(',
     rparen:           ')',
@@ -49,7 +49,7 @@
     number:           /[+-]?[0-9]+(?:\.[0-9]*)?/,
     string:           { match: /"(?:\\["\\]|[^\n"\\])*"/, value: x => x.slice(1, -1) }
   })
-  const requiresItem = ['Group', 'Chart', 'Switch', 'Mapview', 'Slider', 'Selection', 'Setpoint', 'Input ', 'Colorpicker', 'Button', 'Default']
+  const requiresItem = ['Group', 'Chart', 'Switch', 'Mapview', 'Slider', 'Selection', 'Setpoint', 'Input ', 'Colorpicker', 'Colortemperaturepicker', 'Button', 'Default']
 
   function getSitemap(d) {
     return {
diff --git a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/sitemap-mixin.js b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/sitemap-mixin.js
new file mode 100644
index 0000000000..97ee7306f8
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/sitemap-mixin.js
@@ -0,0 +1,99 @@
+export default {
+  data () {
+    return {
+      items: [],
+      itemsReady: false
+    }
+  },
+  created () {
+    this.WIDGET_TYPES = [
+      { type: 'Sitemap', icon: 'slider_horizontal_below_rectangle' },
+      { type: 'Text', icon: 'textformat' },
+      { type: 'Switch', icon: 'power' },
+      { type: 'Selection', icon: 'text_justify' },
+      { type: 'Slider', icon: 'slider_horizontal_3' },
+      { type: 'Frame', icon: 'macwindow' },
+      { type: 'Setpoint', icon: 'plus_slash_minus' },
+      { type: 'Input', icon: 'text_cursor' },
+      { type: 'Buttongrid', label: 'Button Grid', icon: 'square_grid_3x2' },
+      { type: 'Button', icon: 'square_fill_line_vertical_square' },
+      { type: 'Default', icon: 'rectangle' },
+      { type: 'Group', icon: 'square_stack_3d_down_right' },
+      { type: 'Chart', icon: 'chart_bar_square' },
+      { type: 'Webview', label: 'Web View', icon: 'globe' },
+      { type: 'Colorpicker', label: 'Color Picker', icon: 'drop' },
+      { type: 'Colortemperaturepicker', label: 'Color Temperature Picker', icon: 'thermometer' },
+      { type: 'Mapview', label: 'Map View', icon: 'map' },
+      { type: 'Image', icon: 'photo' },
+      { type: 'Video', icon: 'videocam' }
+    ]
+    this.LINKABLE_WIDGET_TYPES = ['Sitemap', 'Text', 'Frame', 'Group', 'Image', 'Buttongrid']
+    this.WIDGET_TYPES_REQUIRING_ITEM = ['Group', 'Chart', 'Switch', 'Mapview', 'Slider', 'Selection', 'Setpoint', 'Input', 'Colorpicker', 'Colortemperaturepicker', 'Default']
+    this.WIDGET_TYPES_SHOWING_VALUE = ['Text', 'Switch', 'Selection', 'Slider', 'Setpoint', 'Input', 'Default', 'Group']
+
+    this.REGEX_PERIOD = /^((P(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?|\d*[YMWDh])-)?-?(P(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?|\d*[YMWDh])$/
+    this.REGEX_DECIMAL_PATTERN = /^(?:'[0#.,;E]?'|[^0#.,;E'])*((#[,#]*|0)[,0]*)(\.(0+#*|#+))?(?:E0+)?(?:';'|[^;])*(?:;(?:'[0#.,;E]?'|[^0#.,;E'])*((#[,#]*|0)[,0]*)(\.(0+#*|#+))?(?:E0+)?.*)?$/
+    this.REGEX_MAPPING = /^\s*("[^\n"]*"|\w+)\s*=\s*("[^\n"]*"|\w+)\s*(=\s*("[^\n"]*"|\w+))?$/u
+    this.REGEX_MAPPING_SWITCH = /^\s*("[^\n"]*"|\w+)\s*(:\s*("[^\n"]*"|\w+)\s*)?=\s*("[^\n"]*"|\w+)\s*(=\s*("[^\n"]*"|\w+))?$/u
+    this.REGEX_RULE_VISIBILITY = /^(\s*((\w+\s*)?(==|>=|<=|!=|>|<)\s*)?("[^\n"]*"|\w+)\s*AND)*\s*((\w+\s*)?(==|>=|<=|!=|>|<)\s*)?("[^\n"]*"|\w+)\s*$/u
+    this.REGEX_RULE = /^(((\s*((\w+\s*)?(==|>=|<=|!=|>|<)\s*)?("[^\n"]*"|\w+)\s*AND)*\s*((\w+\s*)?(==|>=|<=|!=|>|<)\s*)?("[^\n"]*"|\w+)\s*)?\s*=)?\s*("#?(\w|:|-)+"|#?(\w|:|-)+)$/u
+
+    this.ADDITIONAL_CONTROLS = {
+      Image: ['url', 'refresh'],
+      Video: ['url', 'encoding'],
+      Chart: ['service', 'period', 'refresh', 'legend', 'forceAsItem', 'yAxisDecimalPattern'],
+      Webview: ['url', 'height'],
+      Mapview: ['height'],
+      Slider: ['switchEnabled', 'releaseOnly', 'minValue', 'maxValue', 'step'],
+      Setpoint: ['minValue', 'maxValue', 'step'],
+      Colortemperaturepicker: ['minValue', 'maxValue'],
+      Input: ['inputHint'],
+      Button: ['row', 'column', 'stateless', 'cmd', 'releaseCmd'],
+      Default: ['height']
+    }
+    this.ENCODING_DEFS = [
+      { key: 'mjpeg', value: 'MJPEG Video' },
+      { key: 'HLS', value: 'HTTP Live Streaming' }
+    ]
+    this.INPUT_HINT_DEFS = [
+      { key: 'text', value: 'Text' },
+      { key: 'number', value: 'Number' },
+      { key: 'date', value: 'Date' },
+      { key: 'time', value: 'Time' },
+      { key: 'datetime', value: 'Date and Time' }
+    ]
+
+    if (!this.itemsList) {
+      this.$oh.api.get('/rest/items?staticDataOnly=true').then((items) => {
+        this.items = items
+        this.itemsReady = true
+      })
+    } else {
+      this.items = this.itemsList ?? []
+      this.itemsReady = true
+    }
+  },
+  methods: {
+    widgetTypeDef (component) {
+      const componentType = component ?? this.widget.component
+      return this.WIDGET_TYPES.find(w => w.type === componentType)
+    },
+    widgetTypeIcon (component) {
+      return this.widgetTypeDef(component).icon
+    },
+    widgetTypeLabel (component) {
+      return this.widgetTypeDef(component).label ?? this.widgetTypeDef(component).type
+    },
+    widgetConfigLabel () {
+      return this.widget.config.label ?? ((this.widget.component === 'Button') ? this.widget.config.cmd : '')
+    },
+    widgetItemLabel (includeItemName) {
+      const item = this.items.find(i => i.name === this.widget.config.item)
+      return (item?.label || this.widget.config.item) + (includeItemName && item ? ` (${item.name})` : '')
+    },
+    widgetConfigDescription (includeItemName) {
+      const buttonPosition = this.widget.component === 'Button' ? ` (${this.widget.config?.row ?? '-'},${this.widget.config?.column ?? '-'})` : ''
+      return (this.widget.config?.item ? ': ' + this.widgetItemLabel(includeItemName) : '') + buttonPosition
+    }
+  }
+}
diff --git a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/treeview-item.vue b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/treeview-item.vue
index 999cc185cb..7ed2e7312e 100644
--- a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/treeview-item.vue
+++ b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/treeview-item.vue
@@ -1,13 +1,15 @@
 <template>
-  <f7-treeview-item selectable :label="widget.config.label ? widget.config.label : ((widget.component === 'Button') ? widget.config.cmd : '')"
-                    :icon-ios="icon('ios')" :icon-aurora="icon('aurora')" :icon-md="icon('md')"
+  <f7-treeview-item v-if="itemsReady" selectable :label="widgetConfigLabel()"
+                    :icon-f7="widgetTypeIcon()"
                     :textColor="iconColor" :color="'blue'"
                     :selected="selected && selected === widget"
                     :opened="!widget.closed"
                     @click="select">
-    <sitemap-treeview-item v-for="(childwidget, idx) in children"
+    <sitemap-treeview-item class="sitemap-treeview-item" v-for="(childwidget, idx) in children"
                            :key="idx"
+                           :includeItemName="includeItemName"
                            :widget="childwidget" :parent-widget="widget"
+                           :itemsList="items"
                            @selected="(event) => $emit('selected', event)"
                            :selected="selected" />
     <div slot="label" class="subtitle">
@@ -16,53 +18,25 @@
   </f7-treeview-item>
 </template>
 
+<style lang="stylus">
+.sitemap-tree
+  .treeview
+    .treeview-item-content
+      width calc(100% - (var(--f7-treeview-toggle-size) + 5px))
+    .subtitle
+      overflow hidden
+      text-overflow ellipsis
+</style>
+
 <script>
+import SitemapMixin from '@/components/pagedesigner/sitemap/sitemap-mixin'
+
 export default {
-  props: ['widget', 'parentWidget', 'selected'],
+  mixins: [SitemapMixin],
+  props: ['includeItemName', 'widget', 'parentWidget', 'itemsList', 'selected'],
   methods: {
-    icon (theme) {
-      switch (this.widget.component) {
-        case 'Switch':
-          return 'f7:power'
-        case 'Selection':
-          return 'f7:text_justify'
-        case 'Slider':
-          return 'f7:slider_horizontal_3'
-        case 'Setpoint':
-          return 'f7:plus_slash_minus'
-        case 'Input':
-          return 'f7:text_cursor'
-        case 'Video':
-          return 'f7:videocam'
-        case 'Chart':
-          return 'f7:chart_bar_square'
-        case 'Webview':
-          return 'f7:globe'
-        case 'Colorpicker':
-          return 'f7:drop'
-        case 'Mapview':
-          return 'f7:map'
-        case 'Buttongrid':
-          return 'f7:square_grid_3x2'
-        case 'Button':
-          return 'f7:square_fill_line_vertical_square'
-        case 'Default':
-          return 'f7:rectangle'
-        case 'Text':
-          return 'f7:textformat'
-        case 'Group':
-          return 'f7:square_stack_3d_down_right'
-        case 'Image':
-          return 'f7:photo'
-        case 'Frame':
-          return 'f7:macwindow'
-        default:
-          return 'f7:slider_horizontal_below_rectangle'
-      }
-    },
     subtitle () {
-      const buttonPosition = this.widget.component === 'Button' ? ' (' + (this.widget.config?.row ?? '-') + ',' + (this.widget.config?.column ?? '-') + ')' : ''
-      return this.widget.component + ((this.widget.config && this.widget.config.item) ? ': ' + this.widget.config.item : '') + buttonPosition
+      return this.widgetTypeLabel() + this.widgetConfigDescription(this.includeItemName)
     },
     select (event) {
       let self = this
diff --git a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/widget-details.vue b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/widget-details.vue
index 649925b1a7..dfa6d3fbed 100644
--- a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/widget-details.vue
+++ b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/widget-details.vue
@@ -97,8 +97,10 @@
 import { Categories } from '@/assets/categories.js'
 import ItemPicker from '@/components/config/controls/item-picker.vue'
 import PersistencePicker from '@/components/config/controls/persistence-picker.vue'
+import SitemapMixin from '@/components/pagedesigner/sitemap/sitemap-mixin'
 
 export default {
+  mixins: [SitemapMixin],
   components: {
     ItemPicker,
     PersistencePicker
@@ -110,31 +112,6 @@ export default {
       iconAutocomplete: null
     }
   },
-  created () {
-    this.ADDITIONAL_CONTROLS = {
-      Image: ['url', 'refresh'],
-      Video: ['url', 'encoding'],
-      Chart: ['service', 'period', 'refresh', 'legend', 'forceAsItem', 'yAxisDecimalPattern'],
-      Webview: ['url', 'height'],
-      Mapview: ['height'],
-      Slider: ['switchEnabled', 'releaseOnly', 'minValue', 'maxValue', 'step'],
-      Setpoint: ['minValue', 'maxValue', 'step'],
-      Input: ['inputHint'],
-      Button: ['row', 'column', 'stateless', 'cmd', 'releaseCmd'],
-      Default: ['height']
-    }
-    this.ENCODING_DEFS = [
-      { key: 'mjpeg', value: 'MJPEG Video' },
-      { key: 'HLS', value: 'HTTP Live Streaming' }
-    ]
-    this.INPUT_HINT_DEFS = [
-      { key: 'text', value: 'Text' },
-      { key: 'number', value: 'Number' },
-      { key: 'date', value: 'Date' },
-      { key: 'time', value: 'Time' },
-      { key: 'datetime', value: 'Date and Time' }
-    ]
-  },
   methods: {
     initializeAutocomplete (inputElement) {
       this.iconAutocomplete = this.$f7.autocomplete.create({
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/__tests__/sitemap-edit_jest.spec.js b/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/__tests__/sitemap-edit_jest.spec.js
index 6e55b8fe97..8a96e9d71b 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/__tests__/sitemap-edit_jest.spec.js
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/__tests__/sitemap-edit_jest.spec.js
@@ -1,4 +1,3 @@
-import PagesList from '../../pages-list.vue'
 import SitemapEdit from '../sitemap-edit.vue'
 import { shallowMount, createLocalVue } from '@vue/test-utils'
 import Framework7 from 'framework7'
@@ -24,7 +23,8 @@ describe('SitemapEdit', () => {
               open: () => { }
             }
           }
-        }
+        },
+        data: { sitemap: {} }
       }
     }
   })
@@ -34,7 +34,8 @@ describe('SitemapEdit', () => {
       localVue,
       propsData: {
         createMode: true,
-        uid: 'test'
+        uid: 'test',
+        itemsList: []
       }
     })
   })
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/sitemap-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/sitemap-edit.vue
index df430c4f06..591d4e5ec1 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/sitemap-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/sitemap-edit.vue
@@ -20,6 +20,10 @@
       <f7-link :disabled="selectedWidget != null" class="left" @click="selectedWidget = null">
         Clear
       </f7-link>
+      <div class="padding-right text-align-right">
+        <f7-checkbox style="margin-left: 5px" :checked="includeItemName" @change="toggleItemName" />
+        <label @click="toggleItemName" class="advanced-label">Show item name</label>
+      </div>
       <f7-link v-if="selectedWidget" class="right details-link padding-right" ref="detailsLink" @click="detailsOpened = true" icon-f7="chevron_up" />
     </f7-toolbar>
     <f7-tabs class="sitemap-editor-tabs">
@@ -34,7 +38,7 @@
             <f7-col>
               <f7-block strong class="sitemap-tree" no-gap @click.native="clearSelection">
                 <f7-treeview>
-                  <sitemap-treeview-item :widget="sitemap" @selected="selectWidget" :selected="selectedWidget" />
+                  <sitemap-treeview-item :widget="sitemap" :includeItemName="includeItemName" :itemsList="items" @selected="selectWidget" :selected="selectedWidget" />
                 </f7-treeview>
               </f7-block>
             </f7-col>
@@ -110,9 +114,9 @@
 
         <f7-actions ref="widgetTypeSelection" id="widget-type-selection" :grid="true">
           <f7-actions-group>
-            <f7-actions-button v-for="widgetType in addableWidgetTypes" :key="widgetType.type" @click="addWidget(widgetType.type)">
-              <f7-icon :f7="widgetType.icon" slot="media" />
-              <span>{{ widgetType.type }}</span>
+            <f7-actions-button class="widget-button" v-for="widgetType in addableWidgetTypes" :key="widgetType.type" @click="addWidget(widgetType.type)">
+              <f7-icon :f7="widgetTypeIcon(widgetType.type)" slot="media" />
+              <span>{{ widgetTypeLabel(widgetType.type) }}</span>
             </f7-actions-button>
           </f7-actions-group>
         </f7-actions>
@@ -226,6 +230,19 @@
   z-index 10900
 .md .sitemap-details-sheet .toolbar .link
   width 35%
+.widget-button
+  padding-bottom 8px !important
+  .actions-button-text
+    height 2lh
+  .actions-button-text span
+    display -webkit-box
+    -webkit-box-orient vertical
+    overflow hidden
+    text-overflow ellipsis
+    -webkit-line-clamp 2
+    white-space normal
+    max-height 2lh
+    line-height 1lh
 
 @media (min-width: 768px)
   .sitemap-tree-wrapper
@@ -265,18 +282,21 @@
 import SitemapCode from '@/components/pagedesigner/sitemap/sitemap-code.vue'
 import WidgetDetails from '@/components/pagedesigner/sitemap/widget-details.vue'
 import AttributeDetails from '@/components/pagedesigner/sitemap/attribute-details.vue'
+import SitemapMixin from '@/components/pagedesigner/sitemap/sitemap-mixin'
 import DirtyMixin from '../../dirty-mixin'
 
 export default {
-  mixins: [DirtyMixin],
+  mixins: [DirtyMixin, SitemapMixin],
   components: {
     SitemapCode,
     WidgetDetails,
     AttributeDetails
   },
-  props: ['createMode', 'uid'],
+  props: ['createMode', 'uid', 'itemsList'],
   data () {
+    if (!this.$f7.data.sitemap) this.$f7.data.sitemap = {}
     return {
+      includeItemName: this.$f7.data.sitemap.includeItemName || false,
       ready: false,
       loading: false,
       sitemap: {
@@ -297,36 +317,6 @@ export default {
       eventSource: null
     }
   },
-  created () {
-    this.WIDGET_TYPES = [
-      { type: 'Text', icon: 'textformat' },
-      { type: 'Switch', icon: 'power' },
-      { type: 'Selection', icon: 'text_justify' },
-      { type: 'Slider', icon: 'slider_horizontal_3' },
-      { type: 'Frame', icon: 'macwindow' },
-      { type: 'Setpoint', icon: 'plus_slash_minus' },
-      { type: 'Input', icon: 'text_cursor' },
-      { type: 'Buttongrid', icon: 'square_grid_3x2' },
-      { type: 'Button', icon: 'square_fill_line_vertical_square' },
-      { type: 'Default', icon: 'rectangle' },
-      { type: 'Group', icon: 'square_stack_3d_down_right' },
-      { type: 'Chart', icon: 'chart_bar_square' },
-      { type: 'Webview', icon: 'globe' },
-      { type: 'Colorpicker', icon: 'drop' },
-      { type: 'Mapview', icon: 'map' },
-      { type: 'Image', icon: 'photo' },
-      { type: 'Video', icon: 'videocam' }
-    ]
-    this.LINKABLE_WIDGET_TYPES = ['Sitemap', 'Text', 'Frame', 'Group', 'Image', 'Buttongrid']
-    this.WIDGET_TYPES_REQUIRING_ITEM = ['Group', 'Chart', 'Switch', 'Mapview', 'Slider', 'Selection', 'Setpoint', 'Input', 'Colorpicker', 'Default']
-    this.WIDGET_TYPES_SHOWING_VALUE = ['Text', 'Switch', 'Selection', 'Slider', 'Setpoint', 'Input', 'Default', 'Group']
-    this.REGEX_PERIOD = /^((P(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?|\d*[YMWDh])-)?-?(P(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?|\d*[YMWDh])$/
-    this.REGEX_DECIMAL_PATTERN = /^(?:'[0#.,;E]?'|[^0#.,;E'])*((#[,#]*|0)[,0]*)(\.(0+#*|#+))?(?:E0+)?(?:';'|[^;])*(?:;(?:'[0#.,;E]?'|[^0#.,;E'])*((#[,#]*|0)[,0]*)(\.(0+#*|#+))?(?:E0+)?.*)?$/
-    this.REGEX_MAPPING = /^\s*("[^\n"]*"|\w+)\s*=\s*("[^\n"]*"|\w+)\s*(=\s*("[^\n"]*"|\w+))?$/u
-    this.REGEX_MAPPING_SWITCH = /^\s*("[^\n"]*"|\w+)\s*(:\s*("[^\n"]*"|\w+)\s*)?=\s*("[^\n"]*"|\w+)\s*(=\s*("[^\n"]*"|\w+))?$/u
-    this.REGEX_RULE_VISIBILITY = /^(\s*((\w+\s*)?(==|>=|<=|!=|>|<)\s*)?("[^\n"]*"|\w+)\s*AND)*\s*((\w+\s*)?(==|>=|<=|!=|>|<)\s*)?("[^\n"]*"|\w+)\s*$/u
-    this.REGEX_RULE = /^(((\s*((\w+\s*)?(==|>=|<=|!=|>|<)\s*)?("[^\n"]*"|\w+)\s*AND)*\s*((\w+\s*)?(==|>=|<=|!=|>|<)\s*)?("[^\n"]*"|\w+)\s*)?\s*=)?\s*("#?(\w|:|-)+"|#?(\w|:|-)+)$/u
-  },
   computed: {
     hasChildren () {
       if (!this.selectedWidget) return false
@@ -346,9 +336,10 @@ export default {
     },
     addableWidgetTypes () {
       if (!this.selectedWidget) return
-      if (this.selectedWidget.component === 'Buttongrid') return this.WIDGET_TYPES.filter(w => w.type === 'Button')
+      let types = this.WIDGET_TYPES.filter(w => w.type !== 'Sitemap')
       // Button only allowed inside Buttongrid
-      let types = this.WIDGET_TYPES.filter(w => w.type !== 'Button')
+      if (this.selectedWidget.component === 'Buttongrid') return types.filter(w => w.type === 'Button')
+      types = types.filter(w => w.type !== 'Button')
       // No frames in frame
       if (this.selectedWidget.component === 'Frame') return types.filter(w => w.type !== 'Frame')
       // Linkable widget types only contain frames or none at all
@@ -398,6 +389,8 @@ export default {
       if (this.loading) return
       this.loading = true
 
+      if (this.ready && this.dirty) this.save(true, true)
+
       if (this.createMode) {
         this.loading = false
         this.ready = true
@@ -412,6 +405,11 @@ export default {
         })
       }
     },
+    toggleItemName () {
+      this.includeItemName = !this.includeItemName
+      this.$f7.data.sitemap.includeItemName = this.includeItemName
+      this.load()
+    },
     save (stay, force) {
       this.cleanConfig(this.sitemap)
       if (!this.sitemap.uid) {
@@ -521,7 +519,7 @@ export default {
             validationWarnings.push(widget.component + ' widget ' + label + ', invalid inputHint configured: ' + widget.config?.inputHint)
           }
         })
-        widgetList.filter(widget => widget.component === 'Slider' || widget.component === 'Setpoint').forEach(widget => {
+        widgetList.filter(widget => ['Slider', 'Setpoint', 'Colortemperaturepicker'].includes(widget.component)).forEach(widget => {
           let label = scope.widgetErrorLabel(widget.config)
           if (widget.config?.step <= 0) {
             validationWarnings.push(widget.component + ' widget ' + label + ', step size cannot be 0 or negative: ' + widget.config.step)