[JS+Editor Module] Get state/attribute from other entities

[Clooos]

Get state/attribute from other entities

Version: v1.1
Creator: Clooos

Important

Unsupported cards:

• Horizontal buttons stack
• Separator

Get state/attribute from other entities and replace the default state/attribute field.
Configure this module via the editor or in YAML, for example:

get_state_attribute:
    - entity: weather.home
    - entity: sensor.weather_station
      attribute: humidity
    - entity: sensor.weather_station
      attribute: temperature

---

🧩 Get this Module

To use this module, simply copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

get_state_attribute:
    
    # Some informations about your module (this is shown in the editor)
    name: "Advanced example: Get state/attribute from other entities"
    version: "v1.1"
    creator: "Clooos"
    link: "https://github.com/Clooos/Bubble-Card"

    # Disable this module for unsupported "card_type"
    unsupported:
        - horizontal-buttons-stack
        - separator

    # The description have HTML support like in this example. This model is my favorite.
    description: |
        Get state/attribute from other entities and replace the default state/attribute field.
        <img class="example" src="https://github.com/Clooos/Bubble-Card/blob/main/img/get_state_template_example.png?raw=true" />
        Configure this module via the editor or in YAML, for example:
        <br><br>
        <code-block><pre>
        get_state_attribute:
            - entity: weather.home
            - entity: sensor.weather_station
              attribute: humidity
            - entity: sensor.weather_station
              attribute: temperature
        </pre></code-block>
        <br>
        <b>If it doesn't work, make sure at least one of "Show state" or "Show attribute" is turned on in your card configuration.</b>

    # Code blocks must always start with ${(() => { and end with })()}
    # Inline codes must always start with ${ and end with }
    #
    # This section only supports JavaScript and/or CSS
    code: |
        ${(() => {
          // Retrieve the configuration or use an empty array by default
          const config = this.config.get_state_attribute || [];

          // Format the retrieved value from the entity for each entry
          const values = config
            .map(cfg => {
              const entity = hass.states[cfg.entity];
              if (entity) {
                return cfg.attribute
                  ? hass.formatEntityAttributeValue(entity, cfg.attribute)
                  : hass.formatEntityState(entity);
              }
              return null;
            })
            .filter(value => value !== null); // Remove null values
        
          // Update the DOM element with the class 'bubble-state'
          // displaying values separated by ' • '
          card.querySelector('.bubble-state').innerText = values.join(' • ');
        })()}

    # The editor part can be tricky, but improves modules a lot!
    #
    # In this example, it will create your configuration to this variable:
    # this.config.get_state_attribute
    #
    # To understand what you can do here, take a look at the "ha-form" sources here:
    # https://github.com/home-assistant/frontend/tree/03a415beff6e6f9c87a95287804f6c03c8fef3d5/src/components/ha-form
    #
    # And here for the selectors: 
    # https://github.com/home-assistant/frontend/blob/03a415beff6e6f9c87a95287804f6c03c8fef3d5/src/data/selector.ts
    #
    # I will try to document that for clarity!
    editor:
      - type: expandable
        title: "Select entities and attributes"
        icon: "mdi:list-box-outline"
        schema:
          - name: '0'
            type: expandable
            title: "Entity 1"
            schema:
              - name: entity
                label: "Entity"
                selector:
                    entity: {}
              - name: attribute
                label: "Attribute"
                selector:
                    attribute: {}
          - name: '1'
            type: expandable
            title: "Entity 2"
            schema:
              - name: entity
                label: "Entity"
                selector:
                    entity: {}
              - name: attribute
                label: "Attribute"
                selector:
                    attribute: {}
          - name: '2'
            type: expandable
            title: "Entity 3"
            schema:
              - name: entity
                label: "Entity"
                selector:
                    entity: {}
              - name: attribute
                label: "Attribute"
                selector:
                    attribute: {}
          - name: '3'
            type: expandable
            title: "Entity 4"
            schema:
              - name: entity
                label: "Entity"
                selector:
                    entity: {}
              - name: attribute
                label: "Attribute"
                selector:
                    attribute: {}

---

Screenshot:

[Quokka1979]

Hi Clooos, is there a way to show icons?
Like a thermometer for the temp, so I can colour this

[Clooos]

Hi! This is not possible in this module, but don't hesitate to give it a try by modifying this one 🙂

Some AIs are really good at that 😁

[Clooos]

Updated to v1.1:

Added compatibility for v2.5.0-beta.6.