I’m developing a complex swipeable card widget and facing a challenge with dynamic image mapping. I want to know if the following logic is supported in a YAML widget:
The short answer is that yes you can do almost all of what you want to do in widget expressions (most loops or other flow controls are not available as those are statements and not expressions). This sort of complexity is exactly why the oh-context exits.
You can define your lists as named keys in the constants property of the context and then access them in expressions like const.url[1]. You can create reusable functions in the functions context property and call those with fn.getUrl(someValue). Most javascript methods are available and the best way to find out if the one you want is one of those is to just test.
Just using widget expressions it is difficult to run into performance issues on most browsers and devices. The real bottleneck comes if you are making a lot of API requests via an oh-repeater.
Assuming that checkitem contains the name string of an item, yes. That is equivalent to items.checkitem.state.
There are some limitations inherent to the oh-context. Mostly, any one of the context properties cannot access the other things defined in that same context. But you can call nested functions in the widget expressions themselves fn.func1(fn.func2('apple')) and you can also next oh-context components if you really need to nest certain objects outside of the main widget expressions.
This is always another viable option. Which one I would recommend in any given situation depends on the specifics of that situation. The primary difference would be that if all the computation is restricted to the widget definition, then different instances of MainUI can be utilizing different results simultaneously. If, on the other hand, the computation is off-loaded to a script, that will most likely impact all currently running instances of the MainUI simultaneously.
I have a draft of a tutorial that will cover almost all of this but I’m in the middle of a very busy season at work, so I haven’t had a chance to polish it up and get it posted. With luck it’ll be ready in the next few weeks.
No, you cannot use full javascript. Everything has to be an “expression” which is a specific level of complexity.
if (x == 20) {
const newX = 15
x = x - newX
console.log('adjusted x')
}
An expression is basically something that can be reduced down to a value. The code above has several expressions in it (e.g., x == 20 or 'adjusted x') but if ... is a statement and const ... is a variable declaration; these are not expressions and will not be properly evaluated by the widget expression parser. A good rule of thumb is “can this code be what follows an = in javascript?”. If yes then it’s an expression:
var test = (x == 20)
In this case x == 20 is a valid expression because it evaluates to true or false and so the variable test is properly assigned the value true or false.
If the code does not make sense after an = then you can’t use it in the widget yaml.
var test = const newX = 15
is not valid javascript because const newX = 15 is not an expression. You can’t use const newX = 15 in widget yaml.
