See, there were many threads here like “placed Gauge inside CTC - and a needle jumps between 0 and the current value”. It happens because CTC redraws the whole inner card on every change of a “monitored entity” (which is declared in “entities” option). So, for SOME cases using CTC is not recommended. That is why an alternative way was suggested - based on auto-entities card.
Thank you. In my case the underlying entities are not changing very often, and at least at the moment it’s working nicely. If anyone is curious. I used it on the left (which is the actionable calculated value). The small slivers are the hysteresis range. Deciding if I want to put it on each sensor, but at least in this brief trial it is working great.
Thank you for the elaboration. I’ll research further.
One more thing. CTC is using JS & operating on a client side. Assume you have a weak client device - then it may cause issues.
Hi,
I would like to show multiple attributes of an array in a config-template-card.
Would be nice, if it looks like this:
BTC 70 (70%)
NextAsset 30 (30%)
My input sensor looks like this:
With the following basic code, I got at least a value of the array 
type: custom:config-template-card
variables:
assets: states['sensor.portfolio'].attributes.assets
entities:
- sensor.portfolio
card:
type: entities
title: Port
entities:
- entity: sensor.portfolio
name: ${assets[0].type}
ChatGPT suggest a code like this, but I get an error:
type: custom:config-template-card
variables:
assets: >
[[[
const sensor = states['sensor.portfolio'];
return (sensor && sensor.attributes && Array.isArray(sensor.attributes.assets))
? sensor.attributes.assets
: [];
]]]
sorted_assets: >
[[[
const assetArray = Array.isArray(assets) ? [...assets] : [];
return assetArray.sort((a, b) => Number(b.assetV || 0) - Number(a.assetV || 0));
]]]
card:
type: entities
title: ABC
entities:
[[[
if (!Array.isArray(sorted_assets) || sorted_assets.length === 0) {
return [{ entity: "sensor.portfolio", name: "Keine Assets gefunden" }];
}
return sorted_assets.map(asset => ({
entity: "sensor.portfolio",
name: asset.type || "Unbekannt",
secondary_info: (asset.assetP ? asset.assetP : "N/A") + " (" + (asset.assetV ? asset.assetV : "0") + ")"
}));
]]]
Thats the error:
missed comma between flow collection entries (Zeile: 23, Spalte: 57)
Can someone help me with this? Maybe the card type is wrong and I need something like flex table card.
Posting results generated by chatgpt is not appreciated in community - mostly they are wrong.
This what I would try.
But the main question is “what kind of presentation you need”.
Flex-table creates a table, same (& more) can be done in Markdown.
If you chose config-template-card (CTC) just because stock cards unable to show complex attributes (arrays, dicts) - then I would suggest to use other cards.
Oh okay, I didn’t know this. Sorry!
I would like to show a list of assets in the card with 3 or 4 columns e.g.
Asset | Volume | Percentage | Change since
The number of assets (rows) can change over time.
Above or below the table there should be the total value of all assets.
So, the choice should be between flex-table-card & Markdown (which does support tables).
flex-table-card:
– one row = 1 entity, explanations here
– or one row = 1 element of an Array, where Array - some array-like attribute of an entity, example here.
Markdown:
– one row can contain data from different entities.
Discussing these things is an off-topic here, so suggest to ask in other places.
1 Like
Is there a way for one variable to call/use another?
i.e. (below doesn’t work!)
variables:
child: |
const _c = "Use Me"
c
parent: >
(passed_var) => {
const _p = "Please " + child
return p
}General schema:
- variables = list, var_2 does not use var_1.
- variables = list, var_2 depends on var_1.
- variables = dict, var_2 does not use var_1.
- variables = dict, var_2 depends on var_1.
code
- type: markdown
content: |
vars=list
var_2 does not use var_1
- type: custom:config-template-card
variables:
- states['input_boolean.test_boolean']
- >-
(states['input_boolean.test_boolean'].state === 'on') ? 'red' : 'green'
entities:
- ${vars[0].entity_id}
card:
type: entities
title: ${"State is " + vars[0].state}
entities:
- entity: sun.sun
name: ${vars[1]}
- type: markdown
content: |
vars=list
var_2 ~ var_1
- type: custom:config-template-card
variables:
- states['input_boolean.test_boolean']
- >-
(vars[0].state === 'on') ? 'red' : 'green'
entities:
- ${vars[0].entity_id}
card:
type: entities
title: ${"State is " + vars[0].state}
entities:
- entity: sun.sun
name: ${vars[1]}
- type: markdown
content: |
named vars
var_2 does not use var_1
- type: custom:config-template-card
variables:
BOOL: states['input_boolean.test_boolean']
COLOR: >-
(states['input_boolean.test_boolean'].state === 'on') ? 'red' : 'green'
entities:
- ${BOOL.entity_id}
card:
type: entities
title: ${'State is ' + vars['BOOL'].state }
entities:
- entity: sun.sun
name: ${COLOR}
- type: markdown
content: |
named vars
var_2 ~ var_1
- type: custom:config-template-card
variables:
BOOL: states['input_boolean.test_boolean']
COLOR: >-
(vars['BOOL'].state === 'on') ? 'red' : 'green'
entities:
- ${BOOL.entity_id}
card:
type: entities
title: ${'State is ' + BOOL.state }
entities:
- entity: sun.sun
name: ${COLOR}
Your fixed example:
type: custom:config-template-card
variables:
child: |
const c = "Use Me";
c;
parent: >
(passed_var) => {
const p = "Please " +
(passed_var ? passed_var : child);
return p;
}
entities:
- sun.sun
card:
type: entities
entities:
- entity: sun.sun
name: ${parent('xxx')}
- entity: sun.sun
name: ${parent()}
Tried you exact code. But I get:
ReferenceError: child is not defined
When I pass empty string to parent. Running v1.3.6.
Should I try 1.37beta?
Why not ? )))
Just released it & now testing, please join the party.
OK - installed 1.37b. different error in view but no error in chrome console:
Stumped.
Full code:
views:
- title: Home
type: custom:grid-layout
cards:
- type: custom:config-template-card
variables:
a: |
const c = "World";
c;
b: >
(passed_var) => {
const c = "Hello " + a;
return c;
}
entities:
- sun.sun
card:
type: entities
entities:
- entity: sun.sun
name: ${a}
- entity: sun.sun
name: ${b("What")}
FIXED IT!
reading beta change docs…
Define named variables as variables are parsed
If multiple variables are defined then subsequent variables can
currently reference prior variables using `vars['name']` but not just
`name`. This enables variables to reference prior variables by name,
like templates can.
So correct code is: vars[‘a’]
b: >
(passed_var) => {
const c = "Hello " + vars['a'];
return c;
}
First, make sure that browser’s cache is purged.
Next, why on Earth the “b” variable will show “What” since you do not use it???
You hard-coded the “a” value. Compare with my code.
(disclaimer: I am a C/C++ guy since 1996 but know a little about JS, so may be wrong)
See above. Fixed.
Hmm, if you need to use var_1 inside var_2 - you need to use “vars[‘var_1’]”.
It was described above.
And this is not a NEW thing - check the date:
I just copied your code! Ende gut alles gut!!!