Examples

Make the card tab the default in the UI add-card dialog

Outcome:

• Select the card tab when the add-card dialog opens.
• Make sure the first expander, Suggested or Favorites, is open.
• Collapse all other expanders.

Method:

• Listen to show-dialog in the browser realm.
• The matching rule passes only when the show-dialog event's dialogTag is hui-dialog-create-card.
• Use an absolute short-form interaction anchor that matches the dialog (hui-dialog-create-card).
• Directives:
  • Set the dialog's _currTab property to card. As this property is reactive, there is no need to force an update.
  • Set the first expander's expanded property to true, using a relative short-form anchor.
  • Set the other expanders' expanded property to false, using relative short-form anchors.

uix_broker:
  - realm: browser
    listen: show-dialog
    anchor: '&home-assistant $ hui-dialog-create-card'

    rules:
      - '@captured.dialogTag': hui-dialog-create-card
    directives:
      - type: property
        set: _currTab
        value: card
        wait: 1000
      - type: property
        anchor: >-
          $ ha-dialog div.body hui-card-picker $ div#content div:nth-of-type(1)
          ha-expansion-panel
        set: expanded
        value: true
      - type: property
        anchor: >-
          $ ha-dialog div.body hui-card-picker $
          div#content>ha-expansion-panel:nth-of-type(1)
        set: expanded
        value: false
      - type: property
        anchor: >-
          $ ha-dialog div.body hui-card-picker $
          div#content>ha-expansion-panel:nth-of-type(2)
        set: expanded
        value: false
      - type: property
        anchor: >-
          $ ha-dialog div.body hui-card-picker $
          div#content>ha-expansion-panel:nth-of-type(3)
        set: expanded
        value: false

Prioritize entity triggers when adding an automation editor element

Outcome:

• Jump straight to entity triggers when adding an automation editor element.

Method:

• Listen for the show-dialog event in the browser realm.
• First matching rule passes only when the show-dialog event's dialogTag is add-automation-element-dialog.
• Second matching rules passes only when the type is trigger and not other types which can be action or condition.
• Use an absolute short-form interaction anchor that matches the dialog (add-automation-element-dialog).
• Directives:
  • Set the _tab property to groups; groups is the value for By Type.
  • Set _selectedGroup to entity to focus on the generic entity triggers.

  - realm: browser
    listen: show-dialog
    anchor: '&home-assistant $ add-automation-element-dialog'
    rules:
      - '@captured.dialogTag': add-automation-element-dialog
      - "@captured.dialogParams.type": trigger
    directives:
      - type: property
        set: _tab
        value: groups
      - type: property
        set: _selectedGroup
        value: entity

Add tools button to sidebar title

Outcome: A tools button that navigates to /config/tools.

Method:

• Listen for the uix-broker-ready event in the browser realm.
• Uses compact absolute anchor for ha-sidebar
• The matching rule only passes when user.is_admin property of the hass object on home-assistant is true (this could also be user.is_owner to match only the owner user).
• Uses button directive to place button after the title using simple style object to give a box-shadow and reduced icon size.

  - realm: browser
    listen: uix-broker-ready
    anchor: "&home-assistant $ home-assistant-main $ ha-sidebar"
    rules:
      - anchor: "&home-assistant"
        match: "{.hass.user.is_admin=true}"
    directives:
      - type: button
        anchor: "$ div.menu div.title"
        icon: mdi:hammer
        color: purple
        size: s
        tap_action:
          action: navigate
          navigation_path: /config/tools
        style:
          "--ha-button-box-shadow": rgba(0, 0, 0, 0.1) 0px 4px 12px
          "--ha-icon-button-size": 32px

Change device entities suggested card back to entities for section views

Outcome:

• Make the device entities suggested card for section views an entities card. NOTE: This is not the same as what is suggested for other views which is based on entity domain.

Method:

• Listen for the show-dialog event in the browser realm.
• The matching rule passes only when the show-dialog event's dialogTag is hui-dialog-suggest-card.
• The interaction is set as reentrant: false because it fires show-dialog itself.
• The interaction anchor is &home-assistant. Since the directives include block, an anchor that exists synchronously is required. Alternatively, anchor: target could be used as the event-path anchor, with anchor: "&home-assistant" set on the event directive.
• Directives:
  • A block directive stops propagation on the original event.
  • An event directive re-dispatches the event with a modified dialogParams.sectionConfig, setting cards to a single entities. sectionConfig.type and sectionConfig.title are copied from captured data using the @captured form. To avoid copying the rest of the event data object by object, capture_data: deep performs a deep merge of sectionConfig.

  - realm: browser
    listen: show-dialog
    debug: true
    reentrant: false
    anchor: "&home-assistant"
    rules:
      - "@captured.dialogTag": hui-dialog-suggest-card
    directives:
      - type: block
      - type: event
        name: show-dialog
        bubbles: true
        composed: true
        capture_data: deep
        data:
          dialogParams:
            sectionConfig:
              type: "@captured.dialogParams.sectionConfig.type"
              title: "@captured.dialogParams.sectionConfig.title"
              cards:
                - type: entities
                  entities: "@captured.dialogParams.entities"

Light button on Home dashboard menu item on sidebar

Outcome:

• Similar to Add tools button to sidebar title this example adds a toggle button for a light to the Home sidebar menu item. To reflect the current state of the light, a Server realm to Browser realm helper interaction is used as well to have the main interaction run when the entity state changes.

Method (sidebar interaction):

• Listen for the uix-broker-ready and uix-update-sidebar events in the browser realm. uix-update-sidebar is a custom event and any name could be used as long as it matched the helper interaction.
• Uses compact absolute anchor for ha-sidebar
• Directives:
  • javascript directive to set object parameters to be used in button directive. icon and color are set by entity state.
  • Uses button directive to place button after the Home menu item using simple style object to give a box-shadow and reduced icon size. Action set to toggle light. NOTE: Config and operation of this button is per UIX Forge Button spark, for which the entity is included for action only.

  - realm: browser
    listen:
      - uix-broker-ready
      - uix-update-sidebar # custom event from Server realm interaction helper
    anchor: "&home-assistant $ home-assistant-main $ ha-sidebar"
    directives:
      - type: javascript
        id: button_config
        code: |
          const entity = 'light.bed_light';
          const state = hass.states[entity].state;
          return {
            entity: entity,
            icon: state === 'on' ? 'mdi:lightbulb-on' : 'mdi:lightbulb-off',
            color: state === 'on' ? 'var(--state-active-color)' : 'var(--state-inactive-color)'
          };
      - type: button
        anchor: "$ ha-list-item-button#sidebar-panel-home $ a#item div.content"
        icon: "@button_config.icon"
        color: "@button_config.color"
        entity: "@button_config.entity"
        size: s
        tap_action:
          action: toggle
        style:
          "--ha-button-box-shadow": rgba(0, 0, 0, 0.1) 0px 4px 12px
          "--ha-icon-button-size": 32px
          "--uix-button-margin": 6px

Method (helper interaction):

Outcome:

• Fire a custom Browser event when the entity state changes. This makes the example interaction above reactive to state changes for light.bed_light.

Method:

• Listen for state_changed event in server realm.
• Set anchor to home-assistant element using absolute compact anchor form.
• event directive to fire the custom Browser event uix-update-sidebar if the changed state entity_id is light.bed_light. This example would also fire if the entity_id is light.other_light. This is included in this example to show use of or: in match; you would use such a technique if you add other button directives to the example above.

  - realm: server
    listen: state_changed
    anchor: "&home-assistant"
    directives:
      - type: event
        name: uix-update-sidebar
        rules:
          - type: captured
            path: data.entity_id
            match:
              or:
                - light.bed_light
                - light.other_light