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

[Clooos]

Get state/attribute from other entities

Version: v1.3
Creator: Clooos

Important

Supported cards:

• Pop-up
• Cover
• Button
• Media-player
• Climate
• Select

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.3"
    creator: "Clooos"
    link: "https://github.com/Clooos/Bubble-Card"

    # Enable this module for supported "card_type" in the editor
    supported:
        - pop-up
        - cover
        - button
        - media-player
        - climate
        - select

    # 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) {
                let rawValue;
                if (cfg.attribute) {
                  rawValue = entity.attributes[cfg.attribute];
                  if (rawValue !== undefined && rawValue !== 'unknown' && rawValue !== 'unavailable' && rawValue !== 'null' && rawValue !== '') {
                    return hass.formatEntityAttributeValue(entity, cfg.attribute);
                  }
                } else {
                  rawValue = entity.state;
                  if (rawValue !== undefined && rawValue !== 'unknown' && rawValue !== 'unavailable' && rawValue !== 'null' && rawValue !== '') {
                    return hass.formatEntityState(entity);
                  }
                }
              }
              return null;
            })
            // Remove null values and empty strings or strings with only spaces
            .filter(value => value !== null && value !== "" && value.trim() !== "");
        
          // Update the DOM element with the class 'bubble-state'
          // displaying values separated by ' • '
          card.querySelector('.bubble-state').innerText = values.join(' • ');
        })()}

    # This allows you to add a visual editor to your module. 
    # Learn about all available editor schema options in the editor schema documentation:
    # https://github.com/Clooos/Bubble-Card/blob/main/src/modules/editor-schema-docs.md
    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.

[Clooos]

Updated to v1.3:

Fixed an issue where empty, undefined, or unavailable values were displayed. #1244

[blueJack92]

Is it possible to scroll the text of the “foreign” entities when text scrolling is activated?

[Clooos]

This is still not possible for templated values, but this is already in my to-do list and I will try to check that as soon as v3.0 is released 🙂

[blueJack92]

Is it also not possible that I can implement this via a user-defined style? Somehow it bothers me that I can't read the data on my heating system. :D

[Clooos]

In fact everything should be possible since v2.5/v3.0, but with a more complex approach.

I really don't have time to look at this right know, but don't hesitate to try to modify it with ChatGPT or similar. Give me your results if you find a solution! 😄

[StaleLoafOfBread]

@blueJack92 I made a style for this a while ago. I don't personally use it anymore and its not perfect but it may work for your use case!
#857 (comment)

You would have to modify the module provided here to include that code from my style.