[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 😁

[mrgiov]

Edited to add icon to each entity

copy-paste JS and configuration

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

If it doesn't work, make sure at least one of "Show state" or "Show attribute" is turned on in your card configuration.

Configure this module via the editor or in YAML, for example:

get_state_attribute: 

---

🧩 Get this Module

To use this module, simply install it from the Module Store (from the editor of any card > Modules), or copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

get_state_attribute:
    name: "Advanced example: Get state/attribute from other entities"
    version: "v1.3"
    creator: "Clooos"
    link: "https://github.com/Clooos/Bubble-Card/discussions/XXXX"

    supported:
        - pop-up
        - cover
        - button
        - media-player
        - climate
        - select

    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>
        
        <br><br>
        <code-block><pre>
        get_state_attribute: 
            # Your configuration here
        </pre></code-block>

    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, formattedValue;
        
                if (cfg.attribute) {
                  rawValue = entity.attributes[cfg.attribute];
                  if (rawValue !== undefined && rawValue !== 'unknown' && rawValue !== 'unavailable' && rawValue !== 'null' && rawValue !== '') {
                    formattedValue = hass.formatEntityAttributeValue(entity, cfg.attribute);
                  }
                } else {
                  rawValue = entity.state;
                  if (rawValue !== undefined && rawValue !== 'unknown' && rawValue !== 'unavailable' && rawValue !== 'null' && rawValue !== '') {
                    formattedValue = hass.formatEntityState(entity);
                  }
                }
        
                if (formattedValue) {
                  // Icona ridotta a 12px solo per queste bubble-icon
                  const iconHtml = cfg.icon
                    ? `<ha-icon icon="${cfg.icon}" style="--mdc-icon-size:13px;width:13px;height:13px;margin-right:3px;"></ha-icon>`
                    : '';
                  return `<span class="bubble-item">${iconHtml}<span class="bubble-text">${formattedValue}</span></span>`;
                }
              }
              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 icons + values separated by ' • '
          card.querySelector('.bubble-state').innerHTML = values.join(' • ');
        })()}
        

    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: icon
                label: Icon
                selector:
                  icon: {}
          - name: '1'
            type: expandable
            title: Entity 2
            schema:
              - name: entity
                label: Entity
                selector:
                  entity: {}
              - name: attribute
                label: Attribute
                selector:
                  attribute: {}
              - name: icon
                label: Icon
                selector:
                  icon: {}
          - name: '2'
            type: expandable
            title: Entity 3
            schema:
              - name: entity
                label: Entity
                selector:
                  entity: {}
              - name: attribute
                label: Attribute
                selector:
                  attribute: {}
              - name: icon
                label: Icon
                selector:
                  icon: {}
          - name: '3'
            type: expandable
            title: Entity 4
            schema:
              - name: entity
                label: Entity
                selector:
                  entity: {}
              - name: attribute
                label: Attribute
                selector:
                  attribute: {}
              - name: icon
                label: Icon
                selector:
                  icon: {}
      

---

Screenshot:

Important: The first screenshot here will be used on the Module Store, so please provide one.

[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.

[JulioVillamizar]

Hi, Excellent module, could it be modified to also include the entity's last change and last update attributes?

[vp1x]

For this feature I came here, It's nice to have when a door or window it was last time opened or something else.

[cOOnStar]

Hi,

I integrated Philips Hue into HA and used it with the Bubble Card and the slider.

I implemented "Get Attributes from Other States." When I add a lamp and select the brightness attribute, it works fine from 1-100%, but when the lamp is off, an unknown status appears.

off:

on:

[willliamchan]

Hi Clooos

Hope you are well. I have a sub button for alarm system (input_select for Disarm, Armed Home and Armed Away) while I'd like to get the state from alarm_control_panel.home_alarm instead.

Can you please advise if this is possible and how?

Many thanks!

[joesilva101]

I am trying to get this feature to work on sub buttons, did you find a solution?
Thanks

[Nailik]

How did you add the data in the top right corner in your example?

[Sagi2137]

hi is there a way to get rid of the background from the button and calendar cards?

[MightyMaster]

These are Sub-buttons (Styling Option -> Large with 2 sub-buttons rows). Trying to use it as well at the moment :-)

[Qwarkk6]

I've noticed that when the sensor providing information to this module goes offline, the entire bubble card becomes greyed out / transparent. Is it possible somehow for it to not be greyed out but rather just not display the module?

[mrgiov]

Advanced example: Get state/attribute from other entities

Version: v1.4
** Added icon and dynamic icon for battery level**
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

icon: mdi-icon

- entity: sensor.weather_station

attribute: temperature

If it doesn't work, make sure at least one of "Show state" or "Show attribute" is turned on in your card configuration.

Configure this module via the editor or in YAML, for example:

get_state_attribute: 

---

🧩 Get this Module

To use this module, simply install it from the Module Store (from the editor of any card > Modules), or copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

get_state_attribute:
    name: "Advanced example: Get state/attribute from other entities"
    version: "v1.4"
    creator: "Clooos"
    link: "https://github.com/Clooos/Bubble-Card/discussions/XXXX"

    supported:
        - pop-up
        - cover
        - button
        - media-player
        - climate
        - select

    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
              icon: mdi-icon
            - 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>
        
        <br><br>
        <code-block><pre>
        get_state_attribute: 
            # Your configuration here
        </pre></code-block>

    code: |
        ${(() => {
          const config = this.config.get_state_attribute || [];
        
          const values = config
            .map(cfg => {
              const entity = hass.states[cfg.entity];
              if (entity) {
                let rawValue, formattedValue;
        
                if (cfg.attribute) {
                  rawValue = entity.attributes[cfg.attribute];
                  if (rawValue !== undefined && rawValue !== 'unknown' && rawValue !== 'unavailable' && rawValue !== 'null' && rawValue !== '') {
                    formattedValue = hass.formatEntityAttributeValue(entity, cfg.attribute);
                  }
                } else {
                  rawValue = entity.state;
                  if (rawValue !== undefined && rawValue !== 'unknown' && rawValue !== 'unavailable' && rawValue !== 'null' && rawValue !== '') {
                    formattedValue = hass.formatEntityState(entity);
                  }
                }
        
                if (formattedValue) {
                  let icon = cfg.icon || "";
        
                  // 🔋 Se è una batteria, scegli icona dinamica
                 if ((cfg.entity && cfg.entity.includes("battery")) || cfg.icon === "battery") {
                    const level = parseInt(rawValue, 10);
        
                    if (isNaN(level)) {
                      icon = "mdi:battery-unknown";
                    } else if (level >= 95) {
                      icon = "mdi:battery";
                    } else if (level >= 80) {
                      icon = "mdi:battery-90";
                    } else if (level >= 60) {
                      icon = "mdi:battery-70";
                    } else if (level >= 40) {
                      icon = "mdi:battery-50";
                    } else if (level >= 20) {
                      icon = "mdi:battery-30";
                    } else if (level >= 10) {
                      icon = "mdi:battery-20";
                    } else {
                      icon = "mdi:battery-alert";
                    }
        
                    // se è in carica
                    if (entity.state === "charging" || entity.attributes.charging === true) {
                      icon = "mdi:battery-charging";
                    }
                  }
        
                  const iconHtml = icon
                    ? `<ha-icon icon="${icon}" style="--mdc-icon-size:12px;width:12px;height:12px;margin-right:3px;vertical-align:middle;"></ha-icon>`
                    : '';
        
                  return `<span class="bubble-item">${iconHtml}<span class="bubble-text">${formattedValue}</span></span>`;
                }
              }
              return null;
            }) 
            .filter(value => value !== null && value !== "" && value.trim() !== "");
        
          card.querySelector('.bubble-state').innerHTML = values.join('&nbsp;&nbsp;•&nbsp;&nbsp;');
        })()}
        

    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: icon
                label: Icon
                selector:
                  icon: {}
          - name: '1'
            type: expandable
            title: Entity 2
            schema:
              - name: entity
                label: Entity
                selector:
                  entity: {}
              - name: attribute
                label: Attribute
                selector:
                  attribute: {}
              - name: icon
                label: Icon
                selector:
                  icon: {}
          - name: '2'
            type: expandable
            title: Entity 3
            schema:
              - name: entity
                label: Entity
                selector:
                  entity: {}
              - name: attribute
                label: Attribute
                selector:
                  attribute: {}
              - name: icon
                label: Icon
                selector:
                  icon: {}
          - name: '3'
            type: expandable
            title: Entity 4
            schema:
              - name: entity
                label: Entity
                selector:
                  entity: {}
              - name: attribute
                label: Attribute
                selector:
                  attribute: {}
              - name: icon
                label: Icon
                selector:
                  icon: {}
      

---

Screenshot:

Important: The first screenshot here will be used on the Module Store, so please provide one.

[jayhix123]

Advanced example: Get state/attribute from other entities

Version: v1.4 ** Added icon and dynamic icon for battery level** 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

icon: mdi-icon

• entity: sensor.weather_station

attribute: temperature

If it doesn't work, make sure at least one of "Show state" or "Show attribute" is turned on in your card configuration.
Configure this module via the editor or in YAML, for example:

get_state_attribute: 

🧩 Get this Module

To use this module, simply install it from the Module Store (from the editor of any card > Modules), or copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

get_state_attribute:
    name: "Advanced example: Get state/attribute from other entities"
    version: "v1.4"
    creator: "Clooos"
    link: "https://github.com/Clooos/Bubble-Card/discussions/XXXX"

    supported:
        - pop-up
        - cover
        - button
        - media-player
        - climate
        - select

    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
              icon: mdi-icon
            - 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>
        
        <br><br>
        <code-block><pre>
        get_state_attribute: 
            # Your configuration here
        </pre></code-block>

    code: |
        ${(() => {
          const config = this.config.get_state_attribute || [];
        
          const values = config
            .map(cfg => {
              const entity = hass.states[cfg.entity];
              if (entity) {
                let rawValue, formattedValue;
        
                if (cfg.attribute) {
                  rawValue = entity.attributes[cfg.attribute];
                  if (rawValue !== undefined && rawValue !== 'unknown' && rawValue !== 'unavailable' && rawValue !== 'null' && rawValue !== '') {
                    formattedValue = hass.formatEntityAttributeValue(entity, cfg.attribute);
                  }
                } else {
                  rawValue = entity.state;
                  if (rawValue !== undefined && rawValue !== 'unknown' && rawValue !== 'unavailable' && rawValue !== 'null' && rawValue !== '') {
                    formattedValue = hass.formatEntityState(entity);
                  }
                }
        
                if (formattedValue) {
                  let icon = cfg.icon || "";
        
                  // 🔋 Se è una batteria, scegli icona dinamica
                 if ((cfg.entity && cfg.entity.includes("battery")) || cfg.icon === "battery") {
                    const level = parseInt(rawValue, 10);
        
                    if (isNaN(level)) {
                      icon = "mdi:battery-unknown";
                    } else if (level >= 95) {
                      icon = "mdi:battery";
                    } else if (level >= 80) {
                      icon = "mdi:battery-90";
                    } else if (level >= 60) {
                      icon = "mdi:battery-70";
                    } else if (level >= 40) {
                      icon = "mdi:battery-50";
                    } else if (level >= 20) {
                      icon = "mdi:battery-30";
                    } else if (level >= 10) {
                      icon = "mdi:battery-20";
                    } else {
                      icon = "mdi:battery-alert";
                    }
        
                    // se è in carica
                    if (entity.state === "charging" || entity.attributes.charging === true) {
                      icon = "mdi:battery-charging";
                    }
                  }
        
                  const iconHtml = icon
                    ? `<ha-icon icon="${icon}" style="--mdc-icon-size:12px;width:12px;height:12px;margin-right:3px;vertical-align:middle;"></ha-icon>`
                    : '';
        
                  return `<span class="bubble-item">${iconHtml}<span class="bubble-text">${formattedValue}</span></span>`;
                }
              }
              return null;
            }) 
            .filter(value => value !== null && value !== "" && value.trim() !== "");
        
          card.querySelector('.bubble-state').innerHTML = values.join('&nbsp;&nbsp;•&nbsp;&nbsp;');
        })()}
        

    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: icon
                label: Icon
                selector:
                  icon: {}
          - name: '1'
            type: expandable
            title: Entity 2
            schema:
              - name: entity
                label: Entity
                selector:
                  entity: {}
              - name: attribute
                label: Attribute
                selector:
                  attribute: {}
              - name: icon
                label: Icon
                selector:
                  icon: {}
          - name: '2'
            type: expandable
            title: Entity 3
            schema:
              - name: entity
                label: Entity
                selector:
                  entity: {}
              - name: attribute
                label: Attribute
                selector:
                  attribute: {}
              - name: icon
                label: Icon
                selector:
                  icon: {}
          - name: '3'
            type: expandable
            title: Entity 4
            schema:
              - name: entity
                label: Entity
                selector:
                  entity: {}
              - name: attribute
                label: Attribute
                selector:
                  attribute: {}
              - name: icon
                label: Icon
                selector:
                  icon: {}
      

Screenshot:

Important: The first screenshot here will be used on the Module Store, so please provide one.

Are you able to make the icon pull from the entity? Rather than defining the icon it could be dynamic based on the entity state then

[pterhu]

Hello Clooos!

I tried to modify this module to have an option to change the separator character. I tried step by step, modified, refreshed.. There was no error after the steps, but it was still wrong at the end. Can you please help me out?

I added this to the top of the editor's code:

- type: string
  label: Separator character
  name: separator

and modified the JS:

${(() => {
  // Retrieve the configuration or use an empty array by default
  const config = this.config.get_state_attribute || [];
  const separator = this.config.get_state_attribute?.separator || ' • ';  // <--- added this line
  ...
  // displaying values separated by ' • '
  card.querySelector('.bubble-state').innerText = values.join(separator);  // <--- modified this line
})()}

After this I get a JS/CSS error from the module.

[pterhu]

Okay, I figured it out. The problem was with the config variable, which is not an array after the separator config element was added.
Here is the working version:

${(() => {
  // Retrieve the configuration or use an empty array by default
  const config = this.config.get_state_attribute || [];
  const separator = this.config.get_state_attribute?.separator || ' • ';

  const entityList = Object.values(config).filter(
    item => typeof item === "object" && item.entity
  );

  // Format the retrieved value from the entity for each entry
  const values = entityList
    .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(separator);
})()}

[oerix]

Anyway to get this supported for the popup header, when selecting state?

[pterhu]

I merged @mrgiov 's modification (icon) with mine (separator/newline).
Here are some examples of separators:

${(() => {
  // Retrieve the configuration or use an empty array by default
  const config = this.config.get_state_attribute || [];
  const separator = config?.separator == '<br>' ? '<br>' : this.config.get_state_attribute?.separator || ' • ';

  let entityList = config;
  if (!Array.isArray(config)) {
    entityList = Object.values(config).filter(
      item => typeof item === "object" && item.entity
    );
  }

  // Format the retrieved value from the entity for each entry
  const values = entityList
    .map(cfg => {
      const entity = hass.states[cfg.entity];
      if (entity) {
        let rawValue, formattedValue;
        if (cfg.attribute) {
          rawValue = entity.attributes[cfg.attribute];
          if (rawValue !== undefined && rawValue !== 'unknown' && rawValue !== 'unavailable' && rawValue !== 'null' && rawValue !== '') {
            formattedValue = hass.formatEntityAttributeValue(entity, cfg.attribute);
          }
        } else {
          rawValue = entity.state;
          if (rawValue !== undefined && rawValue !== 'unknown' && rawValue !== 'unavailable' && rawValue !== 'null' && rawValue !== '') {
            formattedValue = hass.formatEntityState(entity);
          }
        }
        
	    if (formattedValue) {
          let icon = cfg.icon || "";
          if ((cfg.entity && cfg.entity.includes("battery")) || cfg.icon === "battery") {
            const level = parseInt(rawValue, 10);
            if (isNaN(level)) {
              icon = "mdi:battery-unknown";
            } else if (level >= 95) {
              icon = "mdi:battery";
            } else if (level >= 80) {
              icon = "mdi:battery-90";
            } else if (level >= 60) {
              icon = "mdi:battery-70";
            } else if (level >= 40) {
              icon = "mdi:battery-50";
            } else if (level >= 20) {
              icon = "mdi:battery-30";
            } else if (level >= 10) {
              icon = "mdi:battery-20";
            } else {
              icon = "mdi:battery-alert";
            }
            if (entity.state === "charging" || entity.attributes.charging === true) {
              icon = "mdi:battery-charging";
            }
          }
          const iconHtml = icon ?
            `<ha-icon icon="${icon}" style="--mdc-icon-size:12px;width:12px;height:12px;margin-right:3px;vertical-align:middle;"></ha-icon>`
            : '';
          return `<span class="bubble-item">${iconHtml}<span class="bubble-text">${formattedValue}</span></span>`;
        }
      }
      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 user defined separator or line break
  card.querySelector('.bubble-state').innerHTML = values.join(separator);
})()}

linebreak separator works only if you change the style of your card:

styles: |
  .bubble-state {
    display: block;
  }

[M1cN]

The module works perfectly thanks.
I just have one question: Is there a way to display each attribute on a separate row?

`
type: custom:bubble-card
card_type: button
double_tap_action:
action: more-info
hold_action:
action: more-info
sub_button:

• entity: sensor.docker_mgmt_portainer_memory
  show_state: true
• entity: sensor.docker_mgmt_portainer_cpu
  show_state: true
• entity: sensor.docker_mgmt_portainer_state
  show_state: true
  show_name: false
  state_background: true
  show_background: true
  name: Portainer
• {}
  card_layout: large-2-rows
  name: Portainer
  button_type: switch
  show_state: true
  show_last_changed: false
  show_last_updated: false
  force_icon: false
  entity: update.portainer_portainer_ce_update
  modules:
• get_state_attribute
  get_state_attribute:
• entity: update.portainer_portainer_ce_update
  attribute: installed_version
• entity: update.portainer_portainer_ce_update
  attribute: latest_version
  styles: |-
  .bubble-button-card-container,
  .bubble-button-card {
  height: 120px !important;
  }
  .bubble-icon-container, .bubble-name-container {
  top: -32px;
  }
  .bubble-sub-button-container {
  position: absolute !important;
  bottom: 0px !important;
  justify-content: left !important;
  width: calc(100% - 20px) !important;
  right: inherit !important;
  margin: 10px !important;
  )
  .bubble-feedback-element {
  height: 200% !important;
  }
  .bubble-state {
  display: block;
  }
  rows: "4"
  show_attribute: false
  attribute: display_precision
  show_name: true
  show_icon: true
  scrolling_effect: false
  `

[Daniel75]

I once did something like that using AI. It might need to be checked to make sure everything is correct, but it works for me.
get_state_attribute_3zeilen.yaml

[M1cN]

I once did something like that using AI. It might need to be checked to make sure everything is correct, but it works for me. get_state_attribute_3zeilen.yaml

Thank you Daniel!
It took me a while to realize that the YAML you shared is actually a module that can be imported. 😅
Would you also be able to share the card configuration? At the moment, all attributes are still appearing in a single row on my end.

[M1cN]

I once did something like that using AI. It might need to be checked to make sure everything is correct, but it works for me. get_state_attribute_3zeilen.yaml

Thank you Daniel! It took me a while to realize that the YAML you shared is actually a module that can be imported. 😅 Would you also be able to share the card configuration? At the moment, all attributes are still appearing in a single row on my end.

@Daniel75 , Nevermind i got it working. Thanks for the tip and the example, I even have icons Infront of the attributes now.

[Bingo269]

Is it possible to add conditions to the module so that some states are only visible when conditions are met (e.g. vacuum is cleaning). Thanks!

[straxhaber]

Please :)

[mrgiov]

Advanced example: Get state/attribute from other entities

Version: v1.4
Editor: MrGiov

Added Template Render

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

icon: mdi-icon

- entity: sensor.weather_station

attribute: temperature

If it doesn't work, make sure at least one of "Show state" or "Show attribute" is turned on in your card configuration.

Configure this module via the editor or in YAML, for example:

get_state_attribute: 

---

🧩 Get this Module

To use this module, simply install it from the Module Store (from the editor of any card > Modules), or copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

get_state_attribute:
    name: "Advanced example: Get state/attribute from other entities"
    version: "v1.4"
    creator: "Clooos"
    link: "https://github.com/Clooos/Bubble-Card/discussions/XXXX"

    supported:
        - pop-up
        - cover
        - button
        - media-player
        - climate
        - select

    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
              icon: mdi-icon
            - 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>
        
        <br><br>
        <code-block><pre>
        get_state_attribute: 
            # Your configuration here
        </pre></code-block>

    code: |
        ${(async () => {
          const config = this.config.get_state_attribute || [];
        
          const values = await Promise.all(
            config.map(async (cfg) => {
              let rawValue, formattedValue;
        
              //TEMPLATE
              if (cfg.template && cfg.template.trim() !== "") {
                try {
                  rawValue = await hass.callApi("POST", "template", {
                    template: cfg.template
                  });
                  formattedValue = rawValue;
                } catch (e) {
                  console.warn("Errore nel template:", cfg.template, e);
                  return null;
                }
              }
        
              //ENTITY / ATTRIBUTE
              else if (cfg.entity) {
                const entity = hass.states[cfg.entity];
                if (!entity) return null;
        
                if (cfg.attribute) {
                  rawValue = entity.attributes[cfg.attribute];
                  if (
                    rawValue !== undefined &&
                    rawValue !== "unknown" &&
                    rawValue !== "unavailable" &&
                    rawValue !== "null" &&
                    rawValue !== ""
                  ) {
                    formattedValue = hass.formatEntityAttributeValue(entity, cfg.attribute);
                  }
                } else {
                  rawValue = entity.state;
                  if (
                    rawValue !== undefined &&
                    rawValue !== "unknown" &&
                    rawValue !== "unavailable" &&
                    rawValue !== "null" &&
                    rawValue !== ""
                  ) {
                    formattedValue = hass.formatEntityState(entity);
                  }
                }
              }
        
              if (!formattedValue) return null;
        
              let icon = cfg.icon || "";
        
              // 🔋 BATTERY ICON DINAMICA
              if ((cfg.entity && cfg.entity.includes("battery")) || cfg.icon === "battery") {
                const level = parseInt(rawValue, 10);
        
                if (isNaN(level)) icon = "mdi:battery-unknown";
                else if (level >= 95) icon = "mdi:battery";
                else if (level >= 80) icon = "mdi:battery-90";
                else if (level >= 60) icon = "mdi:battery-70";
                else if (level >= 40) icon = "mdi:battery-50";
                else if (level >= 20) icon = "mdi:battery-30";
                else if (level >= 10) icon = "mdi:battery-20";
                else icon = "mdi:battery-alert";
        
                if (
                  hass.states[cfg.entity]?.state === "charging" ||
                  hass.states[cfg.entity]?.attributes?.charging === true
                ) {
                  icon = "mdi:battery-charging";
                }
              }
        
              const iconHtml = icon
                ? `<ha-icon icon="${icon}" style="--mdc-icon-size:12px;width:12px;height:12px;margin-right:3px;vertical-align:middle;"></ha-icon>`
                : "";
        
              return `<span class="bubble-item">${iconHtml}<span class="bubble-text">${formattedValue}</span></span>`;
            })
          );
        
          card.querySelector(".bubble-state").innerHTML = values
            .filter(v => v && v.trim() !== "")
            .join("&nbsp•&nbsp");
        })()}
        

    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: template
                label: Template
                selector:
                  text:
                    multiline: true
              - name: attribute
                label: Attribute
                selector:
                  attribute: {}
              - name: icon
                label: Icon
                selector:
                  icon: {}
          - name: '1'
            type: expandable
            title: Entity 2
            schema:
              - name: entity
                label: Entity
                selector:
                  entity: {}
              - name: template
                label: Template
                selector:
                  text:
                    multiline: true
              - name: attribute
                label: Attribute
                selector:
                  attribute: {}
              - name: icon
                label: Icon
                selector:
                  icon: {}
          - name: '2'
            type: expandable
            title: Entity 3
            schema:
              - name: entity
                label: Entity
                selector:
                  entity: {}
              - name: template
                label: Template
                selector:
                  text:
                    multiline: true
              - name: attribute
                label: Attribute
                selector:
                  attribute: {}
              - name: icon
                label: Icon
                selector:
                  icon: {}
          - name: '3'
            type: expandable
            title: Entity 4
            schema:
              - name: entity
                label: Entity
                selector:
                  entity: {}
              - name: template
                label: Template
                selector:
                  text:
                    multiline: true
              - name: attribute
                label: Attribute
                selector:
                  attribute: {}
              - name: icon
                label: Icon
                selector:
                  icon: {}
      

---

Screenshot:

Important: The first screenshot here will be used on the Module Store, so please provide one.

[mrgiov]

I've added template section -->@Clooos can u test and merge with your features if all OK

[FRvanderVeen]

I might have noticed a bug after updating to Bubble card v3.1.0.

I'm still able yo add and edit the entities. But I can't select an attribute. At least not with a climate entity. Setting the attribute in YAML still works.

[Clooos]

Thank you for the feedback! I will definitely fix this for the next release 😄

[TrishenSuresh]

Same here, can't change the attribute on the UI

[namealreadytaken2]

same here

[DerHerzog7]

@Clooos any update on fixing this?

[Ro5i]

Hi Clooos!

Thanks your work, this is very good HA stuff!

How can I display data in two rows on the right, as shown on screenshot in your first post?

[Schikocko]

Hi @Clooos,
Is there a way to add create a feature PR to you module. I added the feature to add a custom prefix for each attribute and i though other people might need this aswell.

[Lanovar]

Yes please!

[Clooos]

Hi! Sorry for the late answer! This can be great indeed, you can share your version of the module here and I will probably update it if everything seems ok 😄

[mrgiov]

Hi,
i notice that there are some regressions such as Attribute menu always disabled and a flicker on stases
anyone has the same problem?