Swipeout List Item

Add-ons UIs
1

I created a widget which uses swipeout component of f7-list-item (like if you swipe left in your mobile email app). If I swipe and delete an entry from that f7-list the next list item looks like I have already swiped it.
What do I need to change in the code below which works fine so far?

- component: f7-list
  config:
    inset: true
    mediaList: true
    noHairlinesBetween: false
  slots:
    default:
      - component: oh-repeater
        config:
          for: rItem
          fragment: true
          groupItem: gAlarms
          sourceType: itemsInGroup
        slots:
          default:
            - component: f7-list-item
              config:
                badge: =loop.rItem.state
                badgeColor: red
                swipeout: true
                title: =loop.rItem.label
              slots:
                default:
                  - component: f7-swipeout-actions
                    slots:
                      default:
                        - component: oh-link
                          config:
                            action: command
                            actionCommand: "NULL"
                            actionItem: =loop.rItem.name
                            bgColor: red
                            class:
                              - swipeout-deleting
                          slots:
                            default:
                              - component: f7-block
                                config:
                                  style:
                                    align-items: center
                                    display: flex
                                    flex-direction: column
                                    margin: 100%
                                    vertical-align: center
                                slots:
                                  default:
                                    - component: oh-icon
                                      config:
                                        color: white
                                        icon: f7:trash_fill
                                        width: 20px
                                    - component: Label
                                      config:
                                        style:
                                          font-size: 14px
                                        text: Delete
2

I’ve not run across this issue, but I’ve never tried to use the swiper actions to delete something in a list. My guess is that because what is causing the list items to change is an OH action that the f7-list has no real knowledge of, the list itself is not being refreshed. You probably need to add a key property to the f7-list that also some how gets triggered when any of the items in the group changes.

Of the top of my head, I’d say the to easiest ways to do that would be 1) make a dummy DateTime Item and set up a rule that just changes the state of that item to the current time whenever one of the group members changes or 2) depending on the group and these group items you might be able to have a second group with an aggregation function that (such as sum or count) which will then change whenever these group members change.

3

Thanks Justin!
I will try your suggestions.

4

I use a swipeout to delete items in my rollershutter widget. I haven’t had a look at your code to be honest but maybe you can check it out to see if I did something differently.

1 Like