# Add a confirmation popup in a widget

**URL:** <https://community.openhab.org/t/add-a-confirmation-popup-in-a-widget/162436>\
**Category:** Widgets\
**Created:** [February 12, 2025, 3:20pm UTC](https://community.openhab.org/t/add-a-confirmation-popup-in-a-widget/162436 "2025-02-12T15:20:19Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![lpn](https://community.openhab.org/user_avatar/community.openhab.org/lpn/32/108684_2.png) [@lpn](https://community.openhab.org/u/lpn)\
**Post date:** [February 12, 2025, 3:20pm UTC](https://community.openhab.org/t/add-a-confirmation-popup-in-a-widget/162436/1 "2025-02-12T15:20:19Z")

</div>

Hello,

I am using the garage door widget from rlkoshak (thanks!) and I would like to add a confirmation popup. This is in case I accidently click on the widget. Here is the code:

```yaml
uid: rlk_garagedoor_list
tags:
  - list
  - garagedoor
props:
  parameters:
    - description: Door name
      label: Name
      name: name
      required: false
      type: TEXT
    - context: item
      description: Control Item
      label: Control Item
      name: control_item
      required: false
      type: TEXT
    - context: item
      description: Sensor Item
      label: Sensor Item
      name: sensor_item
      required: false
      type: TEXT
  parameterGroups: []
component: oh-list-item
config:
  icon: '=(items[props.sensor_item].state == "CLOSED") ? "f7:house" : "f7:house_fill"'
  iconColor: '=(items[props.sensor_item].state == "CLOSED") ? "green" : "red"'
  title: =props.name
  action: command
  actionItem: =props.control_item
  actionCommand: ON
  badgeColor: '=(items[props.sensor_item].state == "CLOSED") ? "green" : "red"'
  badge: '=(items[props.sensor_item].state == "CLOSED") ? "closed" : "open"'

```

I did find some info about popups in widgets but I have no idea how to apply the solutions I found to this widget, I am a newbie with widgets.

Thanks for the help.

---

<div class="post-metadata">

**Author:** ![rlkoshak](https://community.openhab.org/user_avatar/community.openhab.org/rlkoshak/32/75251_2.png) [@rlkoshak](https://community.openhab.org/u/rlkoshak)\
**Post date:** [February 12, 2025, 3:44pm UTC](https://community.openhab.org/t/add-a-confirmation-popup-in-a-widget/162436/2 "2025-02-12T15:44:37Z")

</div>

I’ve not done this but I think what you need at a minimum is to change the action to [`popup`](https://www.openhab.org/docs/ui/components/oh-list-item.html#action) and then add the `actionModal` properties which point to the widget to show when it’s clicked. That widget will need to be defined separately and in that widget you’ll need two buttons, one which cancels and does nothing but close the dialog and the other which commands the Item.

Beyond that general outline I’m not going to be of much help. It’s not something I’ve tried.

---

<div class="post-metadata">

**Author:** ![lpn](https://community.openhab.org/user_avatar/community.openhab.org/lpn/32/108684_2.png) [@lpn](https://community.openhab.org/u/lpn)\
**Post date:** [February 12, 2025, 4:07pm UTC](https://community.openhab.org/t/add-a-confirmation-popup-in-a-widget/162436/3 "2025-02-12T16:07:33Z")

</div>

Thanks, I will try to figure this out with your suggestion. When you’re a beginner with widgets and YAML it’s not easy to understand all this.

---

<div class="post-metadata">

**Author:** ![JustinG](https://community.openhab.org/user_avatar/community.openhab.org/justing/32/55948_2.png) [@JustinG](https://community.openhab.org/u/JustinG)\
**Post date:** [February 12, 2025, 4:42pm UTC](https://community.openhab.org/t/add-a-confirmation-popup-in-a-widget/162436/4 "2025-02-12T16:42:17Z")

</div>

If you are on a recent OH4 version, then you can do this automatically just by using the `actionConfirmation` property.

> **[oh-button - Button](https://www.openhab.org/docs/ui/components/oh-button.html#actionConfirmation)**
>
> Button performing an action

If you have something more complex than a simple confirmation dialog box, then you will need to go with the `action: popup` settings. You can find description and examples here:

> **[oh-button - Button](https://www.openhab.org/docs/ui/components/oh-button.html#action-popup-action-popover-action-sheet)**
>
> Button performing an action

---

<div class="post-metadata">

**Author:** ![lpn](https://community.openhab.org/user_avatar/community.openhab.org/lpn/32/108684_2.png) [@lpn](https://community.openhab.org/u/lpn)\
**Post date:** [February 12, 2025, 4:58pm UTC](https://community.openhab.org/t/add-a-confirmation-popup-in-a-widget/162436/5 "2025-02-12T16:58:50Z")

</div>

> [@JustinG](#):
>
> `actionConfirmation`

Just tried it, that was so easy! I should have looked it up in the docs …

Thanks!

---

<div class="post-metadata">

**Author:** ![Mark\_VG](https://community.openhab.org/letter_avatar_proxy/v4/letter/m/2acd7d/32.png) [@Mark\_VG](https://community.openhab.org/u/Mark_VG)\
**Post date:** [June 16, 2026, 8:38am UTC](https://community.openhab.org/t/add-a-confirmation-popup-in-a-widget/162436/7 "2026-06-16T08:38:08Z")

</div>

I am trying to get the ` actionConfirmation:` to work with an expression with no luck

```auto
  - component: oh-button
    config:
      action: command
      actionCommand: '=(items[loop.zoneBypassed.name.slice(0, -11) + "_Bypassed"].state == "ON") ? "CLEAR_BYPASS" : (items[loop.zoneBypassed.name.slice(0, -11) + "_Bypassed"].state == "OFF") ? "BYPASS" : "BYPASS"'
      actionItem: =loop.zoneBypassed.name.slice(0, -11) + "_Communicator_Command"
      actionConfirmation: '=(items[vars.selectedPartitionP + "_PartitionState"].state === "Armed") ? "{ "type": "dialog", "title": "Partition Armed", "text": "Partition Armed. Cannot Bypass Zones." }" : false'

```

Basically just want the confirmation is an item has a state, otherwsie no conformation required.

Just can’t get the exprerssion to work.

Any ideas would be greatly appreciated.  
Mark

---

<div class="post-metadata">

**Author:** ![JustinG](https://community.openhab.org/user_avatar/community.openhab.org/justing/32/55948_2.png) [@JustinG](https://community.openhab.org/u/JustinG)\
**Post date:** [June 16, 2026, 3:12pm UTC](https://community.openhab.org/t/add-a-confirmation-popup-in-a-widget/162436/8 "2026-06-16T15:12:11Z")

</div>

> [@Mark\_VG](#):
>
> `"{ "type": "dialog", "title": "Partition Armed", "text": "Partition Armed. Cannot Bypass Zones." }"`

You have put quotes around the object. Your expression is resulting in an error because the attempt to parse that gets you the string `{ ` followed by no operation and a then a call to a variable `type` (which of course doesn’t exist).

---

<div class="post-metadata">

**Author:** ![Mark\_VG](https://community.openhab.org/letter_avatar_proxy/v4/letter/m/2acd7d/32.png) [@Mark\_VG](https://community.openhab.org/u/Mark_VG)\
**Post date:** [June 16, 2026, 3:47pm UTC](https://community.openhab.org/t/add-a-confirmation-popup-in-a-widget/162436/9 "2026-06-16T15:47:21Z")

</div>

> [@JustinG](#):
>
> You have put quotes around the object.

Thank you.

```auto
actionConfirmation: '=(items[vars.selectedPartitionP + "_PartitionState"].state === "Armed") ? "{ "type": "dialog", "title": "Partition Armed", "text": "Partition Armed. Cannot Bypass Zones." }" : false'

```

Gives no error, but does not work. Just nothing happens, not command or anything

```auto
actionConfirmation: '=(items[vars.selectedPartitionP + "_PartitionState"].state === "Armed") ? "'{ "type": "dialog", "title": "Partition Armed", "text": "Partition Armed. Cannot Bypass Zones." }'" : false'

```

Gives error:

```auto
Nested mappings are not allowed in compact mappings at line 1241, column 51:

                              actionConfirmation: '=(items[vars.selectedPartiti…

```

Really confused… Sorry

---

<div class="post-metadata">

**Author:** ![JustinG](https://community.openhab.org/user_avatar/community.openhab.org/justing/32/55948_2.png) [@JustinG](https://community.openhab.org/u/JustinG)\
**Post date:** [June 16, 2026, 4:53pm UTC](https://community.openhab.org/t/add-a-confirmation-popup-in-a-widget/162436/10 "2026-06-16T16:53:05Z")

</div>

> [@Mark\_VG](#):
>
> `"'{ "type": "dialog", "title": "Partition Armed", "text": "Partition Armed. Cannot Bypass Zones." }'"`

Is is more quotes around the object. I had meant to indicate that you want _no_ quotes around it.

> [@Mark\_VG](#):
>
> `Nested mappings are not allowed in compact mappings`

This is always a YAML parser error not a js expression error. This means that somewhere in the value to a property you have a `:` followed by a space which the YAML parser is trying to make into a new `key: value` definition.

When you added single quotes to the expression which already had single quotes around it you didn’t get a string inside another string you got `[string] bunch of stuff in between [second string]` and in that bunch of stuff in between is your object definition which has many `: ` instances that are causing the YAML error.

You’re object shouldn’t be a string anyway. Inside the expression an string is not the same thing as an object. If you’re expression didn’t have errors causing the entire thing to fail you would have gotten a dialog with your object definition as the text of the dialog because that’s what happens when `actionConfirmation` has a string for a value.

I would do this expression like this. Your first requirement is that you want a value to the property only when some test is true. A ternary expression is not the best fit here (it works, but the `when false then false` at the end is extraneous). Actually you just want to use logical AND `&&` as a clean shortcut. In javascript the && operator will always just evaluate the first value initially and return false if that value is false (because AND already cannot be true if the first value is false). If the first value is true then && returns the second value itself (if that value is true then the && is true and if that value is falsy then && is false). So `test && some_value` is always “return `some_value` if test is true otherwise return false”: exactly what you want.

Then you just have to remember that the value you want to return is an object (not a string) and your expressions is

```yaml
actionConfirmation: '=(a == b) && {"key1": "value", "key2": variable + variable2...}'

```

Single quotes around the entire express prevent the YAML parser from getting stuck on the`: ` in the object definition, and there are no quotes around the `{...}` because that would make your object a string instead.

---

<div class="post-metadata">

**Author:** ![Mark\_VG](https://community.openhab.org/letter_avatar_proxy/v4/letter/m/2acd7d/32.png) [@Mark\_VG](https://community.openhab.org/u/Mark_VG)\
**Post date:** [June 16, 2026, 5:29pm UTC](https://community.openhab.org/t/add-a-confirmation-popup-in-a-widget/162436/11 "2026-06-16T17:29:33Z")

</div>

> [@JustinG](#):
>
> `actionConfirmation: '=(a == b) && {"key1": "value", "key2": variable + variable2...}'`

Thanks Justin. Appreciat ethe explanation.

So the following works, so I think my basic object is correct?

```auto
actionConfirmation: '{ "type": "dialog", "title": "Partition Armed", "text": "Partition Armed. Cannot Bypass Zones." }'

```

However obviously always displays the confirmation

Based on your suggestion:

```auto
actionConfirmation: '=(a == b) && {"key1": "value", "key2": variable + variable2...}'

```

I came up with:

```auto
actionConfirmation: '=(items[vars.selectedPartitionP + "_PartitionState"].state == "Armed") && {"type": "dialog", "title": "Partition Armed", "text": "Partition Armed. Cannot Bypass Zones."}'

```

Which works for the false condition, so if the Partition is not Arned.

However when the Partiton is Armed, when the conformation should be displayed, nothing happens, The confirmation does not disply and no error is logged at all.

Thanks

---

<div class="post-metadata">

**Author:** ![JustinG](https://community.openhab.org/user_avatar/community.openhab.org/justing/32/55948_2.png) [@JustinG](https://community.openhab.org/u/JustinG)\
**Post date:** [June 16, 2026, 6:04pm UTC](https://community.openhab.org/t/add-a-confirmation-popup-in-a-widget/162436/12 "2026-06-16T18:04:09Z")

</div>

> [@Mark\_VG](#):
>
> I came up with:
> 
> ```auto
> actionConfirmation: '=(items[vars.selectedPartitionP + "_PartitionState"].state == "Armed") && {"type": "dialog", "title": "Partition Armed", "text": "Partition Armed. Cannot Bypass Zones."}'
> 
> ```
> 
> Which works for the false condition, so if the Partition is not Arned.
> 
> However when the Partiton is Armed, when the conformation should be displayed, nothing happens, The confirmation does not disply and no error is logged at all.

Ok, your expression should have worked so I had to take a quick look at the ui repo. The widget actions were refactored a few months ago and now it looks `actionConfirmation` doesn’t actually process objects directly and only accepts strings. If the string is a JSON string then that string is parsed into an object. This is why your basic test of your object (which you still had set as a string) worked, but the form of the expression I gave you does not. The fix for now is quick. You do not need the single quotes around the entire expression. You only need the single quotes around the object definition itself:

```yaml
actionConfirmation: =(items[vars.selectedPartitionP + "_PartitionState"].state == "Armed") && '{"type": "dialog", "title": "Partition Armed", "text": "Partition Armed. Cannot Bypass Zones."}'

```

@florian-h05 I’m still not 100% solid on reading through typescript quickly, but it looks to me that in the widget action typescript refactor the ability to set the confirm config directly from a JSON (or YAML) object was lost so that now only strings and stringified objects are valid here. Am I correct, and was this intentional?

---

<div class="post-metadata">

**Author:** ![Mark\_VG](https://community.openhab.org/letter_avatar_proxy/v4/letter/m/2acd7d/32.png) [@Mark\_VG](https://community.openhab.org/u/Mark_VG)\
**Post date:** [June 16, 2026, 6:13pm UTC](https://community.openhab.org/t/add-a-confirmation-popup-in-a-widget/162436/13 "2026-06-16T18:13:34Z")

</div>

> [@JustinG](#):
>
> The fix for now is quick. You do not need the single quotes around the entire expression. You only need the single quotes around the object definition itself:

Thanks for your patience Justin. This is way above me now…

```auto
actionConfirmation: =(items[vars.selectedPartitionP + "_PartitionState"].state == "Armed") && '{"type": "dialog", "title": "Partition Armed", "text": "Partition Armed. Cannot Bypass Zones."}'

```

Produces an error as well:

```auto
Nested mappings are not allowed in compact mappings at line 1241, column 51:

                              actionConfirmation: =(items[vars.selectedPartitio…

```

---

<div class="post-metadata">

**Author:** ![JustinG](https://community.openhab.org/user_avatar/community.openhab.org/justing/32/55948_2.png) [@JustinG](https://community.openhab.org/u/JustinG)\
**Post date:** [June 16, 2026, 6:20pm UTC](https://community.openhab.org/t/add-a-confirmation-popup-in-a-widget/162436/14 "2026-06-16T18:20:55Z")

</div>

> [@Mark\_VG](#):
>
> Produces an error as well:

Yeah, sorry, that was just my quick typing without a double check. Just remove all the spaces after any `:` in your object - `"key":"value"`

---

<div class="post-metadata">

**Author:** ![Mark\_VG](https://community.openhab.org/letter_avatar_proxy/v4/letter/m/2acd7d/32.png) [@Mark\_VG](https://community.openhab.org/u/Mark_VG)\
**Post date:** [June 17, 2026, 4:11am UTC](https://community.openhab.org/t/add-a-confirmation-popup-in-a-widget/162436/15 "2026-06-17T04:11:23Z")

</div>

Thank you!

That worked. I should have checked the spaces too 🙂

---

<div class="post-metadata">

**Author:** ![florian-h05](https://community.openhab.org/user_avatar/community.openhab.org/florian-h05/32/117524_2.png) [@florian-h05](https://community.openhab.org/u/florian-h05)\
**Post date:** [June 23, 2026, 8:52am UTC](https://community.openhab.org/t/add-a-confirmation-popup-in-a-widget/162436/16 "2026-06-23T08:52:40Z")

</div>

> [@JustinG](#):
>
> I’m still not 100% solid on reading through typescript quickly, but it looks to me that in the widget action typescript refactor the ability to set the confirm config directly from a JSON (or YAML) object was lost so that now only strings and stringified objects are valid here. Am I correct, and was this intentional?

If support was removed, this wasn’t intentional.  
However looking at the code it should still support a JSON-stringified config object.