MainUI widgets: Conditionally disable/hide swiper slide

Hi folks,

I am currently writing my own widget for displaying the DWDUnwetter warnings.
For this I created a card widget which displays the relevant data:

uid: UnwetterCard_v1
tags: []
props:
  parameters:
    - context: item
      description: Warning "Headline"
      label: Item
      name: headline
      required: false
      type: TEXT
    - context: item
      description: Warning "Type"
      label: Item
      name: type
      required: false
      type: TEXT
    - context: item
      description: Warning "Severity"
      label: Item
      name: severity
      required: false
      type: TEXT
    - context: item
      description: Warning "Severity color"
      label: Item
      name: severityColor
      required: false
      type: TEXT
    - context: item
      description: Warning "Valid from"
      label: Item
      name: validFrom
      required: false
      type: TEXT
    - context: item
      description: Warning "Valid to"
      label: Item
      name: validTo
      required: false
      type: TEXT
    - context: item
      description: Warning "Description"
      label: Item
      name: description
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 20, 2022, 1:02:43 AM
component: f7-card
config:
  style:
    noShadow: false
    class:
      - padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    margin-left: 5px
    margin-right: 5px
  title: =items[props.headline].state
slots:
  content:
    - component: oh-list-card
      config: {}
      slots:
        default:
          - component: oh-list-item
            config:
              title: =items[props.type].state
              icon: f7:wind
              iconColor: =items[props.severityColor].displayState
              badgeColor: =items[props.severityColor].displayState
              badge: =items[props.severity].displayState
          - component: oh-label-item
            config:
              title: "von:"
              item: =props.validFrom
          - component: oh-label-item
            config:
              title: "bis: "
              item: =props.validTo
    - component: f7-card
      config:
        content: =items[props.description].state

I want to display up to 3 warnings within an oh-swiper-card:
image

Corresponding code:

component: oh-swiper-card
config:
  scrollbar: false
  pagination: true
  navigation: true
  footer: '="Letzte Aktualisierung: "+items.DWDUnwetterWarnungen_LetzteAktualisierung.displayState'
  noBorder: false
  noShadow: false
  outline: false
slots:
  default:
    - component: widget:UnwetterCard_v1
      config:
        headline: DWDUnwetterWarnungen_Headline1
        type: DWDUnwetterWarnungen_Type1
        severity: DWDUnwetterWarnungen_Severity1
        severityColor: DWDUnwetterWarnungen_SeverityColor1
        validFrom: DWDUnwetterWarnungen_ValidFrom1
        validTo: DWDUnwetterWarnungen_ValidTo1
        description: DWDUnwetterWarnungen_Description1
    - component: widget:UnwetterCard_v1
      config:
        headline: DWDUnwetterWarnungen_Headline2
        type: DWDUnwetterWarnungen_Type2
        severity: DWDUnwetterWarnungen_Severity2
        severityColor: DWDUnwetterWarnungen_SeverityColor2
        validFrom: DWDUnwetterWarnungen_ValidFrom2
        validTo: DWDUnwetterWarnungen_ValidTo2
        description: DWDUnwetterWarnungen_Description2
    - component: widget:UnwetterCard_v1
      config:
        headline: DWDUnwetterWarnungen_Headline3
        type: DWDUnwetterWarnungen_Type3
        severity: DWDUnwetterWarnungen_Severity3
        severityColor: DWDUnwetterWarnungen_SeverityColor3
        validFrom: DWDUnwetterWarnungen_ValidFrom3
        validTo: DWDUnwetterWarnungen_ValidTo3
        description: DWDUnwetterWarnungen_Description3

The invalid warnings are filled with UNDEF, this status can be queried by the “warning” channel of the DWDUnwetter binding:
image

In my first euphoria I thought I can just set the widgets on the slides to invisible:

- component: widget:UnwetterCard_v1
      config:
        visible: =items.DWDUnwetterWarnungen_Warning3.state==false

but that didn’t work well as the slide is still present but only blank :frowning:
image

Is there any way to conditonally exclude the slide component from rendering based on an item’s state?

Thanks for your help!

Cheers
Jonathan

Not sure if it helps, but I’m using this for something similar:
visible: =items.GenericMQTTThing_PumpStatus.state === ‘Failure’

The only way I have found to get the swiper to recalculate the number of slides is to force it to refresh. Read about using the key property here (you only need to force a refresh on item change, you obviously don’t need the section on the automatic timed refresh):

Just add a ‘key’ property to the base of your swiper and ‘visible’ properties to each of the slides. As long as the key is populated with the same item states that determine the slide visibility, when that item changes, the swiper will refresh with only the visible slides.

Hi @JustinG,

unfortunately I was not able to get the swiper to hide the invisible pages.
Did you really use the oh-swiper-card in your setup?

But: Meanwhile I was doing some searching for the underlaying f7 and vue features and found the solution in building the swiper with native f7 parts:
(this is only an excerpt from a page, actually not a full widget code - if anyone wants to use it rightaway :wink: )

- component: f7-card
  config: {}
  slots:
    default:
      - component: f7-card-header
        config:
          visible: false
        slots:
          default:
            - component: Label
              config:
                text: ""
      - component: f7-card-content
        slots:
          default:
            - component: f7-swiper
              config:
                scrollbar: false
                pagination: true
                navigation: true
                noBorder: false
                noShadow: false
                outline: false
                params:
                  slidesPerView: 1
                  observer: true
                  observeParents: true
                  observeSlideChildren: true
                  watchSlidesProgress: true
              slots:
                default:
                  - component: f7-swiper-slide
                    slots:
                      default:
                        - component: widget:UnwetterCard_v1
                          config:
                            headline: DWDUnwetterWarnungen_Headline1
                            type: DWDUnwetterWarnungen_Type1
                            severity: DWDUnwetterWarnungen_Severity1
                            severityColor: DWDUnwetterWarnungen_SeverityColor1
                            validFrom: DWDUnwetterWarnungen_ValidFrom1
                            validTo: DWDUnwetterWarnungen_ValidTo1
                            description: DWDUnwetterWarnungen_Description1
                  - component: f7-swiper-slide
                    config:
                      visible: =items.DWDUnwetterWarnungen_Warning2.state=="ON"
                    slots:
                      default:
                        - component: widget:UnwetterCard_v1
                          config:
                            headline: DWDUnwetterWarnungen_Headline2
                            type: DWDUnwetterWarnungen_Type2
                            severity: DWDUnwetterWarnungen_Severity2
                            severityColor: DWDUnwetterWarnungen_SeverityColor2
                            validFrom: DWDUnwetterWarnungen_ValidFrom2
                            validTo: DWDUnwetterWarnungen_ValidTo2
                            description: DWDUnwetterWarnungen_Description2
                  - component: f7-swiper-slide
                    config:
                      visible: =items.DWDUnwetterWarnungen_Warning3.state=="ON"
                    slots:
                      default:
                        - component: widget:UnwetterCard_v1
                          config:
                            headline: DWDUnwetterWarnungen_Headline3
                            type: DWDUnwetterWarnungen_Type3
                            severity: DWDUnwetterWarnungen_Severity3
                            severityColor: DWDUnwetterWarnungen_SeverityColor3
                            validFrom: DWDUnwetterWarnungen_ValidFrom3
                            validTo: DWDUnwetterWarnungen_ValidTo3
                            description: DWDUnwetterWarnungen_Description3
                  - component: f7-swiper-slide
                    config:
                      visible: =items.DWDUnwetterWarnungen_Warning4.state=="ON"
                    slots:
                      default:
                        - component: widget:UnwetterCard_v1
                          config:
                            headline: DWDUnwetterWarnungen_Headline4
                            type: DWDUnwetterWarnungen_Type4
                            severity: DWDUnwetterWarnungen_Severity4
                            severityColor: DWDUnwetterWarnungen_SeverityColor4
                            validFrom: DWDUnwetterWarnungen_ValidFrom4
                            validTo: DWDUnwetterWarnungen_ValidTo4
                            description: DWDUnwetterWarnungen_Description4
                  - component: f7-swiper-slide
                    config:
                      visible: =items.DWDUnwetterWarnungen_Warning5.state=="ON"
                    slots:
                      default:
                        - component: widget:UnwetterCard_v1
                          config:
                            headline: DWDUnwetterWarnungen_Headline5
                            type: DWDUnwetterWarnungen_Type5
                            severity: DWDUnwetterWarnungen_Severity5
                            severityColor: DWDUnwetterWarnungen_SeverityColor5
                            validFrom: DWDUnwetterWarnungen_ValidFrom5
                            validTo: DWDUnwetterWarnungen_ValidTo5
                            description: DWDUnwetterWarnungen_Description5
      - component: f7-card-footer
        config:
          config: {}
        slots:
          default:
            - component: Label
              config:
                text: '="Letzte Aktualisierung: "+items.DWDUnwetterWarnungen_LetzteAktualisierung.displayState'

The used widget “UnwetterCard_v1” is this one (not completely finished, e.g. the icons for the different types of warnings - currently only “wind” is displayed):

uid: UnwetterCard_v1
tags: []
props:
  parameters:
    - context: item
      description: Warning "Headline"
      label: Item
      name: headline
      required: false
      type: TEXT
    - context: item
      description: Warning "Type"
      label: Item
      name: type
      required: false
      type: TEXT
    - context: item
      description: Warning "Severity"
      label: Item
      name: severity
      required: false
      type: TEXT
    - context: item
      description: Warning "Severity color"
      label: Item
      name: severityColor
      required: false
      type: TEXT
    - context: item
      description: Warning "Valid from"
      label: Item
      name: validFrom
      required: false
      type: TEXT
    - context: item
      description: Warning "Valid to"
      label: Item
      name: validTo
      required: false
      type: TEXT
    - context: item
      description: Warning "Description"
      label: Item
      name: description
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 20, 2022, 3:26:29 PM
component: f7-card
config:
  style:
    noShadow: false
    class:
      - padding: 0px
    margin-left: 5px
    margin-right: 5px
  title: =items[props.headline].state
slots:
  content:
    - component: oh-list-card
      config:
        noBorder: false
        noShadow: true
        outline: false
      slots:
        default:
          - component: oh-list-item
            config:
              title: =items[props.type].state
              icon: f7:wind
              iconColor: =items[props.severityColor].displayState
              badgeColor: =items[props.severityColor].displayState
              badge: =items[props.severity].displayState
          - component: oh-label-item
            config:
              title: "von:"
              item: =props.validFrom
          - component: oh-label-item
            config:
              title: "bis: "
              item: =props.validTo
    - component: f7-card
      config:
        noBorder: false
        noShadow: true
        outline: false
        content: =items[props.description].state

For now, there is no automatic refresh active - I do not need it as the page is not the frontpage and gets usually reloaded when opened on demand. But many thanks for the hint with the key property. I will think about that later.

There is one glitch with the automatic refresh is: When you are just looking on the screen maybe on slide 3 and in that moment the data gets updated (because item refreshed, …) the slides will jump back to slide 1 :wink: .

Cheers
Jonathan

No, I use the base f7 components, but I’m surprised to hear that it doesn’t work with the swiper card, the key change should impact children of the refreshed element as well, as I understand it.

Glad to hear you found a suitable workaround.