None of the custom cards will work with that, wondering where that new format comes from. Any information that you can point to so that we can update the code of custom-cards? Has there been any formal announcement on the core side?
Itās been in the core code for almost a year in preparation for future features.
But so far it has never been used.
Thatās why itās also undocumented.
I didnāt even think of custom cards when changing this. Sorry.
But as of now I see no other way to have this functionality without potentially breaking future Home Assistant versions or risk introducing security issues.
Thanks for the link, Iāll look into that for my cards (cc @pollinolas) . But good luck to all the other devs with that change 
Suggestion @thomasloven, to add to the release notes that custom-cards will require to be updated for this to be supported.
6 Likes
I should have been more clear too.
You should only use action: fire-dom-event if you want the action to happen only on the current device.
If you want it on all devices, or a certain device with a given deviceID, you should use action: call-service as usual.
1 Like
If I understand the changes correct. I have to wait till all custom cards will use the fire-dom-event if I want to use the popup within a custom card?
The popup_card method should still work.
https://github.com/thomasloven/hass-browser_mod#replacing-more-info-dialogs
sorry. yes this is still working.
but if I use the service browser_mode.popup, then I have to wait or?
If you previously used
deviceID: this
or
deviceID:
- this
Then yes.
thanks.
a different question.
would it be possible to adjust the header of the popup to the standard header of the more-info dialog?
header more-info
header popup
Hi @thomasloven,
i use scripts for complex popups to keep the yaml in lovelace small and I can also use variables to use a popup multiple times with different entities:
service: browser_mod.popup
data_template:
deviceID: '{{ deviceID }}'
title: Light
hide_header: true
large: false
card:
type: 'custom:layout-card'
layout: auto
cards:
- type: 'custom:light-entity-card'
header: Light
entity: '{{ entityID }}'
...
Now that - DeviceID: this - no longer works, how can I use a script to only display the popup on the current device?
I would be very grateful for every tip, because currently not a single popup works anymore.
Thank you
Chris
So for now, there is no way of using only the current device with popup?
This seems to work with the default cards:
type: button
icon: 'mdi:lightbulb'
show_icon: true
show_name: false
tap_action:
action: fire-dom-event
browser_mod:
command: call-service
service: script.popup_rgb
service_data:
deviceID:
- this
And in the script:
service: browser_mod.popup
data_template:
deviceID: '{{ deviceID }}'
title: Light
hide_header: true
large: true
...
1 Like
correct, only works with native cards, as it seems most custom cards havenāt implemented handling fire-dom-event as thomasloven mentioned.
I previously used browser_mod for popups in conjuction with the custom button card. I just changed to used the new call-service method thomasloven mentions in his updated readme, but with the native button card, since the custom button card doesnāt yet support the fire-dom-event mentioned.
I just did this today because I heavily use popups for my key-master integration for lock codes, and didnāt want to roll back browser-mod 1.2.3 that will soon break HA. Once, custom:button-card can support the fire-dom-event, ill switch back to have more control over the button card styling, but the native one works just fine in my scenario here.
below is a snippet
- type: button
name: "Code 1"
icon_height: 30px
entity: binary_sensor.active_frontdoor_1
#template: lock_manager_button
tap_action:
action: fire-dom-event
browser_mod:
command: call-service
service: browser_mod.popup
service_data:
title: 'Code 1'
style:
background: var(--champs-theme-primary)
card:
type: entities
show_header_toggle: false
entities:
- type: divider
- entity: input_text.frontdoor_name_1
Hopefully this will help some of you
@thomasloven I noticed in your call-service section of the readme, that there was an extra colon listed
what you have:
command: call-service:
service: <service>
service_data:
<service_data>
what I needed:
command: call-service
service: <service>
service_data:
<service_data>
2 Likes
Well there goes my night!
Edit: Ah! This needs to be in big bold text somewhere!
A good chunk of my browser_mod commands are toast which run on all devices! Whew 
Anyone issues?
running latest HA and hacs and it stopped working here
Logger: homeassistant.components.websocket_api.http.connection
Source: components/websocket_api/connection.py:84
Integration: Home Assistant WebSocket API (documentation, issues)
First occurred: 10 februari 2021 20:50:32 (1 occurrences)
Last logged: 10 februari 2021 20:50:32
[547968919776] Received invalid command: browser_mod/connect
I donāt think I fully understand the changes. For instance, how would following code look in 1.3.0?
tap_action: &media_tap_action
action: >
[[[ if (entity.state === 'off' || entity.state === 'idle' || entity.state === 'standby') {
return 'none'; } else { return 'call-service'; } ]]]
service: media_player.media_play_pause
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
haptic: light
Or a simple popup
tap_action: !include popup/activity.yaml
Same question here. Iām using browser_mod as āmore-infoā popup in the same way:
popup_cards: !include NdRUI/ndrui_popup.yaml
And ndrui_popup.yaml.
sensor.group_sensori_porta:
title: "Sensori Porta / Finestra"
style:
$: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:100%;
box-shadow:none;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
card:
type: entities
entities:
- entity: sensor.scurone_sala
type: custom:multiple-entity-row
name: Scurone Sala
secondary_info: last-changed
entities:
- entity: sensor.scurone_sala_battery
name: Batteria
- entity: sensor.scurone_sala_linkquality
name: Segnale
- type: section
- entity: sensor.lucernaio_studio
type: custom:multiple-entity-row
name: Lucernaio Studio
secondary_info: last-changed
entities:
- entity: sensor.lucernaio_studio_battery
name: Batteria
- entity: sensor.scurone_sala_linkquality
name: Segnale
Iām not sure on how to adapt this code to the new versionā¦
Not at all.
That method is still in the readme, so itās still valid.
I turned back version ,have to read first:p how to fix it before upgrading
My popups dont work on latest version
Old code:
action: call-service
service: browser_mod.popup
service_data:
title: Information
hide_header: true
deviceID: this
style:
.: |
:host .content {
width: calc(400px);
align: center;
}
$: |
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: none !important;
}
card:
type: custom:vertical-stack-in-card
cards:
- type: markdown
content: <font color="#1A73E8" size= "5">Batterij niveaus</font>
style: |
ha-card {
background-color: transparent !important;
box-shadow: none !important;
}Do i need to change it to
action: fire-dom-event
browser_mod:
command: popup
service_data:
title: Information
hide_header: true
deviceID: this
style:
.: |
:host .content {
width: calc(400px);
align: center;
}
$: |
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: none !important;
}
card:
type: custom:vertical-stack-in-card
cards:
- type: markdown
content: <font color="#1A73E8" size= "5">Batterij niveaus</font>
style: |
ha-card {
background-color: transparent !important;
box-shadow: none !important;
}
1 Like