Browser_id: this in browser_mod 2 (frontend) not working

Configuration Frontend
1

Dear all,

whats wrong with using:
browser_id: this
in browser_mod 2 (frontend) version 2.6.2.

My yaml code is:

cards:
  - type: custom:button-card
	entity: sensor.aktueller_strompreis_in_cent_kwh
	name: Aktueller Strompreis
	show_state: true
	show_icon: false
	styles:
	  card:
		- height: 50px
	tap_action:
	  action: call-service
	  service: browser_mod.popup
	  data:
		title: Strompreis
		browser_id: this
		content:
		  type: custom:apexcharts-card
		  header:
			show: true
			show_states: true
			colorize_states: true
			standard_format: false
		  experimental:
			color_threshold: true
		  all_series_config:
			unit: Cent/kWh
		  apex_config:
			chart:
			  height: 377px
			grid:
			  show: true
			  borderColor: "#E0E0E0"
			tooltip:
			  enabled: true
			  followCursor: false
			  x:
				show: false
			  fixed:
				enabled: true
		  graph_span: 48h
		  now:
			show: true
			color: 9E9E9E
		  span:
			start: day
		  series:
			- entity: sensor.strompreis_prognose_15min
			  name: Preis
			  show:
				in_header: before_now
				name_in_header: false
			  color_threshold:
				- value: 0
				  color: 4DD0E1
				- value: 10
				  color: 26A69A
				- value: 15
				  color: 4CAF50
				- value: 20
				  color: 7CB342
				- value: 25
				  color: FBC02D
				- value: 30
				  color: EF6C00
				- value: 40
				  color: B71C1C
			  type: line
			  curve: stepline
			  extend_to: false
			  stroke_width: 2
			  float_precision: 2
			  data_generator: >
				const noon = new Date()

				noon.setHours(0, 0, 0, 0)

				const prices =
				entity.attributes.today.concat(entity.attributes.tomorrow);

				const data = [];

				for(let i = 0; i < prices.length; i++) {
				  data.push([noon.getTime() + i * 1000 * 900, prices[i].total * 100])
				}

				return data;

If I’m using:
browser_id: <browser-id>
It works for the special device.

But I want to open the popup only on the device which was clicked…
So, whats wrong with browser_id: this?

2

I haven’t tried but I am guessing the ‘this’ should be ‘THIS’ (ie. case sensitive)

3

I also tried „THIS“ too. unfortunately not working…

4

You need to use a Browser call with action: fire-dom-event. Any other action goes to the server which knows nothing about the Browser. action: fire-dom-event keeps it local to the Browser, and if all you want to do is show a popup you don’t need to worry about browser_id: THIS. That is only needed say if you want to send data to the server and call a script etc.

Recent documentation updates have described more the difference between Browser call and Server call, especially the tip which I have included below.

TIP: If you wish to display a popup on a Browser using browser_mod.popup as a result of a user pressing a button, you will want to use a Browser call using action: fire-dom-event. This may be counterintuitive for a new Home Assistant dashboard creator and may seem more complex than it needs to be. This is due to standard implementation of Home Assistant actions being server based, and only custom integrations like Browser Mod allowing for Browser based actions. See popups.md for more information and examples.

Basically for your example… (hope I have indentation right)

cards:
  - type: custom:button-card
    entity: sensor.aktueller_strompreis_in_cent_kwh
    name: Aktueller Strompreis
    show_state: true
    show_icon: false
    styles:
      card:
        - height: 50px
    tap_action:
      action: fire-dom-event # <- keep it local
      browser_mod: # <- browser mod will act on the event
      service: browser_mod.popup
        data:
          title: Strompreis
          content:
            type: custom:apexcharts-card
...
1 Like
5

That’s it. Thanks a lot.
Finally I used this:

[...]
cards:
    - type: custom:button-card
      entity: sensor.aktueller_strompreis_in_cent_kwh
      name: Aktueller Strompreis
      show_state: true
      show_icon: false
      styles:
        card:
          - height: 50px
      tap_action:
        action: fire-dom-event
        browser_mod:
          service: browser_mod.popup
          data:
            title: Strompreis
            content:
              type: custom:apexcharts-card
[...]

God bless you :innocent:

1 Like