Make whole oh-toggle-item clickable

Hi All,

I have a page that generates a list of all switch items in a group in a oh-list-card by using the oh-repeater to display a oh-toggle-item for each switch.

image

The problem is that i have to exactly press the toggle, pressing the whole item row does not interact with the switch. Is there a way that allows to make the whole row to interact with the switch?

This is my code:

- component: oh-list-card
  config:
    title: List Title
  slots:
    default:
      - component: oh-repeater
        config:
          for: item
          sourceType: itemsInGroup
          groupItem: =props.itemGroupCeiling
          filter: '(loop.item.type=="Switch") ? true : false'
        slots:
          default:
            - component: oh-toggle-item
              config:
                icon: ='oh:' + loop.item.category
                title: =loop.item.label
                item: =loop.item.name

Hi Holius,

I have a lightswitch widget, which toggles a group of lights bij pressing the whole “button” and seperate buttons for in/decreasing the dimmer.

Here is a “piece” of code that contains the clickable part of the button.
It basically involves making a oh-link inside a oh-link. Not sure if this is what you are looking for. You MIGHT be able to do the same trick with the oh-toggle-item part, but I haven’t done that one before.

- component: f7-block // Container for the button
            config:
              style:
                margin: 0 0
                padding: 0px 0px
                flex: 3
                display: flex
                flex-flow: row wrap
                justify-content: center
                align-items: center
                border-radius: 20px 0px 0px 20px
            slots:
              default:
                - component: oh-link // The clickable container for the button which actually toggles the item (light) in question
                  config:
                    action: toggle
                    actionItem: =props.item_switch
                    actionCommand: toggle
                    style:
                      margin: 0 0 0 0
                      padding: 40px 0px
                      border-radius: 20px 0px 0px 20px
                      flex: 1
                      display: flex
                      flex-flow: row wrap
                      justify-content: flex-start
                      align-items: center
                      border-right: 1px solid
                      border-color: =props.inactiveForegroundColor
                  slots:
                    default:
                      - component: oh-link // This shows an lightbulb icon which changes depending on the on/off state of the item (It doesn't do any actions!)
                        config:
                          iconF7: '=(items[props.item_switch].state == "OFF") ? props.icon_off : props.icon_on'
                          iconSize: 21px
                          style:
                            margin: 0 10px 0 20px
                            padding: 0px 10px 0px 0px
                            color: =props.inactiveForegroundColor
                            border-right: 1px solid
                      - component: Label // The name of the item is put here.
                        config:
                          text: =props.title
                          style:
                            padding: 0px
                            color: =props.inactiveForegroundColor

This piece of code in incomplete to create the actual button I put in a screenshot below. The red marked square is the code you see here.

Hope it helps!

image

[EDIT]
I see your post is 20d old, I just recently figured this out myself and wanted to share this with you. Hope it is still relevant.

Sorry I missed this when you first posted. There’s a fairly simple solution. When you assign an action to an oh-list-item then clicking anywhere on that list item will trigger that action. The oh-toggle-item is basically just a list item with a toggle added to its after slot, so you can easily build your own list item that looks just like a toggle item but has the entire click area of the list item

- component: oh-list-item
  config:
    icon: ='oh:' + loop.item.category
    title: =loop.item.label
    action: toggle
    actionItem: =loop.item.name
    actionCommand: ON
    actionCommandAlt: OFF
    noChevron: true
  slots:
    after:
      - component: oh-toggle
        config:
          item: =loop.item.name
1 Like