Make whole oh-toggle-item clickable

Add-ons UIs
, ,
1

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
2

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.

3

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
4

Hi, I am looking something like your’s setup, but not able to setup the widget right. Can’t see any items populated. Any chance if you could share the complete widget code please?
thanks in advance :slight_smile: