thomas/hass-browser_mod
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
hass-browser_mod/documentation/popups.md

4.2 KiB
Raw Blame History

Anatomy of a popup

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

Dialog Anatomy

Size

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

Normal Size

Wide Size

Fullscreen Size

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>

HTML content

Dashboard card content

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

Card content

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

Form content

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

Multi-level popup

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

Vacuum popup