Is there any way to have a popover open with a long press?

They are new enough that they have not made it into the docs yet, as far as I know. However, very little documentation is required.

  1. They are exactly the same as the regular actions so any configuration for the regular actions applies to the taphold actions and this also means you can just use the action documentation under any of the standard action components.
  2. Using the MainUI widget editor, ctrl + space, under a config heading brings up the available options and you will see them and all the sub-options listed for the components where you can use them.
1 Like

I have actually tried in oh3.4 to implement the taphold action but nothing happens.
The syntax is accepted, but when I keep pressed the cell nothing happens.
Here’s the yaml code

component: oh-cell
config:
  action: toggle
  actionCommand: ON
  actionCommandAlt: OFF
  actionItem: gLuci_Tavolo_Soggiorno_Switch
  actiontaphold: popup
  actiontapholdModal: widget:white_light_v1
  actiontapholdModalConfig:
    brightness: gLuci_Tavolo_Soggiorno_Bright
    header: Configura lampada soggiorno
    temperature: gLuci_Tavolo_Soggiorno_WTemp
  color: blue
  footer: luci tavolo
  header: "=items.gLuci_Tavolo_Soggiorno_Switch.state === 'ON'  ? 'Click per
    spegnere' : 'Click per accendere'"
  icon: "=items.gLuci_Tavolo_Soggiorno_Switch.state === 'ON'  ?
    'f7:lightbulb_fill' : 'f7:lightbulb'"
  title: "=items.gLuci_Tavolo_Soggiorno_Switch.state === 'ON'  ? 'Accese' : 'Spente'"

What am I doing wrong?

Edit: Nothing appears in logs.
Edit 2: possibly it must be enabled somewhere? See link
Edit3: I figured out that taphold is only possible for buttons and cards, not generic cells. The right syntax is written in the docs

Hi @Lionello_Marrelli Did you get anywhere with this? I am trying to taphold_actionPage and navigate elsewhere but I keep just getting the same popup and it’s not navigating.

component: oh-label-cell
config:
  action: toggle
  actionCommand: ON
  actionCommandAlt: OFF
  actionItem: Garage_Thermostat_Mode
  taphold_actionPage: page:Garage_Heating
  color: "=(items.Garage_Thermostat_Mode.state == 'ON') ? 'orange' : 'grey'"
  footer: ='Setpoint'+':'+' '+items. Garage_Thermostat_Setpoint.state
  item: Garage_Thermostat_Mode
  label: "=(items.Garage_Thermostat_Mode.state == 'ON') ? \"Requesting\" : \"Not
    Requesting\""
  on: true
  subtitle: ='Garage Air'+' '+items.GarageSonoff_GarageTemperature.state
  title: Garage Thermostat
slots: null

I get this standard popup

I would think it is probably something I am doing wrong, maybe something to do with the slots?
I’ve been following this LINK

Slots are not the problem. The two problems are 1) you are trying to use the taphold actions on an oh-label-cell and this function is not available there, 2) even if it were available, you have not completely defined the taphold action, you have only used the taphold_actionPage. Just like with the regular action, you need to actually tell it which kind of action you want it to perform using taphold_action or it won’t know to look for the correct additional properties.

Are there any plans to introduce the taphold function for cells and not only cards? Or is there some limitation not allowing this enhancement?

Simply use your oh-cell and add an oh-button in its default slot
100% width, and transparent color)
Then both tap and tapnhold are available

Thanks @JustinG for the kick in the right direction! I’m still messing about finding my way around OH pages.
Just to echo @Lionello_Marrelli about if taphold could be made available for these page cell elements. I am guessing there is something fundamental that doesn’t allow for this?

No limitations, as I understand it: Taphold action on oh-label-card and oh-button by tarag · Pull Request #1313 · openhab/openhab-webui · GitHub

Don’t know if anyone intends an expansion, but this PR was from @tarag so maybe he could comment on that.

I tried to follow your suggestions and I obtain a popup offering a button that responds differently to short and long click. Not exactly what happens to cards, but very close.
Is there some other option to set, in order to have the action and taphold action being done immediately?

component: oh-cell
config:
  title: oh-Cell 1
  header: header
  subtitle: subtitle
  footer: footer
slots:
  default:
    - component: oh-button
      config:
        width: 100%
        color: transparent
        text: Button
        action: toggle
        actionCommand: ON
        actionCommandAlt: OFF
        actionItem: gLuci_Tavolo_Soggiorno_Switch
        taphold_action: popup
        taphold_actionModal: widget:white_light_v1
        taphold_actionModalConfig:
          brightness: gLuci_Tavolo_Soggiorno_Bright
          header: Configura Luci Tavolo soggiorno
          temperature: gLuci_Tavolo_Soggiorno_WTemp

I think I get what you are suggesting thanks @Oliver2 I just lack to knowledge to apply it. For now, I have found another way, by adding the controls I need into the popup slots from the page I am trying to navigate to.

.

He already did. Have a look here

I know what you mean. I also like the nice style of an expanded card. Then go for oh-label-card which also supports taphold. It is hidden in the advanced config menu.

Set the cell’s expandable property to false.

Actually, adding expandable: false to the oh-cell config does not allow the button to appear and no action is performed on click or long-click.

In any case, let me thank you (@JustinG and @Oliver2 ) for all your suggestions.

Sorry, forgot to add that you’ll also have to move the button from the default slot to the background slot

You have to make sure that your button covers the whole space of the containing cell.
add border: solid 1px red to the button’s style and see where your button is.
@JustinG Justin, do you think the button still responds to a tap or tapnhold if it resides in the background slot?
Try also to add height: 100% to the button

Yep, that shouldn’t be a problem.

Alas, there’s a <div> element that doesn’t have a set height between the card and the button, so height: 100% will not work, you’ll have to make that height: 120px which is the fixed height of the cell.

After several trial and errors I figured out how to correctly implement the suggestions. Let me write it down here for future reference for those who will happen to come to this thread.
A note of warning: while randomly adding an --f7-button-height in a wrong section, it turned out that the whole ui was not operational anymore. I had to stop openhab and remove the line added from the jsondb/uicomponents_ui_page.json.

component: oh-cell
config:
  footer: footer
  header: header
  subtitle: subtitle
  title: oh-Cell 1
slots:
  background:
    - component: oh-button
      config:
        style:
          height: 120px
          color: transparent
        text: Button
        width: 100%
        action: toggle
        actionCommand: ON
        actionCommandAlt: OFF
        actionItem: gLuci_Tavolo_Soggiorno_Switch
        taphold_action: popup
        taphold_actionModal: widget:white_light_v1
        taphold_actionModalConfig:
          brightness: gLuci_Tavolo_Soggiorno_Bright
          header: Configura Luci Tavolo soggiorno
          temperature: gLuci_Tavolo_Soggiorno_WTemp

Hi all, this long-tap feature looks amazing. I am currently trying to build my own widget and merge this one with a simple-toggle I am using in several use-cases already with a HomeKit-like look:

Those are based on an f7-card. Unfortunately I couldn’t make the above work with an f7-card (background does not work properly). On the other hand the oh-cell seems to be limited in regards to default slots that are shown. When using the below code it looks good initially, but does not take the default slots into account at all and the Cell has no text or icons, while the background slot still works. Does anyone have a clue why this is the case?

uid: Schalter_LongTap
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 17, 2024, 3:46:26 PM
component: oh-cell
slots:
  default:
    - component: f7-icon
      config:
        f7: '=(items[props.item].state === "ON") ? "lightbulb_fill" : "lightbulb"'
        size: 24
        margin: 0px
        padding: 0px
        style:
          color: '=(items[props.item].state === "ON") ? "rgba(255,234,5,1)" : "gray"'
    - component: Label
      config:
        text: =props.prop1
        style:
          font-size: 15px
          font-weight: 500
          margin-left: 0px
          margin-top: 20px
          padding: 0px
          color: '=(items[props.item].state === "ON") ? "black" : "rgba(0, 0, 0, 0.5)"'
    - component: Label
      config:
        text: '=(items[props.item].state === "ON") ? "AN" : "AUS"'
        style:
          font-size: 15px
          font-weight: 500
          margin-left: 0px
          margin-top: 0px
          padding: 0px
          color: '=(items[props.item].state === "ON") ? "red" : "rgba(0, 0, 0, 0.5)"'
  background:
    - component: oh-button
      config:
        style:
          height: 120px
          color: transparent
          box-shadow: '=(items[props.item].state === "ON") ? "10px 10px 28px 1px rgba(255,234,5,0.3)" : "var(--f7-card-expandable-box-shadow)"'
          --f7-button-hover-bg-color: rgba(255, 255, 159, 1)
          --f7-button-pressed-bg-color: rgba(237, 233, 157,1)
          --f7-button-bg-color: '=(items[props.item].state === "ON") ? "rgb(255,255,255)" : "rgba(228,228,228,0.9)"'
        text: Button
        width: 100%
        action: toggle
        actionCommand: ON
        actionCommandAlt: OFF
        actionItem: =props.item
        taphold_action: popup
        taphold_actionModal: widget: Test

Thanks!
Jonathan

The oh-cell is based on the f7-card but, as with al of the oh- type components, it’s been highly modified to be usable in a “low code”. This means that the configurations are completely different. To see how this might work with the f7-card you can check out the f7 docs:

With the oh-cell the default slot has been reconfigured to place components only on the area of the card that becomes visible when you expand the card.

1 Like

Thanks for the swift reply, that’s what I thought.
I ended up not using an f7-card, but the oh-button directly.
I guess it matches the requirements of the above as well, but without having a cell and a button in the background. Short and long tap are working quite well:

uid: Schalter_LongTab
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 18, 2024, 5:30:26 PM
component: oh-button
config:
  width: 100%
  action: toggle
  actionCommand: ON
  actionCommandAlt: OFF
  actionItem: =props.item
  taphold_action: popup
  taphold_actionModal: widget:darkLiquid_card
  style:
    border-radius: var(--f7-card-expandable-border-radius)
    height: 120px
    box-shadow: '=(items[props.item].state === "ON") ? "10px 10px 28px 1px rgba(255,234,5,0.3)" : "var(--f7-card-expandable-box-shadow)"'
    --f7-button-hover-bg-color: rgba(255, 255, 159, 1)
    --f7-button-pressed-bg-color: rgba(237, 233, 157,1)
    --f7-button-bg-color: '=(items[props.item].state === "ON") ? "rgb(255,255,255)" : "rgba(228,228,228,0.9)"'
    --f7-button-text-transform: none
slots:
  default:
    - component: f7-icon
      config:
        f7: '=(items[props.item].state === "ON") ? "lightbulb_fill" : "lightbulb"'
        size: 25
        style:
          color: '=(items[props.item].state === "ON") ? "rgba(255,234,5,1)" : "gray"'
          margin: 0px
          margin-left: 0px
          margin-top: 5px
          padding: 5px 10px
          display: flex
    - component: Label
      config:
        text: =props.prop1
        style:
          font-size: 15px
          font-weight: 500
          margin-left: 15px
          margin-top: 5px
          padding: 0px
          text-align: start
          color: '=(items[props.item].state === "ON") ? "black" : "rgba(0, 0, 0, 0.5)"'
    - component: Label
      config:
        text: '=(items[props.item].state === "ON") ? "AN" : "AUS"'
        style:
          font-size: 15px
          font-weight: 500
          margin-left: 0px
          margin-top: 0px
          padding: 0px 15px
          color: '=(items[props.item].state === "ON") ? "red" : "rgba(0, 0, 0, 0.5)"'
          text-align: start