I have a form with different form elements. Each form element is a nested component which can be set to a list of different types (number, short answer, radio-group, etc. …). Depending on the type, inside the ‘conrol’ component a specific form control is rendered. So for each form element, there is the outer and the inner component.
Now, I want to execute a workflow on the ‘control’ component level to perform some actions for every control (so I put it in the outer component) and a type specific workflow for each form control type on the form control level (so I put it in the inner component). It’s essential, that the “outer” workflow is completed before the “inner” workflow starts. In my understanding though, they both are executed asynchronously, so it might be, that the “inner” workflow is executed too early (which is, what I am struggling with).
Is there a way to force synchronicity between workflows?
Hi @rikoentw
This is how JavaScript naturally works. You shouldn’t render inner components until outer component is ready. You can use conditional rendering for making sure the inner component only renders if outer component is “ready”.
It is indeed the behavior I would expect from WeWeb that the workflow of the parent component is executed first, followed by the workflow of the child component. However, WeWeb does not seem to enforce this “natural” behavior. I resolved this issue using conditional rendering, as you suggested, ensuring that the child component only renders after the parent workflow completes. But it’s kinda tricky to deal with this when the sequence of workflow execution is not apparent.
Should the no-code user really be responsible for adding conditional rendering to make this work the “natural” way? Is there maybe a more detailed documentation on the execution of workflows in WeWeb?
I am not sure what you actually meant by
You shouldn’t render inner components until outer component is ready.
So, let me get this straight. I looked up how vue.js renders child components and it appears that parent.created() comes before child.created() but child.mounted() comes before parent.mounted(), which kinda makes sense.
Source
In other words, when I need to perform some parent workflow after the parent component has been mounted (because I need to access the DOM for example), but I want to ensure that the child’s workflows are not executed before that, I need to control this with conditional rendering of the child (But with oncreate, this is not necessary)?
So, the child’s workflows may be triggered before or after the parent’s workflows depending on the life cycle/event hook?
Also, workflows are triggered in sequence, but are executed in parallel, is that correct?
Are there any differences between vue.js and WeWeb in this regard?
