In my custom widget I want open on click a window, where is only switch or button
I know how to open a page :
config:
action: navigate
actionPage: page:page_d2fe3a9f6e
but don’t know, how to open a small (not full screen) window with switch or button.
How to do it ?
I think what you are looking for is the popup/popover action:
Popover is the very small overlay that often looks like a cartoon speech balloon. Popup is the small window that opens floating above the main window.
thanks, that’s what I’m searching for.
one additional question.
I tried analyzer :
config:
text: HVAC Ground Floor
fill: true
action: analyzer
actionAnalyzerItems: [ZWaveNode002StellaZThermostaticValve_Sensortemperature, ZWaveNode005StellaZThermostaticValve_Sensortemperature]
But it will open in full screen. Is it also possible open analyzer chart in a smaller window ?
I’ve never tried but I don’t think so.
I suspect you would have to create a widget that contains the chart and then open the widget as a popup.
Only asking to know what all is possible. Main idea was as you are describing.
I have this widget :
- component: oh-icon
config:
text: Open PopOver
outline: true
action: popup
actionModal: page:page_faeb48efb2
icon: sma_pv_2
width: 80%
where page is a chart :
so when icon is clicked, I have a windowed chart:
It’s good. But not clear how to modify to get window with switch
I must create a page only with one switch widget and call this page ?
No, not at all. For something like this there are a couple of other options. If you want to use the same actionModal method, then you can just create a widget with the switch you want and use widget:widget_name in the modal property instead of page:page_name. For more advanced control over what pops up, you can incorporate a f7-popup directly into the widget that you want to be the source of the popup switch.
ok, thanks
I tried to implement f7-popup, but somethink is wrong. Popup will not show
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
width: 50%
slots:
default:
- component: Label
config:
style:
font-size: =(device.desktop)?('2.0vw'):('4.5vw')
font-weight: bold
text-align: center
text: =items[props.Temp_B].state + ' °C'
- component: oh-icon
config:
action: popup
icon: '=((items[props.Relay_status].state == "ON 1") || (items[props.Relay_status].state == "ON 2")) ? "switch-on" : "switch-off"'
popupOpen: .myPopupOpen
style:
margin-top: 10%
width: 20%
slots:
default:
- component: f7-popup
config:
class: myPopupOpen
slots:
default:
- component: oh-toggle
config:
item: =props.item_schalter
- component: oh-image
config:
style:
height: 25px
left: 10px
opacity: 0.7
position: absolute
top: 10px
url: ='/static/icons/' + props.iconimage + '.png'
visible: "=props.iconimage ? true : false"
- component: Label
config:
style:
font-size: 12px
left: 40px
margin-top: 50px
position: absolute
text: "=props.title2 ? props.title2 : ''"
I also tried open widget :
- component: oh-icon
config:
action: popup
popupOpen: .myPopupOpen
icon: '=((items[props.Relay_status].state == "ON 1") || (items[props.Relay_status].state == "ON 2")) ? "switch-on" : "switch-off"'
style:
margin-top: 10%
width: 20%
slots:
default:
- component: f7-popup
config:
class: myPopupOpen
slots:
default:
- component: widget:mywidget
Also not working
only working if I will use :
action: popup
actionModal: page:page_xxxxx
There are two issues that I see, both relating to your use of oh-icon as the interactive element.
f7-popup does not have to be a child of the the element that is calling it. In fact, in this case, it cannot be because an oh-icon doesn’t have any slots, default or otherwise. So right now your popup isn’t showing because it’s not ever even being rendered; the UI just never even looks in for components in slots under an oh-icon. Shift the whole popup structure until it’s aligned with something higher up. I usually just put it as one of the children of the root component after the other regular parts of the widget. Something like this:component: f7-card
config:
...
slots:
default:
- component: some-component
slots:
default:
- component: some-other-component
...
- component: f7-popup
config:
class: some-popup-class
slots:
default:
- component: popup-pieces
...
oh-icon is not one of the widgets that has the .popupOpen property. The popupOpen comes from the f7 framework, so only the components that are modified versions of the f7 components that support this will work here (one of the quick and easy ways to know what options are available is to press ctrl + space when editing the config section of a component and look through the context menu that pops up). oh-link is one of those and that will allow you to put an oh-icon in its default slot. So you probably want something like this:- component: oh-link
config:
popupOpen: .myPopupOpen
slots:
default:
- component: oh-icon
config:
icon: '=((items[props.Relay_status].state == "ON 1") || (items[props.Relay_status].state == "ON 2")) ? "switch-on" : "switch-off"'
style:
margin-top: 10%
width: 20%
Thank you, new inforamtions for me. Also ctrl+space is new for me.
I did a modifications, but still not working.
component: f7-card
config:
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
margin-left: 5px
margin-right: 5px
noShadow: false
padding: 0px
slots:
content:
- component: f7-block
config:
style:
--f7-theme-color: var(--f7-text-color)
margin: 0
padding: 0
slots:
default:
- component: f7-col
config:
style:
align-items: center
display: flex
slots:
default:
- component: oh-link
config:
action: popup
popupOpen: .myPopupOpen
style:
align-items: center
display: flex
flex-direction: column
width: 49.5%
slots:
default:
- component: oh-image
config:
style:
margin: 0px
width: 59%
url: ='/static/pictures/bojler_final_6.png'
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
width: 50%
slots:
default:
- component: Label
config:
style:
font-size: =(device.desktop)?('2.0vw'):('4.5vw')
font-weight: bold
text-align: center
text: =items[props.Temp_B].state + ' °C'
- component: oh-icon
config:
icon: '=((items[props.Relay_status].state == "ON 1") || (items[props.Relay_status].state == "ON 2")) ? "switch-on" : "switch-off"'
style:
margin-top: 10%
width: 20%
- component: f7-popup
config:
class: myPopupOpen
slots:
default:
- component: oh-toggle
config:
item: =props.item_schalter
The code you’ve posted works when I test it. Clicking on the link image opens a popup window with nothing but a toggle switch on it.
What did you expect to happen that you did not see happen?
Sorry, my mistake. Yes, working on click on the left side picture. But I want open a window when I will click on the power icon. So if isn’t working f7 popup, I changed to this :
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
width: 50%
slots:
default:
- component: Label
config:
style:
font-size: =(device.desktop)?('2.0vw'):('4.5vw')
font-weight: bold
text-align: center
text: =items[props.Temp_B].state + ' °C'
- component: oh-icon
config:
action: popup
actionModal: widget:Bojler_control_by_ALDA
icon: '=((items[props.Relay_status].state == "ON 1") || (items[props.Relay_status].state == "ON 2")) ? "switch-on" : "switch-off"'
style:
margin-top: 10%
width: 20%
I call my second widget which will open :
Is there any chance to adjust a size of the opened window ? Now under switch and power icon I have a big black free space.
If you open a popup using this method then I don’t think you have any control over the size of the window that opens. This is meant to be a low-code, one-size-fits-most option. If you want to control the actual size of the popup window then you have to use the f7-popup again. Fortunately you can easily add a widget as a component of its own:
- component: widget:name_of_widget
So you would just make the f7-popup as before and put the widget as a component of that widget. Then you can control the exact size of the popup with height and width styles:
- component: f7-popup
config:
class: example-small-popup
style:
height: 150px
width: 100px
I reworked with oh-link, so now popupOpen is working.
I also implemented
style:
height: 750px
width: 100px
But this isn’t working. Big problem it’s on the cell phone, because it’s opened full screen and no chance to close.
- component: oh-link
config:
action: popup
popupOpen: .myPopupOpen
iconF7: info_circle
iconSize: =(device.desktop)?('3.0vw'):('7.5vw')
style:
margin: 10%
- component: f7-popup
config:
class: myPopupOpen
style:
height: 750px
width: 100px
slots:
default:
- component: oh-image
Your style section is not indented properly under the config key.
Easy enough. Just like there’s a popupOpen property, there’s a popupClose property and it also just takes the css selector of the popup you want to close. So, you just have to add an oh-link to the popup itself that uses popupClose.
Hint: In this case you can also just set popupClose to true instead of the popup selector because it will, by default, cause whatever popup is currently open to close.
Ok, now size mutch better with this code
- component: f7-popup
config:
class: myPopupOpen
style:
height: =(device.desktop)?('40vw'):('80vw')
width: =(device.desktop)?('30vw'):('60vw')
slots:
default:
- component: oh-image
Also much universal for PC/cell phone
Only window isn’t center in the middle of the screen
left and top style settings should give you control over the position of the popup as well.