Add text with variable in Title Card

[Piero87]

I want to use this card:

• type: 'custom:button-card'
  template: card_title
  name: My Title
  label: 'Subtitle'

And print inside name a string with the user logged name for example:

• type: 'custom:button-card'
  template: card_title
  name: "Hello [[person.me.friendly_name]]"
  label: 'Subtitle'

but seems not working, is that possible?

[basbruss]

You can either add a string or a template to the key. But a template can also include a string.
So have you tried this?

name: "[[[  return 'Hello ' + user.name ]]]

[Piero87]

@basbruss Thank you for the answer, yes in that way works, but I found several example online in which they use this for example:

{{ user.name }}

but doesn't work, for example here

what is the difference? what are those template in home assistant menu?

[basbruss]

The difference is that Home Assistant uses Phyton as code language. To make templating available you can create templates in Jinja2, those work both in the backend as fronted of HA.

But custom:button-card uses JavaScript as code language, therefore Jinja2 is not available, and do we need to template in JS.
HA exposes entities in JS, so we can call them just like you can in Jinja, but we will need the correct JS-syntax.

[Piero87]

@basbruss thank you very much for the explanation, when I can know what template use?

[Piero87]

I add also another question, I can print only values that are passed in the entity? for example if I do this works

• type: "custom:button-card"
  template: card_title
  entity: person.piero
  name: "[[[ return entity.attributes.friendly_name ]]]"
  label: "Subtitle"

but if I do this:

• type: "custom:button-card"
  template: card_title
  name: "[[[ return person.piero.friendly_name ]]]"
  label: "Subtitle"

is not working

[basbruss]

If templates are in a different language than the HA standard you can find it most likely in the documentation 😉

See here for the data that is available within JS https://github.com/custom-cards/button-card#javascript-templates

type: "custom:button-card"
template: card_title
name: "[[[ return person.piero.friendly_name ]]]"
label: "Subtitle"

This does not work by following the documentation, because you will need to call first the states object from HA. As person is not directly available. Then you can pass in the states the entity you want -> states('person.me').state

If you want to access deeper layers of the states object you will need to add a . to access the next key, like attributes. Add another . to access the value of the key in the attributes you want:

states('person.me').attributes.friendly_name

[Piero87]

Ok, I understand, I have tried this:

  - type: "custom:button-card"
    template: card_title
    name: "[[[ return states('person.me').attributes.friendly_name ]]]"
    label: "Subtitle"

but I get this error:
ButtonCardJSTemplateError: TypeError: states is not a function in 'return states('person.me').attributes.friendly_name'

what i'm doing wrong?

[Piero87]

Ok now I understand, this is the right:

• type: "custom:button-card"
  template: card_title
  name: "[[[ return states['person.piero'].attributes.friendly_name ]]]"
  label: "Subtitle"

or

• type: "custom:button-card"
  template: card_title
  name: "[[[ return Hello ${user.name}! ]]]"
  label: "Subtitle"

I missed completely this: https://github.com/custom-cards/button-card#javascript-templates

Thank you very much @basbruss