Hide arrows in widgets if just one actionCommand

[e36Alex (Alexander)]

Hello,

I got a litte issue with one of my widgets:

At this one some options have multiple commands and some have just one option, but in every line the is an arrow that suggests there are multiple options.
I would like to see the arrow just in the case, there are different options and not when the rule is fired directly.

Any idea how I can disable the arrows in this case?

uid: widget_scenes_v2
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Apr 18, 2021, 10:06:13 PM
component: oh-list-card
config:
  accordionList: true
slots:
  default:
    - component: oh-list-item
      config:
        title: Szenen
        icon: f7:arrow_2_squarepath
        accordionItemOpened: true
      slots:
        accordion:
          - component: oh-list
            config:
              accordionList: true
              class:
                - margin-left
            slots:
              default:
                - component: oh-list-item
                  config:
                    title: Aufstehen
                    badge: =items.Home_Scenes_SZ.state
                    badgeColor: '=(items.Home_Scenes_SZ.state === "bereit") ? "green" : "yellow"'
                    item: Home_Scenes_SZ
                    action: command
                    actionItem: Home_Scenes_SZ
                    actionCommand: AUFWACHEN
                    visible: =((items.TimeOfDay.state === "MORNING" || items.TimeOfDay.state === "NIGHT") && items.Home_Anwesenheitserkennung.state === "ON")
                - component: oh-list-item
                  config:
                    title: Media (Wohnzimmer)
                    badge: =items.Home_Scenes_WZ.state
                    badgeColor: '=(items.Home_Scenes_WZ.state === "bereit") ? "green" : "yellow"'
                    item: Home_Scenes_WZ
                    action: options
                    actionItem: Home_Scenes_WZ
                    actionCommand: RADIO_ON
                    visible: =((items.TimeOfDay.state === "MORNING" || items.TimeOfDay.state === "DAY" || items.TimeOfDay.state === "EVENING") && items.Home_Anwesenheitserkennung.state === "ON")
                - component: oh-list-item
                  config:
                    title: Wohnzimmer aus
                    badge: =items.Home_Scenes_WZ.state
                    badgeColor: '=(items.Home_Scenes_WZ.state === "bereit") ? "green" : "yellow"'
                    item: Home_Scenes_WZ
                    action: command
                    actionItem: Home_Scenes_WZ
                    actionCommand: WZ_OFF
                    visible: =items.Home_Status_Act_Devices_WZ.state === "ON"
                - component: oh-list-item
                  config:
                    title: Schlafen gehen
                    badge: =items.Home_Scenes_SZ.state
                    badgeColor: '=(items.Home_Scenes_SZ.state === "bereit") ? "green" : "yellow"'
                    item: Home_Scenes_SZ
                    action: command
                    actionItem: Home_Scenes_SZ
                    actionCommand: SCHLAFEN_GEHEN
                    visible: =((items.TimeOfDay.state === "EVENING" || items.TimeOfDay.state === "BED" || items.TimeOfDay.state === "NIGHT") && items.Home_Anwesenheitserkennung.state === "ON")
                - component: oh-list-item
                  config:
                    title: Bettleuchten aus
                    badge: =items.Home_Scenes_SZ.state
                    badgeColor: '=(items.Home_Scenes_SZ.state === "bereit") ? "green" : "yellow"'
                    item: Home_Scenes_SZ
                    action: command
                    actionItem: Home_Scenes_SZ
                    actionCommand: LICHT_AUS
                    visible: =items.SZ_Licht.state === "ON"
                - component: oh-list-item
                  config:
                    title: Nachtlicht
                    badge: =items.Home_Scenes_SZ.state
                    badgeColor: '=(items.Home_Scenes_SZ.state === "bereit") ? "green" : "yellow"'
                    item: Home_Scenes_SZ
                    action: command
                    actionItem: Home_Scenes_SZ
                    actionCommand: NACHTLICHT
                    visible: =((items.TimeOfDay.state === "BED" || items.TimeOfDay.state === "NIGHT") && items.Home_Anwesenheitserkennung.state === "ON")
                - component: oh-list-item
                  config:
                    title: Wellness
                    badge: =items.Home_Scenes_BZ.state
                    badgeColor: '=(items.Home_Scenes_BZ.state === "bereit") ? "green" : "yellow"'
                    item: Home_Scenes_BZ
                    action: command
                    actionItem: Home_Scenes_BZ
                    actionCommand: WELLNESS
                    visible: =(items.TimeOfDay.state === "EVENING" && items.Home_Anwesenheitserkennung.state === "ON")
                - component: oh-label-item
                  config:
                    title: Alle Szenen
                    action: popup
                    actionModal: widget:widget_scenes

[JustinG]

You can add

noChevron: true

to any list item where you would like to suppress the arrow.

[e36Alex (Alexander)]

Thank you! Sometimes things can be so easy - if one knows how to handle.

I just got a little additional question:
Can I get the badges in one line again?

[JustinG]

@e36Alex

Can I get the badges in one line again?

Not nearly as easily. I don’t think there’s a direct f7 variable for the margin around the badge which means that if you are using the badge that’s built-in to the oh-list-item you can’t impact it’s position from the list item properties. The best solution here will be to forego using the list items built-in badge for any item where you want to change its position and instead adding your own badge to the list item’s after slot. Something like this:

    - component: oh-list-item
      config:
        title: Custom Badge Demo
      slots:
        after:
          - component: f7-badge
            config:
              style:
                margin-right: 15px #<--This will now control the position of the badge directly
            slots:
              default:
                - component: Label
                  config:
                    text: Badge Text

If you added that margin-right: 15px directly to the list item, it will also appear to move the badge but that’s because the right side of the list item as moved and you’ll see the result as the line between that item and the one below also doesn’t cross all the way to the edge of the list.