OH5 Latest snapshot - oh-repeater component

Setup, Configuration and Use Widgets
1

dear all
In the latest OH5, latest snapshot, I had this widget

uid: Keypad_TEST
tags: []
props:
  parameters:
    - context: item
      description: Item Disinserimento
      label: Item Disinserimento
      name: itemDisinserimento
      required: false
      type: TEXT
    - context: item
      description: Item Totale
      label: Item Totale
      name: itemTotale
      required: false
      type: TEXT
    - context: item
      description: Item Volumetrico
      label: Item Volumetrico
      name: itemVolumetrico
      required: false
      type: TEXT
    - context: item
      description: Item Perimetrale
      label: Item Perimetrale
      name: itemPerimetrale
      required: false
      type: TEXT
    - description: Replace pincode characters with this string, leave blank to show it as-is
      label: Mask character
      name: mask
      required: false
      type: TEXT
    - description: If this widget is shown in a popup, close it after pressing Send
      label: Close Popup on Send
      name: closePopup
      required: false
      type: BOOLEAN
  parameterGroups: []
timestamp: Feb 21, 2025, 1:54:16 PM
component: f7-block
config:
  class:
    - padding
  label: Please Input Pin
  style:
    --f7-button-bg-color: var(--f7-card-bg-color)
    --f7-button-text-color: var(--f7-text-color)
    --f7-theme-color-rgb: var(--f7-color-blue-rgb)
slots:
  default:
    - component: oh-label-card
      config:
        class:
          - margin-bottom
        label: "=(props.mask && vars.pincode) ? props.mask.repeat(vars.pincode.length ||
          0) : vars.pincode"
        outline: true
    - component: f7-row
      config:
        class:
          - margin
      slots:
        default:
          - component: oh-repeater
            config:
              for: digit
              fragment: true
              in:
                - "1"
                - "2"
                - "3"
                - "4"
                - "5"
                - "6"
                - "7"
                - "8"
                - "9"
                - "*"
                - "0"
                - "#"
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - margin-vertical-half
                    width: "33"
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: variable
                          actionVariable: pincode
                          actionVariableValue: "=(vars.pincode) ? vars.pincode + loop.digit : loop.digit"
                          large: true
                          raised: true
                          text: =loop.digit
    - component: f7-row
      config:
        class:
          - margin
        style:
          --f7-button-bg-color: transparent
          --f7-theme-color: var(--f7-color-blue)
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: ""
                    large: true
                    text: Clear
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: '=(vars.pincode) ? vars.pincode.substring(0,
                      vars.pincode.length - 1) : ""'
                    large: true
                    text: Back
    - component: f7-row
      config:
        class:
          - margin
        style:
          --f7-button-bg-color: transparent
          --f7-theme-color: var(--f7-color-blue)
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: command
                    actionCommand: =vars.pincode
                    actionItem: =(props.itemTotale) || 'TestString'
                    class: "=(props.closePopup) ? ['popup-close'] : []"
                    clearVariable: pincode
                    closePopup: =props.closePopup
                    disabled: =!vars.pincode
                    fill: true
                    large: true
                    style:
                      --f7-button-hover-bg-color: var(--f7-color-blue-tint)
                      --f7-button-pressed-bg-color: var(--f7-color-blue-tint)
                    text: Totale
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: command
                    actionCommand: =vars.pincode
                    actionItem: =(props.itemVolumetrico) || 'TestString'
                    class: "=(props.closePopup) ? ['popup-close'] : []"
                    clearVariable: pincode
                    closePopup: =props.closePopup
                    disabled: =!vars.pincode
                    fill: true
                    large: true
                    style:
                      --f7-button-hover-bg-color: var(--f7-color-blue-tint)
                      --f7-button-pressed-bg-color: var(--f7-color-blue-tint)
                    text: Volumetrico
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: command
                    actionCommand: =vars.pincode
                    actionItem: =(props.itemPerimetrale) || 'TestString'
                    class: "=(props.closePopup) ? ['popup-close'] : []"
                    clearVariable: pincode
                    closePopup: =props.closePopup
                    disabled: =!vars.pincode
                    fill: true
                    large: true
                    style:
                      --f7-button-hover-bg-color: var(--f7-color-blue-tint)
                      --f7-button-pressed-bg-color: var(--f7-color-blue-tint)
                    text: Perimetrale
    - component: f7-row
      config:
        class:
          - margin
        style:
          --f7-button-bg-color: transparent
          --f7-theme-color: var(--f7-color-blue)
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: command
                    actionCommand: =vars.pincode
                    actionItem: =(props.itemDisinserimento) || 'TestString'
                    class: "=(props.closePopup) ? ['popup-close'] : []"
                    clearVariable: pincode
                    closePopup: =props.closePopup
                    disabled: =!vars.pincode
                    fill: true
                    large: true
                    style:
                      --f7-button-hover-bg-color: var(--f7-color-blue-tint)
                      --f7-button-pressed-bg-color: var(--f7-color-blue-tint)
                    text: Disinserimento

but the result is a blank square and not the keys

image
image540×340 7.77 KB

In the last stable version it works perfectly.

How can I solve it?

thanks in advance.

2

The oh-repeater code hasn’t changed in 2 years, so the problem has to be somewhere else. I have a guess.

I’m not in a position to test options at the moment, but try this and let me know if it works:

uid: Keypad_TEST
tags: []
props:
  parameters:
    - context: item
      description: Item Disinserimento
      label: Item Disinserimento
      name: itemDisinserimento
      required: false
      type: TEXT
    - context: item
      description: Item Totale
      label: Item Totale
      name: itemTotale
      required: false
      type: TEXT
    - context: item
      description: Item Volumetrico
      label: Item Volumetrico
      name: itemVolumetrico
      required: false
      type: TEXT
    - context: item
      description: Item Perimetrale
      label: Item Perimetrale
      name: itemPerimetrale
      required: false
      type: TEXT
    - description: Replace pincode characters with this string, leave blank to show it as-is
      label: Mask character
      name: mask
      required: false
      type: TEXT
    - description: If this widget is shown in a popup, close it after pressing Send
      label: Close Popup on Send
      name: closePopup
      required: false
      type: BOOLEAN
  parameterGroups: []
timestamp: Feb 21, 2025, 1:54:16 PM
component: f7-block
config:
  class:
    - padding
  label: Please Input Pin
  style:
    --f7-button-bg-color: var(--f7-card-bg-color)
    --f7-button-text-color: var(--f7-text-color)
    --f7-theme-color-rgb: var(--f7-color-blue-rgb)
slots:
  default:
    - component: oh-label-card
      config:
        class:
          - margin-bottom
        label: "=(props.mask && vars.pincode) ? props.mask.repeat(vars.pincode.length ||
          0) : vars.pincode"
        outline: true
    - component: oh-repeater
      config:
        for: digit
        containerClasses:
          - row
          - margin
        in:
          - "1"
          - "2"
          - "3"
          - "4"
          - "5"
          - "6"
          - "7"
          - "8"
          - "9"
          - "*"
          - "0"
          - "#"
      slots:
        default:
          - component: f7-col
            config:
              class:
                - margin-vertical-half
              width: "33"
            slots:
              default:
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: "=(vars.pincode) ? vars.pincode + loop.digit : loop.digit"
                    large: true
                    raised: true
                    text: =loop.digit
    - component: f7-row
      config:
        class:
          - margin
        style:
          --f7-button-bg-color: transparent
          --f7-theme-color: var(--f7-color-blue)
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: ""
                    large: true
                    text: Clear
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: '=(vars.pincode) ? vars.pincode.substring(0,
                      vars.pincode.length - 1) : ""'
                    large: true
                    text: Back
    - component: f7-row
      config:
        class:
          - margin
        style:
          --f7-button-bg-color: transparent
          --f7-theme-color: var(--f7-color-blue)
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: command
                    actionCommand: =vars.pincode
                    actionItem: =(props.itemTotale) || 'TestString'
                    class: "=(props.closePopup) ? ['popup-close'] : []"
                    clearVariable: pincode
                    closePopup: =props.closePopup
                    disabled: =!vars.pincode
                    fill: true
                    large: true
                    style:
                      --f7-button-hover-bg-color: var(--f7-color-blue-tint)
                      --f7-button-pressed-bg-color: var(--f7-color-blue-tint)
                    text: Totale
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: command
                    actionCommand: =vars.pincode
                    actionItem: =(props.itemVolumetrico) || 'TestString'
                    class: "=(props.closePopup) ? ['popup-close'] : []"
                    clearVariable: pincode
                    closePopup: =props.closePopup
                    disabled: =!vars.pincode
                    fill: true
                    large: true
                    style:
                      --f7-button-hover-bg-color: var(--f7-color-blue-tint)
                      --f7-button-pressed-bg-color: var(--f7-color-blue-tint)
                    text: Volumetrico
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: command
                    actionCommand: =vars.pincode
                    actionItem: =(props.itemPerimetrale) || 'TestString'
                    class: "=(props.closePopup) ? ['popup-close'] : []"
                    clearVariable: pincode
                    closePopup: =props.closePopup
                    disabled: =!vars.pincode
                    fill: true
                    large: true
                    style:
                      --f7-button-hover-bg-color: var(--f7-color-blue-tint)
                      --f7-button-pressed-bg-color: var(--f7-color-blue-tint)
                    text: Perimetrale
    - component: f7-row
      config:
        class:
          - margin
        style:
          --f7-button-bg-color: transparent
          --f7-theme-color: var(--f7-color-blue)
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: command
                    actionCommand: =vars.pincode
                    actionItem: =(props.itemDisinserimento) || 'TestString'
                    class: "=(props.closePopup) ? ['popup-close'] : []"
                    clearVariable: pincode
                    closePopup: =props.closePopup
                    disabled: =!vars.pincode
                    fill: true
                    large: true
                    style:
                      --f7-button-hover-bg-color: var(--f7-color-blue-tint)
                      --f7-button-pressed-bg-color: var(--f7-color-blue-tint)
                    text: Disinserimento
3

it works on snapshot
thanks…but the mistery is why it works on stable version?

4

Last week there were some updates to UI dependencies. One of the things that was updated was the vue-fragment library which is used in several places in the UI including when you set fragment: true in the repeater.

The widget config I posted removes that property from the repeater and creates the exact same resulting html in a different way. The fact that the this different approach works in the snapshot proves that the problem is the fragment update. I’ll file an issue about it.

5

FYI: Here’s the issue. When this gets resolved snapshots should work wit the previous code again.

6

thanks a lot

7

What browser were you using when you saw this error?

8

Mobile samsung browser
From desktop chrome
It was the same also from android app

9

This issue is now fixed in the latest snapshot.

10

Thank a lot Justin