Making a widget popup/popover another widget

fkhairallah · January 4, 2021, 12:23pm

I’m experimenting with migrating my UI to OH3 pages and I’m wondering if anyone can share some YAML code on how to create a custom widget that popup/popover another widget when clicked.

Ibex · January 13, 2021, 8:59pm

I tried to do the same in one widget, however, it did not work. After splitting it in two widget - the main widget and the popover widget - it worked. The related question as well as the YAML code can be found here:

CustomWidget PopOver - Item from parameter does not use the configuration of the specific widget, but the last widget

fkhairallah · January 18, 2021, 3:34pm

Ibex – thanks for the reply. I started with the two widget concept but was unable to get the action: popup to work. I don’t have a button cell to attach it to, so I was using the entire card. My code is below:

uid: weatherforecast

tags: []
props:
parameters:
- description: Prefix for the items with the data
label: Item prefix
name: itemPrefix
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 31, 2020, 6:58:57 AM
component: f7-card
config:
action: popup
actionModal: widget:weather_onecall

slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-row
config:
class:
- display-flex
- justify-content-flex-end
- align-content-stretch
- align-items-center
slots:
default:
- component: Label
config:
text: “=items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayCondition’].state”
style:
fontSize: 24px
- component: f7-row
config:
class:
- display-flex
- justify-content-space-between
- align-content-stretch
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: “=(items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘01d’) ? ‘sun_max’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘01n’) ? ‘moon_stars’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘02d’) ? ‘cloud_sun’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘02n’) ? ‘cloud_moon’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘03d’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘03n’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘04d’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘04n’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘09d’) ? ‘cloud_heavyrain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘09n’) ? ‘cloud_heavyrain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘10d’) ? ‘cloud_sun_rain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘10n’) ? ‘cloud_moon_rain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘11d’) ? ‘cloud_sun_bolt’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘11n’) ? ‘cloud_moon_bolt’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘13d’) ? ‘cloud_snow’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘13n’) ? ‘cloud_snow’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘50d’) ? ‘cloud_fog’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘50n’) ? ‘cloud_fog’ : ‘’”
color: blue
size: 50
class:
- margin-horizontal
- float-left
- component: Label
config:
text: “=items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localCurrentTemperature’].displayState”
style:
fontSize: 36px
fontWeight: 600
- component: f7-row
config:
class:
- display-flex
- justify-content-space-between
- align-content-stretch
- align-items-center
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: “=(items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘01d’) ? ‘sun_max’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘01n’) ? ‘moon_stars’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘02d’) ? ‘cloud_sun’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘02n’) ? ‘cloud_moon’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘03d’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘03n’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘04d’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘04n’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘09d’) ? ‘cloud_heavyrain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘09n’) ? ‘cloud_heavyrain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘10d’) ? ‘cloud_sun_rain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘10n’) ? ‘cloud_moon_rain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘11d’) ? ‘cloud_sun_bolt’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘11n’) ? ‘cloud_moon_bolt’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘13d’) ? ‘cloud_snow’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘13n’) ? ‘cloud_snow’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘50d’) ? ‘cloud_fog’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayIconId’].state === ‘50n’) ? ‘cloud_fog’ : ‘’”
color: blue
size: 24
class:
- margin-top
- component: Label
config:
text: “=items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTodayMaxTemp’].displayState”
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: “=(items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTomorrowIconId’].state === ‘01d’) ? ‘sun_max’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTomorrowIconId’].state === ‘01n’) ? ‘moon_stars’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTomorrowIconId’].state === ‘02d’) ? ‘cloud_sun’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTomorrowIconId’].state === ‘02n’) ? ‘cloud_moon’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTomorrowIconId’].state === ‘03d’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTomorrowIconId’].state === ‘03n’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTomorrowIconId’].state === ‘04d’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTomorrowIconId’].state === ‘04n’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTomorrowIconId’].state === ‘09d’) ? ‘cloud_heavyrain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTomorrowIconId’].state === ‘09n’) ? ‘cloud_heavyrain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTomorrowIconId’].state === ‘10d’) ? ‘cloud_sun_rain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTomorrowIconId’].state === ‘10n’) ? ‘cloud_moon_rain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTomorrowIconId’].state === ‘11d’) ? ‘cloud_sun_bolt’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTomorrowIconId’].state === ‘11n’) ? ‘cloud_moon_bolt’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTomorrowIconId’].state === ‘13d’) ? ‘cloud_snow’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTomorrowIconId’].state === ‘13n’) ? ‘cloud_snow’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTomorrowIconId’].state === ‘50d’) ? ‘cloud_fog’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTomorrowIconId’].state === ‘50n’) ? ‘cloud_fog’ : ‘’”
color: blue
size: 24
class:
- margin-top
- component: Label
config:
text: “=items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastTomorrowMaxTemp’].displayState”
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: “=(items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay2IconId’].state === ‘01d’) ? ‘sun_max’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay2IconId’].state === ‘01n’) ? ‘moon_stars’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay2IconId’].state === ‘02d’) ? ‘cloud_sun’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay2IconId’].state === ‘02n’) ? ‘cloud_moon’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay2IconId’].state === ‘03d’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay2IconId’].state === ‘03n’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay2IconId’].state === ‘04d’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay2IconId’].state === ‘04n’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay2IconId’].state === ‘09d’) ? ‘cloud_heavyrain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay2IconId’].state === ‘09n’) ? ‘cloud_heavyrain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay2IconId’].state === ‘10d’) ? ‘cloud_sun_rain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay2IconId’].state === ‘10n’) ? ‘cloud_moon_rain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay2IconId’].state === ‘11d’) ? ‘cloud_sun_bolt’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay2IconId’].state === ‘11n’) ? ‘cloud_moon_bolt’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay2IconId’].state === ‘13d’) ? ‘cloud_snow’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay2IconId’].state === ‘13n’) ? ‘cloud_snow’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay2IconId’].state === ‘50d’) ? ‘cloud_fog’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay2IconId’].state === ‘50n’) ? ‘cloud_fog’ : ‘’”
color: blue
size: 24
class:
- margin-top
- component: Label
config:
text: “=items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay2MaxTemp’].displayState”
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: “=(items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay3IconId’].state === ‘01d’) ? ‘sun_max’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay3IconId’].state === ‘01n’) ? ‘moon_stars’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay3IconId’].state === ‘02d’) ? ‘cloud_sun’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay3IconId’].state === ‘02n’) ? ‘cloud_moon’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay3IconId’].state === ‘03d’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay3IconId’].state === ‘03n’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay3IconId’].state === ‘04d’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay3IconId’].state === ‘04n’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay3IconId’].state === ‘09d’) ? ‘cloud_heavyrain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay3IconId’].state === ‘09n’) ? ‘cloud_heavyrain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay3IconId’].state === ‘10d’) ? ‘cloud_sun_rain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay3IconId’].state === ‘10n’) ? ‘cloud_moon_rain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay3IconId’].state === ‘11d’) ? ‘cloud_sun_bolt’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay3IconId’].state === ‘11n’) ? ‘cloud_moon_bolt’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay3IconId’].state === ‘13d’) ? ‘cloud_snow’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay3IconId’].state === ‘13n’) ? ‘cloud_snow’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay3IconId’].state === ‘50d’) ? ‘cloud_fog’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay3IconId’].state === ‘50n’) ? ‘cloud_fog’ : ‘’”
color: blue
size: 24
class:
- margin-top
- component: Label
config:
text: “=items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay3MaxTemp’].displayState”
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: “=(items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay4IconId’].state === ‘01d’) ? ‘sun_max’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay4IconId’].state === ‘01n’) ? ‘moon_stars’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay4IconId’].state === ‘02d’) ? ‘cloud_sun’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay4IconId’].state === ‘02n’) ? ‘cloud_moon’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay4IconId’].state === ‘03d’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay4IconId’].state === ‘03n’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay4IconId’].state === ‘04d’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay4IconId’].state === ‘04n’) ? ‘cloud’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay4IconId’].state === ‘09d’) ? ‘cloud_heavyrain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay4IconId’].state === ‘09n’) ? ‘cloud_heavyrain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay4IconId’].state === ‘10d’) ? ‘cloud_sun_rain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay4IconId’].state === ‘10n’) ? ‘cloud_moon_rain’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay4IconId’].state === ‘11d’) ? ‘cloud_sun_bolt’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay4IconId’].state === ‘11n’) ? ‘cloud_moon_bolt’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay4IconId’].state === ‘13d’) ? ‘cloud_snow’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay4IconId’].state === ‘13n’) ? ‘cloud_snow’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay4IconId’].state === ‘50d’) ? ‘cloud_fog’ : (items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay4IconId’].state === ‘50n’) ? ‘cloud_fog’ : ‘’”
color: blue
size: 24
class:
- margin-top
- component: Label
config:
text: “=items[((props.itemPrefix === undefined) ? ‘’ : props.itemPrefix) + ‘localForecastDay4MaxTemp’].displayState”