Why does this custom button card text not render correctly, and how can I fix it?

[teeeeee]

This code renders correctly:

type: custom:button-card
entity: person.tom
show_state: true
show_name: false
show_label: true
label: "[[[ return helpers.relativeTime(states['device_tracker.tom_phone'].last_changed); ]]]"

Now I would like it to instead say “Last Updated: X time ago”. But this seems to fail, rendering as [object Object]:

label: "[[[ return 'Last Updated: ' + helpers.relativeTime(states['device_tracker.tom_phone'].last_changed); ]]]"

Trying as well to copy the example from the documentation here also gives the same result:

label: >
  [[[
    var lastupdated = helpers.relativeTime(states['device_tracker.tom_phone'].last_changed);
    return 'Last Updated: ' + (lastupdated);
  ]]]

Can anyone help with how to achieve this?

[Hellis81]

The only thing I can think of is that it’s trying to use plus as mathematics.
Try and replace the + with ~

[teeeeee]

Nope, doesn’t help.

[tom_l]

Try this:

label: " 'Last Updated: '[[[ return helpers.relativeTime(states['device_tracker.tom_phone'].last_changed); ]]]"

[teeeeee]

No unfortunately not, just renders literally:

[teeeeee]

Interestingly, if I remove the “relative time helper”, then it works (but ofcourse shows absolute rather than relative time):

Although the relative time helper is recommended in the docs here (scroll down a little).

Something to do with the object returned by this helper not being able to be converted to a string?

[tom_l]

Have you tried using helpers.relativeTime(entity.last_changed)

[teeeeee]

Yes, it just renders as [object Object] again.

[WallyR (Wally)]

Put the line into the template in developer tools.
Object object means you do not get a single value returned, but instead a complex object, which might be a list, a dict or some other set of data.

[parautenbach (Pieter Rautenbach)]

Try .state.last_changed.

[teeeeee]

But helpers.relativeTime will not work in the Developer Tools template tester, right? Because it’s a JS function which is from the custom button card?

[teeeeee]

Do you mean still use the device_tracker.tom_phone syntax? Can you give the full line that I should try in the label field?

[parautenbach (Pieter Rautenbach)]

Either will work, granted entity is the device tracker.

states['device_tracker.tom_phone'].state.last_changed

Or:

entity.state.last_changed

[teeeeee]

Okay. No, both these fail to show any result at all.

[parautenbach (Pieter Rautenbach)]

I checked the docs now and there might be an error (contradiction).

Please try this format:

• Example: return helpers.formatDateTime(entity.attribute.last_changed)

[teeeeee]

With the following:

label: "[[[ return 'Last Updated: ' + helpers.formatDateTime(entity.attribute.last_changed); ]]]"

I receive an error:

[parautenbach (Pieter Rautenbach)]

Make it plural: attributes.

This is what I use in my own cards. Seems like that example in the docs is incorrect too.

[teeeeee]

The following code as suggested also gives a similar error:

label: "[[[ return 'Last Updated: ' + helpers.formatDateTime(entity.attributes.last_changed); ]]]"

@parautenbach Could you double check the entire line for me? Make sure I didn’t do something unexpected?

[robertklep]

Dirty hack:

label: |-
  [[[
  return html`
      Last Updated:
      <ha-relative-time
          id="relative-time"
          class="ellipsis"
          .hass="${this._hass}"
          .datetime="${states['device_tracker.tom_phone'].last_changed}"
        ></ha-relative-time>
  `
  ]]]

It basically re-implements relativeTime() (source).

[teeeeee]

Nice. Thanks. This solves the problem:

There is an open Github issue thread for this here:

DateTime helpers do not accept additional characters or helpers

It solves the “how can I fix it” part of the question for me, but not the “why” part!