Modify state description popover

Add-ons UIs
,
1

Hi all,

I spent the whole day trying to find a solution for following requirement:
I have a list widget that is used the changed the operation mode of the heating. Possible options are coming from the state description of the item. This is working perfectly with the oh-label-item widget and the action=options.

Bildschirmfoto vom 2022-11-15 17-18-33

But now I want to change a) the text from “Canel” to a localized version (“Abbrechen” in german) and b) add one more option “Details” to open a new page with detailed configuration options of the heating.

I understood this is not possible and tried to use popover as the action and open a custom widget as popover. This is working basically, but I can not get a look and feel like for the build in options. Esp. the position is completely different and when I try to modify it with classes and CSS I always break everything :roll_eyes: Another option might be to use f7-actions but can’t get this to work at all.

Thus having said I’m not a web developer at all so asking if someone has solved a similar task already and can give some hints or examples.

Thanks in advance

2

The easiest way to replicate that appearance is to use an oh-list and populate that list with oh-list-item components each of which has its listButton property set to true (then, of course, set the textColor property to red for the Abbrechen list item). Here’s one example where I use this sort of thing in a popover:

    - component: f7-popover
      config:
        class:
          - tod-menu
      slots:
        default:
          - component: oh-list
            slots:
              default:
                - component: oh-list-item
                  config:
                    listButton: true
                    action: popup
                    actionModal: widget:popup_tod_wake_up
                    popoverClose: true
                    title: Wake Up
                - component: oh-list-item
                  config:
                    listButton: true
                    action: popup
                    actionModal: widget:popup_tod_morning
                    popoverClose: .tod-menu
                    title: Morning
                - component: oh-list-item
                  config:
                    listButton: true
                    action: popup
                    actionModal: widget:popup_tod_afternoon
                    popoverClose: true
                    title: Afternoon
                - component: oh-list-item
                  config:
                    listButton: true
                    action: popup
                    actionModal: widget:popup_tod_evening
                    popoverClose: true
                    title: Evening
                - component: oh-list-item
                  config:
                    listButton: true
                    popoverClose: true
                    popupOpen: .popup.pop-night-tod
                    title: Bedtime

And that produces this:
image

1 Like
3

Thanks a lot @JustinG
With your help I made a big step forward. Just playing with some style properties to bring to popover to the bottom of the screen like in the options popover.

Only thing that doesn’t work is closing the popover by clicking one of the options. Both options from your sample code (popoverClose: true / popoverClose: .<class_name>) have no effect. Any idea on this?

Current status:

Bildschirmfoto vom 2022-11-15 22-05-29
Bildschirmfoto vom 2022-11-15 22-05-29814×248 10.5 KB 

uid: list_heizung
tags:
  - v2
props:
  parameters:
    - description: Label für das Widget
      label: Titel
      name: titel
      required: true
      type: TEXT
    - context: item
      description: Item zur Wahl der Betriebsart
      label: Item Heizung Betriebsart
      name: item_mode
      required: true
      type: TEXT
    - context: item
      description: Item zur Anzeige des Istwert
      label: Item Heizung Istwert
      name: item_ist
      required: true
      type: TEXT
    - context: item
      description: Item zur Anzeige und Anpassung des Sollwert
      label: Item Heizung Sollwert
      name: item_soll
      required: true
      type: TEXT
    - context: item
      description: Item fzur Anzeige des aktuellen Stellwerts
      label: Item Heizung Stellwert
      name: item_stell
      required: false
      type: TEXT
    - context: item
      description: Status-Item Ventil aktiv
      label: Item Heizung Ventilstatus
      name: item_ventil
      required: false
      type: TEXT
    - context: item
      description: Diagnose-Item des Heizkreises
      label: Item Heizung Diagnose
      name: item_diagnose
      required: false
      type: TEXT
    - context: item
      description: Item zur Anzeige von einer Störung des Heizkreises
      label: Item Heizung Störung
      name: item_error
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Nov 15, 2022, 9:49:25 PM
component: oh-list
config:
  media-list: true
slots:
  default:
    - component: oh-label-item
      config:
        action: options
        actionItem: =props.item_mode
        icon: iconify:mdi:home-thermometer
        iconColor: '=(items[props.item_ventil].state == "OPEN") ? "red" : "black"'
        item: =props.item_mode
        subtitle: '= "Ist " + items[props.item_ist].displayState + " | Soll " + items[props.item_soll].state '
        title: =props.titel
    - component: oh-label-item
      config:
        icon: iconify:mdi:home-thermometer
        iconColor: '=(items[props.item_ventil].state == "OPEN") ? "red" : "black"'
        item: =props.item_mode
        subtitle: '= "Ist " + items[props.item_ist].displayState + " | Soll " + items[props.item_soll].state '
        title: =props.titel
        action: popover
        popoverOpen: .select_mode
    - component: f7-popover
      config:
        class:
          - select_mode
        style:
          overflow: auto
          width: 480px
          position: absolute
          
         
      slots:
        default:
          - component: oh-list
            slots:
              default:
                - component: oh-repeater
                  config:
                    sourceType: itemStateOptions
                    itemOptions: =props.item_mode
                    for: option
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          title: =loop.option.label
                          action: command
                          actionItem: =props.item_mode
                          actionCommand: =loop.option.value
                          listButton: true
                          popoverClose: true
                - component: oh-list-item
                  config:
                    title: Abbrechen
                    listButton: true
                    color: red
                    popoverClose: true
4

Ah yes, sorry I forgot those were there. This version of the popover doesn’t need to close on click and those were holdovers from an earlier version. The problem you are encountering is that when listButton is true, the popoverClose etc. properties actually aren’t passed through to the underlying f7-list-button so they won’t work in this case. It becomes a just a little more complex to get the same styling if you want to have the popover close on click. You have to replace the oh-list-item with an oh-link inside of an f7-list-button like this:

- component: f7-list-button
  slots:
    default:
      - component: oh-link
        config:
          action: popup
          actionModal: widget:popup_tod_wake_up
          popoverClose: true
          text: Wake Up
          textColor: blue

Note: now you’ll need to add the textColor: blue because for the link the default color is red.

5

Works great. Thanks :raised_hands: