How to pass a variable into a custom card?

Configuration Frontend
1

example:

- type: custom:alarm_control_panel-card
  entity: alarm_control_panel.alarm
  title: My Alarm
  scale: 25px

notice the scale: 25px. Scale is passed into the card and used in the custom card JS in the CSS portion of the JS file as --base-unit: ${this._config.scale}; I’m trying to do this in a custom card I’m working on, but I cannot figure out how to do it properly, my card keeps showing red and giving me the error i.setConfig is not a function

in setConfig(config) i’ve added the bottom two lines:

  setConfig(config) {
    this.config = config;
    if (!config || !config.cards || !Array.isArray(config.cards)) {
      throw new Error('Card config incorrect');
    }
    
    if (!config.item_width) config.item_width = '15px';
    if (!config.item_height) config.item_height = '15px';

I’m just trying to allow the user of the custom card to choose a width and height but I keep getting a red error card, and obviously I don’t know what i’m doing.

I’m currently trying to do this in another custom card called column-card that works fine until I try to bring in any variable.

1 Like
2

I would love to see something like a list picker card. It would be nice to be able to give the user the ability to select, for example, how many hours they planned to leave the house, and then turn down the thermostat while they were away, but turn it back up early enough that the house wasn’t cold when they returned.