Using collection data in a OnMounted Workflow

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!

1 Like

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.

3 Likes