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

[vp-lab]

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!

[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;
  }