Why can't you add an action result as value for a dynamic attribute from the UI?

Wappler General How To
#1

@George I’ve always wondered.

Why can’t I do this from the UI?

<img dmx-bind:src="jonl_avatars_dicebear1.generate('JonL')">

#2

With the UI you can only call component methods as actions on dynamic events. If you use a component you should set its data and then use that in the expression. Instead of using a component you could make it a formatter.

WARNING: The expressions get evaluated on each update, so the generate method is called many times. To optimize you would want to use Memoization.

Sample formatter using the http api of dicebear

<img dmx-bind:src="'JonL'.dicebearAvatar('pixel-art', 'svg')">

(function() {

const defaultStyle = 'adventurer';
const defaultFormat = 'svg';
const cache = new Map();

dmx.Formatter('string', 'dicebearAvatar', function(seed, style, format) {
  if (!cache.has(seed)) {
    // Here uses http api, but you can also call here the generate function
    // this is only called once per seed
    cache.set(seed, `https://api.dicebear.com/5.x/${style||defaultStyle}/${format||defaultFormat}?seed=${seed}`);
  }
  return cache.get(seed);
});

})();
1 Like
#3

I thought about the formatter, but I had the constant updating in my mind. I didn’t think about memoization. Will check that for sure.

But is this a restriction on the UI or a good practice for App Connect? Given that I can perform the same memoization optimization on the component mehtod.

#4

While it doesn’t matter for App Connect we never intended the component methods to be used to retrieve data since you can already access the data of the component directly.

1 Like
#5

Thanks Patrick,

Yeah. I understand. All in all it’s how it works for the rest of the components but it seemed more intuitive just to call the generating function for the src of an image in a repeat scenario.