Set property to true/false by expression not possible

I try to open and close a popover by settings its property opened to true or false depending on an item’s state. The expression is not the problem.
However, it is not possible to set this property to true or false with an expression.

I tried various test expressions like:
'=("1" == "1") ? "true" : "false"'
'=("1" == "1") ? true : false'
'=("1" == "1") ? "1" : "0"'
'=("1" == "1") ? 1 : 0'
those are always true and the expression‘s result is also „true“. but the popover does not appear. Probably a type conversion to bool problem?

If you write directly into yaml code
opened: true
the popover appears and disappears when changing to
opened: false
So the code is doing fine.

What am I doing wrong?

shortened yaml

uid: PopoverTest
component: oh-button
config:
  text: Testbutton
slots:
  default:
    - component: f7-popover
      config:
        opened: #expression required here which results in false
        style:
          max-width: 400px
          min-width: 270px
      slots:
        default:
          - component: oh-label-card
            config:
              title: TestPopover

Hey @Oliver2

first of all, thank you - I’ve learned something that I wasn’t aware of until I read your question.
I thought it won’t be possible currently to open/close popups or popovers depending on item states - now I know, it is. :slight_smile:

Sadly the popover seems to have some problems finding the element (which the class is applied to) if the item is triggered via item state - so it will open at the 0,0 location (top left corner) of the screen, if no action was triggered from the action element before.

But popups for example, would work flawlessly here.
Be aware, that the action will only trigger if the item value changes and not if the item gets update to the same value over and over again

uid: PopoverTest
component: f7-block
slots:
  default:
    - component: oh-button
      config:
        action: popover
        text: Testbutton
        popoverOpen: .testpopover
      slots:
        default:
          - component: f7-popover
            config:
              opened: '=(items.testItem.state === "1") ? true : false'
              class: testpopover
            slots:
              default:
                - component: oh-label-card
                  config:
                    title: TestPopover

btw: Maybe this was your intention here - with this mechanic, you’d be able to find a solution for the question we discussed here

1 Like

He Rainer,
thanks again for your help.
But I am not sure if I understand you.
My problem is not the layout, where the popover appears on the screen.
I simply can’t open and close it automatically.

whene entering opened: true in yaml code it opens and when entering opened: false it closes.
the basics are working fine. I do not even need a button to trigger the popover.

the only thing is, no expression is working which passes true or false to the property. unfortunately your code is also not working…

PS: yes, right. that was exactly the use case behind this post.

Ok, maybe it’s me then, who is not understanding your question correctly :slight_smile:

I thought the “1” in your expression…

…was just a placeholder for an item which state should open your popover.

This is where I replaced the (“1” == “1”) (which - should - always be true) with the testItem expression (items.YOURITEM.state === "1")

If you change the state of YOURITEM to 1 now your popover should appear.


To be honest, I don’t really understand why this expression '=("1" == "1") ? true : false', which is correct and should be return true, doesn’t work… But if you use a real item state here, it will… Maybe @ysc have a proper explanation here?!

I see - my fault…
This is just a test expression. It is always true, but the popover never appears.
In this post it is not about to the expression itself. It is about the problem that the expression cannot handover its result (true or false) to the property.

edited the first post to make things clearer

Hi Rainer,
this popover can be launched completely independent from any button click - purley triggered by an item or an event - very powerful!

Copy paste this widget and you will see when typing “false” while the popover is active, the popover closes automatically …
IF it would work with an expression that would be fantastic!
Let’s wait and see if yannick finds some time to answer.

uid: CamPopover2
component: f7-popover
config:
  closeByBackdropClick: true
  closeByOutsideClick: true
  opened: true
slots:
  default:
    - component: oh-label-card
      config:
        label: "Test"

Hey @Oliver2

I think theres still a slight missunderstanding here (don’t know anymore on which site tbh :smiley:)
If you exchange your item-name with YOURITEM and give it the update ‘1’, it’ll work already (with the above mentioned limitations)

uid: CamPopover2
component: oh-button
config:
  action: popover
  popoverOpen: .testpopover
slots:
  default:
    - component: f7-popover
      config:
        closeByBackdropClick: true
        closeByOutsideClick: true
        opened: '=(items.YOURITEM.state === "1") ? true : false'
        class: testpopover
      slots:
        default:
          - component: oh-label-card
            config:
              label: Test

Isn’t it that, what you want to achieve?!

Greetings!

:slight_smile: ok. getting closer now. basically it is exactly how it should be. however, it is not working on my end.
the testItem you created is of type number, right?
I was using exactly your code. Log file shows change of testItem. But nothing happened.

What version are you running?

It’s a String item

I’m running snapshot build #2150

It works in the expression tester?

image

Yeah, it does… - but didn’t work inside the above widget code. I quickly checked it with the ‘visible’ prop inside a random f7-card - and it works there too. So no general expression problem.

Maybe it does not work in the case of this widget here, because the opened config parameter only reacts on changes and not on frequent, identical, updates. But not that big of a problem, I think…

I just tested it again. We can say that:
everything works fine if the item is of type string with the following code:

opened: '=(items.testItem.state === "1") ? true : false'

(as Rainer suggested)

However, it does not work with a switch item and the following code:

opened: '=(items.testItem.state === "ON") ? true : false'

replacing === by == made no difference

Hey Rainer,
just wanted to thank you for your support. At least, we got a popover working depending on an item’s state. Currently we seem to need a string item instead of a switch item.
worst case I need to rewrite some rules and change the required items.

@ysc : from my side I do not regard this as an issue, as there is a workaround. so no priority…

ok. here we go: I think there is a bug in f7-popover.
opened: '=(items.testItem.state == "ON") ? true : false'
works perfectly in f7-popUP element but not in f7-popOVER