Browser-mod pop-up only in the browser/app that triggers

Third party integrations
,
1

I’m trying to use browser-mod popup on a badge. Basically, the badge shows basic info, and the popup allows detailed info or control of relevant entities.

An example for viewing/toggling home modes 
type: custom:mushroom-template-badge
icon: mdi:home-switch-outline
color: |-
  {% set motion_controls = states.input_boolean
    | selectattr('entity_id', 'search', '_mode')
    | list %}
  {% set total = motion_controls | count %}
  {% set active = motion_controls
    | selectattr('state', 'equalto', 'on')
    | list
    | count %}

  {% if total == active and total > 0 %}
    blue
  {% elif active > 0 %}
    orange
  {% else %}
    grey
  {% endif %}
label: House Modes
content: |-
  {% set motion_controls = states.input_boolean
    | selectattr('entity_id', 'search', '_mode')
    | list %}
  {% set total = motion_controls | count %}
  {% set active = motion_controls
    | selectattr('state', 'equalto', 'on')
    | list
    | count %}
  {{ active }} of {{ total }} on
tap_action:
  action: perform-action
  perform_action:
    action: fire-dom-event
    browser_mod:
      command: popup
      browser_id: this
      dismissable: true
      autoclose: false
      content:
        type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                icon: mdi:close
                tap_action:
                  action: call-service
                  service: browser_mod.close_popup
                styles:
                  card:
                    - width: 28px
                    - height: 28px
                    - padding: 0
                    - background-color: rgba(0,0,0,0.4)
                    - border-radius: 50%
                    - box-shadow: none
                    - margin-left: 8px
                    - margin-top: 8px
                  icon:
                    - color: white
              - type: custom:button-card
                name: " "
                styles:
                  card:
                    - background: none
                    - box-shadow: none
                    - border: none
                    - height: 28px
                    - padding: 0
                    - margin: 0
          - type: grid
            columns: 2
            square: false
            cards:
              - type: custom:mushroom-entity-card
                entity: input_boolean.cooking_mode
                name: Basement
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - type: custom:mushroom-entity-card
                entity: input_boolean.cooking_mode
                name: Main Floor
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - type: custom:mushroom-entity-card
                entity: input_boolean.guest_mode
                name: Krea Area
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - type: custom:mushroom-entity-card
                entity: input_boolean.movie_basement
                name: Office
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - type: custom:mushroom-entity-card
                entity: input_boolean.movie_mode_conservatory
                name: Top Floor
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - type: custom:mushroom-entity-card
                entity: input_boolean.movie_upstairs
                name: TV Room
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - type: custom:mushroom-entity-card
                entity: input_boolean.office_mode
                name: Top TV Room
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - type: custom:mushroom-entity-card
                entity: input_boolean.party_mode
                name: Top TV Room
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info

My problem is I can’t get it to only pop up on the browser that “triggers” (clicks). If I click, the popup appears on every browser/phone app. Which is quite intrusive for other people just going about their homer assistant UI business.

Any idea how I do that?

2

Can you please format your code with the </> tag? It helps with the reading.
A quick search seems to indicate you are performing a Server Call instead of a browsers call:

The notable difference between the two is when no browser_id is specified:
A server call will perform the service on all registered browsers.
A browser call will perform the service on the current browser only

Source : Browser Mod Popup Examples in Home Assistant - SmartHomeScene

3

Your Browser call is not quite right. I have included adjusted code below. When you use a Browser Call (fire-dom-event) you don’t need to include browser_id unless you are passing to a backend script in a sequence. In the case of browser_mod.popup it is not needed.

tap_action:
  action: fire-dom-event # <- fire-dom-event is the action
  browser_mod:
    service: browser_mod.popup # <- browser_mod looks at 'service' not command and you need the full service
    dismissable: true
    autoclose: false
    content: 
      # add the rest of the code indented correctly
1 Like
4

Great thanks! A little bit of fiddling, and this was the full working yaml:

type: custom:mushroom-template-badge
icon: mdi:home-switch-outline
color: |-
  {% set motion_controls = states.input_boolean
    | selectattr('entity_id', 'search', '_mode')
    | list %}
  {% set total = motion_controls | count %}
  {% set active = motion_controls
    | selectattr('state', 'equalto', 'on')
    | list
    | count %}

  {% if total == active and total > 0 %}
    blue
  {% elif active > 0 %}
    orange
  {% else %}
    grey
  {% endif %}
label: House Modes
content: |-
  {% set motion_controls = states.input_boolean
    | selectattr('entity_id', 'search', '_mode')
    | list %}
  {% set total = motion_controls | count %}
  {% set active = motion_controls
    | selectattr('state', 'equalto', 'on')
    | list
    | count %}
  {{ active }} of {{ total }} on
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      dismissable: true
      autoclose: false
      content:
        type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                icon: mdi:close
                tap_action:
                  action: call-service
                  service: browser_mod.close_popup
                styles:
                  card:
                    - width: 28px
                    - height: 28px
                    - padding: 0
                    - background-color: rgba(0,0,0,0.4)
                    - border-radius: 50%
                    - box-shadow: none
                    - margin-left: 8px
                    - margin-top: 8px
                  icon:
                    - color: white
              - type: custom:button-card
                name: " "
                styles:
                  card:
                    - background: none
                    - box-shadow: none
                    - border: none
                    - height: 28px
                    - padding: 0
                    - margin: 0
          - type: grid
            columns: 2
            square: false
            cards:
              - type: custom:mushroom-entity-card
                entity: input_boolean.cooking_mode
                name: Basement
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - type: custom:mushroom-entity-card
                entity: input_boolean.cooking_mode
                name: Main Floor
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - type: custom:mushroom-entity-card
                entity: input_boolean.guest_mode
                name: Krea Area
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - type: custom:mushroom-entity-card
                entity: input_boolean.movie_basement
                name: Office
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - type: custom:mushroom-entity-card
                entity: input_boolean.movie_mode_conservatory
                name: Top Floor
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - type: custom:mushroom-entity-card
                entity: input_boolean.movie_upstairs
                name: TV Room
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - type: custom:mushroom-entity-card
                entity: input_boolean.office_mode
                name: Top TV Room
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - type: custom:mushroom-entity-card
                entity: input_boolean.party_mode
                name: Top TV Room
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
1 Like