OH3 How to hide scrollbar in custom widget?

buschif4 · November 27, 2020, 2:56pm

Hello together,

I’m currently building a time picker as popover. So far no problems and it is working. But i don’t know how to hide the scrollbars in the two f7-col components. Can someone help me?
I tried already -webkit-scrollbar but it was not working on my test.

uid: widget_6144747152
props:
  parameterGroups: []
  parameters: []
tags: []
component: f7-card
config:
  title: click me
  footer: =props.prop1
  content: =vars.timepickerTemp
slots:
  default:
    - component: oh-button
      config:
        action: variable
        actionVariable: timepickerTemp
        actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp : "--:--"'
        popoverOpen: .heatingTimePickerPopover
        style: 
          position: absolute
          top: 0px
          width: 100%
          height: 100%
      slots:
        default:
          - component: f7-popover
            config:
              class: heatingTimePickerPopover
              style:
                max-width: 400px
                min-width: 270px
            slots:
              default:
                - component: f7-block
                  config:
                    style:
                      --f7-button-text-color: var(--f7-text-color)
                      --f7-button-bg-color: var(--f7-card-bg-color)
                      --f7-theme-color-rgb: var(--f7-color-blue-rgb)
                  slots:
                    default:
                      - component: f7-card
                        config:
                          class: padding-top align-content-center
                          style:
                            top: -10px
                            height: 70px
                            z-index: 100
                            width: calc(100% - 20px)
                        slots:
                          default:
                            - component: oh-label-card
                              config:
                                label: '=(vars.timepickerTemp) ? vars.timepickerTemp : "--:--"'
                                outline: true
                      - component: f7-row
                        config:
                          class: margin
                        slots:
                          default:
                            - component: f7-col
                              config:
                                style:
                                  height: 250px
                                  overflow-y: auto
                              slots:
                                default:
                                  - component: oh-button
                                    config:
                                      text: "00"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp.split(":")[1]) ? "00:" + vars.timepickerTemp.split(":")[1]: "00:00"'
                                  - component: oh-button
                                    config:
                                      text: "01"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "01:" + vars.timepickerTemp.split(":")[1]: "01:00"'
                                  - component: oh-button
                                    config:
                                      text: "02"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "02:" + vars.timepickerTemp.split(":")[1]: "02:00"'
                                  - component: oh-button
                                    config:
                                      text: "03"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "03:" + vars.timepickerTemp.split(":")[1]: "03:00"'
                                  - component: oh-button
                                    config:
                                      text: "04"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "04:" + vars.timepickerTemp.split(":")[1]: "04:00"'
                                  - component: oh-button
                                    config:
                                      text: "05"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "05:" + vars.timepickerTemp.split(":")[1]: "05:00"'
                                  - component: oh-button
                                    config:
                                      text: "06"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "06:" + vars.timepickerTemp.split(":")[1]: "06:00"'
                                  - component: oh-button
                                    config:
                                      text: "07"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "07:" + vars.timepickerTemp.split(":")[1]: "07:00"'
                                  - component: oh-button
                                    config:
                                      text: "08"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "08:" + vars.timepickerTemp.split(":")[1]: "08:00"'
                                  - component: oh-button
                                    config:
                                      text: "09"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "09:" + vars.timepickerTemp.split(":")[1]: "09:00"'
                                  - component: oh-button
                                    config:
                                      text: "10"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "10:" + vars.timepickerTemp.split(":")[1]: "10:00"'
                                  - component: oh-button
                                    config:
                                      text: "11"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "11:" + vars.timepickerTemp.split(":")[1]: "11:00"'
                                  - component: oh-button
                                    config:
                                      text: "12"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "12:" + vars.timepickerTemp.split(":")[1]: "12:00"'
                                  - component: oh-button
                                    config:
                                      text: "13"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "13:" + vars.timepickerTemp.split(":")[1]: "13:00"'
                                  - component: oh-button
                                    config:
                                      text: "14"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "14:" + vars.timepickerTemp.split(":")[1]: "14:00"'
                                  - component: oh-button
                                    config:
                                      text: "15"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "15:" + vars.timepickerTemp.split(":")[1]: "15:00"'
                                  - component: oh-button
                                    config:
                                      text: "16"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "16:" + vars.timepickerTemp.split(":")[1]: "16:00"'
                                  - component: oh-button
                                    config:
                                      text: "17"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "17:" + vars.timepickerTemp.split(":")[1]: "17:00"'
                                  - component: oh-button
                                    config:
                                      text: "18"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "18:" + vars.timepickerTemp.split(":")[1]: "18:00"'
                                  - component: oh-button
                                    config:
                                      text: "19"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "19:" + vars.timepickerTemp.split(":")[1]: "19:00"'
                                  - component: oh-button
                                    config:
                                      text: "20"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "20:" + vars.timepickerTemp.split(":")[1]: "20:00"'
                                  - component: oh-button
                                    config:
                                      text: "21"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "21:" + vars.timepickerTemp.split(":")[1]: "21:00"'
                                  - component: oh-button
                                    config:
                                      text: "22"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "22:" + vars.timepickerTemp.split(":")[1]: "22:00"'
                                  - component: oh-button
                                    config:
                                      text: "23"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "23:" + vars.timepickerTemp.split(":")[1]: "23:00"'
                            - component: f7-col
                              config:
                                style:
                                  height: 250px
                                  overflow-y: auto
                              slots:
                                default:
                                  - component: oh-button
                                    config:
                                      text: "00"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":00" : "00:00"'
                                  - component: oh-button
                                    config:
                                      text: "05"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":05" : "00:05"'
                                  - component: oh-button
                                    config:
                                      text: "10"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":10" : "00:10"'
                                  - component: oh-button
                                    config:
                                      text: "15"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":15" : "00:15"'
                                  - component: oh-button
                                    config:
                                      text: "20"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":20" : "00:20"'
                                  - component: oh-button
                                    config:
                                      text: "25"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":25" : "00:25"'
                                  - component: oh-button
                                    config:
                                      text: "30"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":30" : "00:30"'
                                  - component: oh-button
                                    config:
                                      text: "35"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":35" : "00:35"'
                                  - component: oh-button
                                    config:
                                      text: "40"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":40" : "00:40"'
                                  - component: oh-button
                                    config:
                                      text: "45"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":45" : "00:45"'
                                  - component: oh-button
                                    config:
                                      text: "50"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":50" : "00:50"'
                                  - component: oh-button
                                    config:
                                      text: "55"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":55" : "00:55"'

RGroll · November 27, 2020, 6:09pm

I’m not sure if hiding the toolbar on a column would work or if pseudo-classes work at all. You can use ‘oh-input’ with it’s time picker as an alternative, if this fits your need.

@ysc
Is there a way to show the time-picker (used in oh-input) as a standalone inline element (f7-picker seems to allow this, but osn’t available as a vue-component as far as I can tell?!)

So it would be easier to realize things like this with opening the time-selection in a popup etc.

buschif4 · November 27, 2020, 6:19pm

Hi @RGroll

thanks for the answer. The problem is that oh-input type time is not properly working on an iphone. The time picker is not opening.

So i decided to use a self build popover. If there is no other possibility i will set a size of each label and the colum, maybe i can hide the scrollbar with this approach. But this is not really an elegant solution

ysc · November 27, 2020, 7:22pm

I don’t think so, so no solution for this.
Maybe I’ll do something globally about those scrollbars some day.

Not that I know of. Making it available is possible but it would be quite painful.

I’ll probably add some classes to hide scrollbars at some point because some of them are ugly and could be made better, and then you could use this class in your widget. Nice widget by the way , always nice to see unexpected use cases, and working well to boot!

buschif4 · November 27, 2020, 8:53pm

@ysc thanks for the information. This is no standalone widget. It is embedded in my heating control. I defined this once and can call it on every item inside the widget. Thats quite cool

Please let me know when you have the custom classes ready. That would be really great many thanks for this.

When you have a look on the scroll classes. Maybe there is a possibility to add some automatic infinitive scroll feature for long messages? So we can display also long texts in a small label. E.g. for system messages or music titles that are longer than the label card

RGroll · November 29, 2020, 3:02pm

Hey @buschif4

as I’m working with the swiper component anyway right now, I tried to implement your scenario:

The f7-swiper component is set to cssMode, which allows to use the mousewheel for smooth scrolling - you could remove this parameter to activate grab and swipe functionality but it will mess up the smooth scrolling a bit. You could find more informations regarding the usable swiper parameters here

Even if it generally works on mobile, there might be some optimizations needed to make it look similar to desktop. But as you’re firm with css, I’m sre you’ll get that small things sorted out.

Hope it helps.

And as @ysc already said - very nice widget!

uid: verticalSliderTest
tags: []
component: f7-card
config:
  title: click me
  footer: =props.prop1
  content: =vars.timepickerTemp
slots:
  default:
    - component: oh-button
      config:
        action: variable
        actionVariable: timepickerTemp
        actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp : "--:--"'
        popoverOpen: .heatingTimePickerPopover
        style: 
          position: absolute
          top: 0px
          width: 100%
          height: 100%
      slots:
        default:
          - component: f7-popover
            config:
              class: heatingTimePickerPopover
              style:
                max-width: 400px
                min-width: 270px
            slots:
              default: 
                - component: f7-block
                  config:
                    style:
                      --f7-button-text-color: var(--f7-text-color)
                      --f7-button-bg-color: var(--f7-card-bg-color)
                      --f7-theme-color-rgb: var(--f7-color-blue-rgb)
                  slots:
                    default:
                      - component: f7-card
                        config:
                          class: padding-top align-content-center
                          style:
                            top: -10px
                            height: 70px
                            z-index: 100
                            width: calc(100% - 20px)
                        slots:
                          default:
                            - component: oh-label-card
                              config:
                                label: '=(vars.timepickerTemp) ? vars.timepickerTemp : "--:--"'
                                outline: true
                - component: f7-row
                  config:
                    class:
                      - margin
                  slots:
                    default:
                      - component: f7-col
                        slots:
                          default:
                            - component: oh-swiper
                              config:
                                params:
                                  slidesPerView: 7
                                  initalSlide: 0
                                  cssMode: true
                                  observer: true
                                  observeParents: true
                                  observeSlideChildren: true
                                  updateOnWindowResize: true
                                  direction: vertical
                                  mousewheel: true
                                style:
                                  height: 300px
                              slots:
                                default:
                                  - component: oh-button
                                    config:
                                      text: "00"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp.split(":")[1]) ? "00:" + vars.timepickerTemp.split(":")[1]: "00:00"'
                                  - component: oh-button
                                    config:
                                      text: "01"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "01:" + vars.timepickerTemp.split(":")[1]: "01:00"'
                                  - component: oh-button
                                    config:
                                      text: "02"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "02:" + vars.timepickerTemp.split(":")[1]: "02:00"'
                                  - component: oh-button
                                    config:
                                      text: "03"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "03:" + vars.timepickerTemp.split(":")[1]: "03:00"'
                                  - component: oh-button
                                    config:
                                      text: "04"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "04:" + vars.timepickerTemp.split(":")[1]: "04:00"'
                                  - component: oh-button
                                    config:
                                      text: "05"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "05:" + vars.timepickerTemp.split(":")[1]: "05:00"'
                                  - component: oh-button
                                    config:
                                      text: "06"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "06:" + vars.timepickerTemp.split(":")[1]: "06:00"'
                                  - component: oh-button
                                    config:
                                      text: "07"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "07:" + vars.timepickerTemp.split(":")[1]: "07:00"'
                                  - component: oh-button
                                    config:
                                      text: "08"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "08:" + vars.timepickerTemp.split(":")[1]: "08:00"'
                                  - component: oh-button
                                    config:
                                      text: "09"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "09:" + vars.timepickerTemp.split(":")[1]: "09:00"'
                                  - component: oh-button
                                    config:
                                      text: "10"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "10:" + vars.timepickerTemp.split(":")[1]: "10:00"'
                                  - component: oh-button
                                    config:
                                      text: "11"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "11:" + vars.timepickerTemp.split(":")[1]: "11:00"'
                                  - component: oh-button
                                    config:
                                      text: "12"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "12:" + vars.timepickerTemp.split(":")[1]: "12:00"'
                                  - component: oh-button
                                    config:
                                      text: "13"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "13:" + vars.timepickerTemp.split(":")[1]: "13:00"'
                                  - component: oh-button
                                    config:
                                      text: "14"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "14:" + vars.timepickerTemp.split(":")[1]: "14:00"'
                                  - component: oh-button
                                    config:
                                      text: "15"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "15:" + vars.timepickerTemp.split(":")[1]: "15:00"'
                                  - component: oh-button
                                    config:
                                      text: "16"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "16:" + vars.timepickerTemp.split(":")[1]: "16:00"'
                                  - component: oh-button
                                    config:
                                      text: "17"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "17:" + vars.timepickerTemp.split(":")[1]: "17:00"'
                                  - component: oh-button
                                    config:
                                      text: "18"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "18:" + vars.timepickerTemp.split(":")[1]: "18:00"'
                                  - component: oh-button
                                    config:
                                      text: "19"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "19:" + vars.timepickerTemp.split(":")[1]: "19:00"'
                                  - component: oh-button
                                    config:
                                      text: "20"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "20:" + vars.timepickerTemp.split(":")[1]: "20:00"'
                                  - component: oh-button
                                    config:
                                      text: "21"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "21:" + vars.timepickerTemp.split(":")[1]: "21:00"'
                                  - component: oh-button
                                    config:
                                      text: "22"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "22:" + vars.timepickerTemp.split(":")[1]: "22:00"'
                                  - component: oh-button
                                    config:
                                      text: "23"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? "23:" + vars.timepickerTemp.split(":")[1]: "23:00"'
                      - component: f7-col
                        slots:
                          default:
                            - component: oh-swiper
                              config:
                                params:
                                  slidesPerView: 7
                                  initalSlide: 0
                                  mousewheel: true
                                  observer: true
                                  observeParents: true
                                  observeSlideChildren: true
                                  updateOnWindowResize: true
                                  direction: vertical
                                  cssMode: true
                                style:
                                  height: 300px
                              slots:
                                default:
                                  - component: oh-button
                                    config:
                                      text: "00"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":00" : "00:00"'
                                  - component: oh-button
                                    config:
                                      text: "05"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":05" : "00:05"'
                                  - component: oh-button
                                    config:
                                      text: "10"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":10" : "00:10"'
                                  - component: oh-button
                                    config:
                                      text: "15"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":15" : "00:15"'
                                  - component: oh-button
                                    config:
                                      text: "20"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":20" : "00:20"'
                                  - component: oh-button
                                    config:
                                      text: "25"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":25" : "00:25"'
                                  - component: oh-button
                                    config:
                                      text: "30"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":30" : "00:30"'
                                  - component: oh-button
                                    config:
                                      text: "35"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":35" : "00:35"'
                                  - component: oh-button
                                    config:
                                      text: "40"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":40" : "00:40"'
                                  - component: oh-button
                                    config:
                                      text: "45"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":45" : "00:45"'
                                  - component: oh-button
                                    config:
                                      text: "50"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":50" : "00:50"'
                                  - component: oh-button
                                    config:
                                      text: "55"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":55" : "00:55"'

ysc · November 29, 2020, 10:05pm

I think a “repeater” component would be a good thing, since Vue directives like v-for can’t be used… It would simplify the code of widgets with a lot of repeated controls and labels greatly. I’ll have to see how difficult it would be to implement one.

buschif4 · November 29, 2020, 10:17pm

Yes a repeater function would be the most important. I create a lot of placeholder at the moment in my widgets and with an v-for i could solve this on a nice way.

ysc · November 30, 2020, 10:49am

I’ve done the oh-repeater & added Day.js (https://day.js.org/docs/en/parse/parse) in expressions.
You’ll find lots of examples here:

RGroll · November 30, 2020, 11:11am

Awesome (and incredibly fast) work - I’ll test this out as soon as a build is a available. Thank you very much.

buschif4 · November 30, 2020, 11:47am

Great!!! Many thanks for this fas implementation Yannick, i will test this as soon as this is released. This will minimize my widgets

RGroll · November 30, 2020, 3:30pm

Thx for the new package @ysc! I have a question regarding my scenario using the repeater to create multiple entries in an oh-swiper component:

The swiper recognizes each component, which is in it’s default slot, as a separate slide - so if I use the repeater, all contents gets created in one slide, instead of multiple slides.

Would it be usefull to make oh-repeater invisible for the oh-swiper component (maybe on demand with something like ‘invisible: true’ or similar), so that only the created repeated contents shows up?! Or maybe theres another way using the repeater function in this scenario which I’m not aware of?

A code example:

          - component: oh-swiper
            config:
              params:
                slidesPerView: 5
            slots:
              default:
                - component: oh-repeater
                  config:
                    sourceType: range
                    for: day
                    rangeStart: 0
                    rangeStop: 2
                  slots:
                    default:
                      - component: f7-swiper-slide
                        slots:
                          default:
                            - component: Label
                              config:
                                text: =dayjs().add(vars.day, 'day').startOf('day').format('dddd')

Thanks again!

ysc · November 30, 2020, 6:40pm

I thought it wasn’t possible but turns out it is, thanks to https://github.com/Thunberg087/vue-fragment.

I added support in https://github.com/openhab/openhab-webui/pull/582 - check the example.

Also when using a repeater, don’t use the oh-swiper which has special behavior for displaying controls on the slides in edit mode, use the f7-swiper directly!

RGroll · November 30, 2020, 6:53pm

If you arrived here, I think you searched hard and you know why you’re here.

Thanks for your hard search

It’s a bless to have someone like you in this community, who’s willing to invest so much time in solving (even the smallest) problems!

buschif4 · December 1, 2020, 6:40am

@ysc I’m currently testing the oh-repeater. It seams that this is not working properly or I’m doing something wrong? I tried to update this time picker widget to use oh-repeater for the minutes and hours. It seams that the button press event inside the oh-repeater is not working fine.

The below code shows the hours with oh-repeater and the minutes in the old manual way. I can define the minutes but not the hours that are build with oh-repeater. Any ideas where my issue is?

uid: verticalSliderTest
tags: []
timestamp: Nov 30, 2020, 9:33:43 PM
component: f7-card
config:
  title: click me
  footer: =props.prop1
  content: =vars.timepickerTemp
slots:
  default:
    - component: oh-button
      config:
        action: variable
        actionVariable: timepickerTemp
        actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp : "--:--"'
        popoverOpen: .heatingTimePickerPopover
        style:
          position: absolute
          top: 0px
          width: 100%
          height: 100%
      slots:
        default:
          - component: f7-popover
            config:
              class: heatingTimePickerPopover
              style:
                max-width: 400px
                min-width: 270px
            slots:
              default:
                - component: f7-block
                  config:
                    style:
                      --f7-button-text-color: var(--f7-text-color)
                      --f7-button-bg-color: var(--f7-card-bg-color)
                      --f7-theme-color-rgb: var(--f7-color-blue-rgb)
                  slots:
                    default:
                      - component: f7-card
                        config:
                          class: padding-top align-content-center
                          style:
                            top: -10px
                            height: 70px
                            z-index: 100
                            width: calc(100% - 20px)
                        slots:
                          default:
                            - component: oh-label-card
                              config:
                                label: '=(vars.timepickerTemp) ? vars.timepickerTemp : "--:--"'
                                outline: true
                - component: f7-row
                  config:
                    class:
                      - margin
                  slots:
                    default:
                      - component: f7-col
                        slots:
                          default:
                            - component: f7-swiper
                              config:
                                params:
                                  slidesPerView: 7
                                  initalSlide: 0
                                  cssMode: true
                                  observer: true
                                  observeParents: true
                                  observeSlideChildren: true
                                  updateOnWindowResize: true
                                  direction: vertical
                                  mousewheel: true
                                style:
                                  height: 300px
                              slots:
                                default:
                                  - component: oh-repeater
                                    config:
                                      for: hours
                                      sourceType: range
                                      rangeStart: 0
                                      rangeStop: 23
                                      rangeStep: 1
                                      containerClasses:
                                        - display-flex
                                        - flex-direction-column
                                    slots:
                                      default:
                                        - component: oh-button
                                          config:
                                            text: '=(vars.hours === 0) ? "00" : (vars.hours < 10) ? "0" + vars.hours.toString() : vars.hours'
                                            raised: true
                                            large: true
                                            action: variable
                                            actionVariable: timepickerTemp
                                            actionVariableValue: '=(vars.timepickerTemp) ? vars.hours.toString() + ":" + vars.timepickerTemp.split(":")[1] : vars.hours.toString() + ":00"'
                      - component: f7-col
                        slots:
                          default:
                            - component: oh-swiper
                              config:
                                params:
                                  slidesPerView: 7
                                  initalSlide: 0
                                  mousewheel: true
                                  observer: true
                                  observeParents: true
                                  observeSlideChildren: true
                                  updateOnWindowResize: true
                                  direction: vertical
                                  cssMode: true
                                style:
                                  height: 300px
                              slots:
                                default:
                                  - component: oh-button
                                    config:
                                      text: "00"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":00" : "00:00"'
                                  - component: oh-button
                                    config:
                                      text: "05"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":05" : "00:05"'
                                  - component: oh-button
                                    config:
                                      text: "10"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":10" : "00:10"'
                                  - component: oh-button
                                    config:
                                      text: "15"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":15" : "00:15"'
                                  - component: oh-button
                                    config:
                                      text: "20"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":20" : "00:20"'
                                  - component: oh-button
                                    config:
                                      text: "25"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":25" : "00:25"'
                                  - component: oh-button
                                    config:
                                      text: "30"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":30" : "00:30"'
                                  - component: oh-button
                                    config:
                                      text: "35"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":35" : "00:35"'
                                  - component: oh-button
                                    config:
                                      text: "40"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":40" : "00:40"'
                                  - component: oh-button
                                    config:
                                      text: "45"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":45" : "00:45"'
                                  - component: oh-button
                                    config:
                                      text: "50"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp
                                      actionVariableValue: '=(vars.timepickerTemp) ? vars.timepickerTemp.split(":")[0] + ":50" : "00:50"'
                                  - component: oh-button
                                    config:
                                      text: "55"
                                      raised: true
                                      large: true
                                      action: variable
                                      actionVariable: timepickerTemp

RGroll · December 1, 2020, 8:11am

Hey @buschif4

Sadly I don’t have a soloution for you. But as it seems, it’s only affecting variable-actions. I tried to send your command to an item and this works fine:

 - component: oh-button
   config:
      text: '=(vars.hours === 0) ? "00" : (vars.hours < 10) ? "0" + vars.hours.toString() : vars.hours'
      raised: true
      large: true
      action: command
      actionItem: testItem
      actionCommand: '=(vars.timepickerTemp) ? "0" + vars.hours.toString() + ":" + vars.timepickerTemp.split(":")[1] : vars.hours.toString() + ":00"'

So, you could create a dummy item, which acts as a variable until @ysc makes us smarter

btw - some good news from my side (as I’m not working with variables in my widget):
I reduced the code from ~1.000 lines of code to 400 and additionaly it’s much more flexible in regard of adjustments.

buschif4 · December 1, 2020, 8:22am

@RGroll thanks for the information, then I need to use a dummy item at the moment.

I’m very interested how I can reduce my code I think my sonos widget can be written in less than the half size. My heating control was finished yesterday. Now I have to redesign this for oh-repeater as well. Currently it uses 2200 rows, lets see how many i can remove with oh-repeater

RGroll · December 1, 2020, 9:59am

If we’re on this topic anyway, theres a strange behaviour in my horizontal swiper - on the 2nd attempt to load/initialize the swiper it gets loaded on the last swiper-element. (despite that I’ve defined an ‘observer’ (to re-initialize on every show/hide) and ‘initalSlide: 0’ as a swiper parameter)

Everything works fine on the first initialization and wasn’t a problem before (before implementing oh-repeater, so there might be a context)

//edit
It seems that the *.gif file upload here is still broken on large images (>3MB)…

buschif4 · December 1, 2020, 11:33am

I noticed another strange behavior with the f7-swiper. On the swiper we can define how many elements should be loaded per view. But if you use an oh-repeater inside a swiper, all elements in the oh-repeat will be noticed as the first element inside the f7-swiper. So it will not limit the items to load because the swiper is only recognizing one element (in this case the oh-repeater) and not serval.

Maybe this is because the swiper only knows the div below and the repeater elements are nested in this div.

RGroll · December 1, 2020, 12:27pm

Try to use ‘f7-swiper-slide’ as a wrapper around each button/element and don’t forget ‘fragment: true’ on the f7-swiper component.