popups.md

Anatomy of a popup

service: browser_mod.popup
data:
  title: The title
  content: The content
  right_button: Right button
  left_button: Left button

Size

The size parameter can be set to normal, wide and fullscreen with results as below (background blur has been exagerated for clarity):

HTML content

service: browser_mod.popup
data:
  title: HTML content
  content: |
    An <b>HTML</b> string.
    <p> Pretty much any HTML works: <ha-icon icon="mdi:lamp" style="color: red;"></ha-icon>

Dashboard card content

service: browser_mod.popup
data:
  title: HTML content
  content:
    type: entities
    entities:
      - light.bed_light
      - light.ceiling_lights
      - light.kitchen_lights

Form content

content can be a list of ha-form schemas and the popup will then contain a form for user input:

<ha-form schema>:
  name: <string>
  [label: <string>]
  [default: <any>]
  selector: <Home Assistant Selector>

name	A unique parameter name
label	A description of the parameter
default	The default value for the parameter
selector	A Home Assistant selector

The data from the form will be forwarded as data for any right_button_action or left_button_action of the popup.

service: browser_mod.popup
data:
  title: Form content
  content:
    - name: parameter_name
      label: Descriptive name
      selector:
        text: null
    - name: another_parameter
      label: A number
      default: 5
      selector:
        number:
          min: 0
          max: 10
          slider: true

Actionable popups

Example of a popup with actions opening more popups or calling Home Assistant services:

service: browser_mod.popup
data:
  content: Do you want to turn the light on?
  right_button: "Yes"
  left_button: "No"
  right_button_action:
    service: light.turn_on
    data:
      entity_id: light.bed_light
  left_button_action:
    service: browser_mod.popup
    data:
      title: Really?
      content: Are you sure?
      right_button: "Yes"
      left_button: "No"
      right_button_action:
        service: browser_mod.popup
        data:
          content: Fine, live in darkness.
          dismissable: false
          title: Ok
          timeout: 3000
      left_button_action:
        service: light.turn_on
        data:
          entity_id: light.bed_light

Forward form data

The following popup would ask the user for a list of rooms to vacuum and then populate the params parameter of the vacuum.send_command service call from the result:

service: browser_mod.popup
data:
  title: Where to vacuum?
  right_button: Go!
  right_button_action:
    service: vacuum.send_command
    data:
      entity_id: vacuum.xiaomi
      command: app_segment_clean
  content:
    - name: params
      label: Rooms to clean
      selector:
        select:
          multiple: true
          options:
            - label: Kitchen
              value: 11
            - label: Living room
              value: 13
            - label: Bedroom
              value: 12

Styling popups

The default value for the style parameter is as follows:

style: |
  --popup-min-width: 400px;
  --popup-max-width: 600px;
  --popup-border-width: var(--ha-card-border-width, 2px);
  --popup-border-color: var(--ha-card-border-color, var(--divider-color, #eee));
  --popup-border-radius: 28px;
  --popup-background-color: var(--ha-card-background, var(--card-background-color, white));
  --popup-padding-x: 0px;
  --popup-padding-y: 0px;

The same variables can also be set by a theme.

Those variables should be enough for mostly everything, really. Try it.

Otherwise, card-mod can also be used to style popups by adding a card_mod: parameter to the service call:

service: browser_mod.popup
data:
  title: Teal background
  content: Where did the dashboard go?
  card_mod:
    style:
      ha-dialog$: |
        div.mdc-dialog div.mdc-dialog__scrim {
          background: rgba(0, 128, 128, 0.9);
        }

Or through card-mod-more-info or card-mod-more-info-yaml in a card-mod theme.