Using collection data in a OnMounted Workflow

[fguati]

Hi everyone!

I’ve recently started using WeWeb and so far have been really enjoying it! However I hit a snag that I am not sure how to solve…

For context, in a project I’ve been developing I decided to create a multidrop component to use in several places and this component has an exposed “value” variable that houses its current value and a “initial_value” property that defines the initial value this variable should have.

To implement this initial value I created a workflow that sets the variable “value” to the “initial_value” property and call it with the On Mounted event of the component.

Now, the issue comes when I have an instance of the component where the initial value is a collection. I suspect that whats happening in this case is that my On Mounted workflow runs before the collection is loaded and as a result the initial_value is empty when its supposed to be loaded on the current value variable.

I was able to get around this issue by calling the workflow with the On Page load event, but thats not ideal as it means I will have to set up this workflow on every page that has the component and call it for every instance, which is just kind of clunky.

So my questions is: is there any way to make sure this workflow runs only after the collection finished loading? Or any other way of doing this exact same thing I am trying?

I Thanks to everyone in advance!

[Broberto]

Hi, yes, this is quite common because the collection are what you’d call asynchronous. This means, that it’s completely independent from anything happening in your app and it can take a 200ms or even 5 seconds on slower connections - simply put, it can’t be predicted when the collection resolves - if it even resolves.

In your case, there is a simple fix. You can simply create an another workflow, as you did with the onMounted one, which by the way is a great pattern, so kudos for that. This new workflow will listen to the changes of your value variable and fire whenever it changes. This is a common pattern I use in my components as well.

I usually have two workflows going on. One is onMounted / onCreated, which sets the value if it’s readily available at that time. Then there is a another - usually very similar to the other one, which fires on a specific variable change.

In my case, I’m listening to the changes in the Init value variable as you can see here.