Ok so I id like to trigger a workflow on a variable change. How do I do this in its simplest sense?
Thanks in advance! Jon
1 Like
So far Ive been trying out weweb fro about a month.
Its been great but other than gracious contributions from @Broberto and @dorilama, the support from anyone from Weweb directly has been lacking @Joyce @Alexis
Should be a simple Q&A here that Ive asked aboveā¦ Im sure many users have had this same question so lets answer it once here and it will be available for everyone else in the forum here forever 
1 Like
Iād love to know if thereās a way to do this as well
Hi @Jonny, I guess it would depend on:
- what type of variable is changing,
- how itās changing, and
- what needs to happen when it changes
Can you give us more information about your use case?
Thatās the beauty of the community! Lots of different users can contribute with their different expertise. @Broberto is a Supabase king for example and @dorilama my #1 custom code reference! 
When I see community users answering a topic, I avoid chiming in unless I think I can add something of value because I donāt want to disturb the flow of the conversation or create confusion.
From what I can see, you created 5 topics before this one, got answers for all 5 of them, and @Alexis and I contributed to 2 of those 5 topics so for me, itās job done unless you tell me otherwise. Is it important for you that a WeWeb team member contributes to every discussion?
Would love your feedback on this so we can better understand how to make this community as useful and helpful as possible.
1 Like
@Joyce No its not important that a weweb member contributes to every single discussion, and though its the hot trend to not really offer support for software these days and have forums such as this, I think that it makes sense for those software companies to have a lot of topics answered and discussed already (for users to parse) or be scouring the threads quickly if one of the other champions happens to not get to them quickly.
I completely rebuilt my app on weweb from bubble in like 2 weeks and only had like 5 questions, so that speaks to how simple weweb really is. Its jsut the questions that I needed answered I come here, after about an hour of trouble shooting on my own, so it helps to know there is at least a moderately quick way of getting a response.
I didnāt know you were just letting them have at it, I was just hoping that someone from Weweb was looking at the forums hourly or so, as opposed to every 3 days which is what i thought lol
Anyways, essentially I am just trying to change a page based variables (a json variable) and then if that variable changes, run another workflow (the workflow can be anywhere in the app), i just need to trigger the workflow somehow to run based upon that variable changeā¦ It is this variable object and it will be updated from another workflow (user triggered)ā¦
The variable is edited when the user completes the oauth flow, and at that point the variable changes, and that variable is the data i need to have in supabase. If I just continue with the workflow as is, it will run too quickā¦
1 Like
Canāt you trigger the change on the end of oAuth flow? I see it very difficĆŗt as of now to listen to variable changes. Even tho the topic has already been asked here a few times.
There are some ways, like a custom component listening to changes, but that could come costly as you need a workspace plan for that.
You could recurringly listen for changes via a recursive js function, but that would be heavily resource innefective.
I think your best bet is to trigger the global workflow (that should be possible) on the end of your oAuth flow.
I might be able to write a script for this with vue petite (6kb bundle size) but Iād need to know if there are any updates to this coming, so I dont waste time on something that gets a native patch in a few days. @flo
Hi, not possible in a nocode way at the moment.
The best is to create a global workflow doing the change and the flow you want to execute after the change and always use this global workflow to update the variable. A kind of getter/setter pattern.
We opened a ticket internally to think about this usecase (I personally want it for a lot of time), and have a nocode watch function. But it will probably not be treated before component.
I am wondering if we can just configure a watch with the Vue instance in the meantime.
Note: So i checked and
- The app instance
wwLib.getFrontWindow().vmis available in both editor and published app. But it seems it does not expose the watch function - The Vue instance
wwLib.getFrontWindow().Vueis available only in the editor. I open a ticket to maybe as a quick workaround expose it in the publised app as well. It will let you access Vue.watch function then
3 Likes
@Jonny not sure if this is helpful. Iāve included an example below where onLoad Iām waiting for a response code to be received, Iām checking for that response to not be empty every second with a limit of 8 attempts, if the response is received Iām updating a variable and executing a global workflow.
Iām using this pattern across a number of other areas and find the āwhileā loop most effective. And iām doing it for the same reason of delaying a call to Xano.
Depending how long you are āwaitingā for a user to complete the oauth flow, you could execute a similar script on the first user event and adjust the setTimeout value so that it gives reasonable time for them to complete the required steps.
<script>
console.log("Starting function turnstile")
function onloadTurnstileCallback() {
turnstile.render(
turnstile.execute("#cf-turnstile-container", {
callback: function (token) {
console.log(`Challenge Success ${token}`);
const retryLimit = 8;
let retryCount = 0;
let response = "";
function handleResponseAndRetry() {
console.log("Starting handleResponseAndRetry")
let response = turnstile.getResponse("#cf-turnstile-container");
console.log(response);
while (response === "" && retryCount < retryLimit) {
retryCount++;
console.log(`Empty response. Retrying (${retryCount}/${retryLimit})...`);
setTimeout(handleResponseAndRetry, 1000); // Retry after 1 second
}
if (response === "" && retryCount === retryLimit) {
console.log("Maximum retry attempts reached. Exiting...");
return;
}
console.log(`Execute workflow 'cf-xanoCallback'. Retry count (${retryCount}/${retryLimit})...`);
wwLib.wwVariable.updateValue("8a799d83-2049-4b21-a38c-6622265f38d4", response);
wwLib.executeWorkflow("6b1605eb-6fb1-47dd-9ef4-0d5ad47cf919");
}
handleResponseAndRetry();
},
})
)
}
</script>
That would be amazing, this would save me importing vue petite and doing this via their methods. That would be cool
I whipped up a script composing that with executeWorkflow to address your use case:
The complicated part is subscribing to variable changes. I previously made a video on the core of this question that you might find of interest:
3 Likes
Lots of great stuff here @Broberto @raydeck @MichaelLovell @Alexis
Will try a few of them out and post back.
To address a few of the aforementioned thoughts, yes the primary use case (for me at least) is for an oauth flow within the app. The user clicks a button, opens a new tab and goes through the oauth flow.
They can take 1 minute for the oauth flow, but who knows, maybe they have the tab open an hour or finish it up the next day, so the ātime basedā oauth scenarios arent the best.
Essentially this would be an global āevent listenerā type of situation where once there is any oauth credential added, we catch it and I can then add it to xano/supabase whereverā¦ @MichaelLovell @raydeck - I will try bot of the scripts mentioned in your posts and post back here soon!
Thanks again guys! Hopefully others get use out of this as well!
Jon
Hey guys, quick questionā¦ Would this be simpler If I didnt have any sort of weweb variable at all? I dont āneedā a variable in weweb, I jsut need to catch the credentials after they finish oauth flow and then initiate the workflow based upon thoseā¦Would the variable in weweb being updated not be an added step which we wouldnt need? Thanks!
Howdy guys! @Broberto @raydeck @MichaelLovell
I have tried this script:
//Function to trigger callback when a specific weweb variable at a given ID (e.g. 1234-dba3-dffgg etc) changes
const wwSubscribe = (key, callback) => {
const window = wwLib.getFrontWindow();
if (!window.__subscribedValues) window.__subscribedValues = {};
window.__subscribedValues[key] = wwLib.wwVariable.getValue(key);
return wwLib.$store.subscribe((e, t) => {
if (e.type == ādata/setVariableValueā) {
const v = t.data.variables[key];
if (v && v.value !== window.__subscribedValues[key]) {
window.__subscribedValues[key] = v.value;
callback(v.value, key, window.__subscribedValues[key]);
}
}
});
};
//Function to trigger workflows when a variable changes
const triggerWorkflowFromSubscribe = (variableId, workflowId) => {
wwSubscribe(variableId, (value, key) => {
wwLib.executeWorkflow(workflowId, { value, key });
});
};
//Demo - letās run the function to run the workflow when the variable changes
triggerWorkflowFromSubscribe(āvariables[ā80624cae-f0bd-4f72-9437-6e952fa5a173ā]ā, ād50090c7-ae47-4616-a6c2-aaac5249a357ā);
I have inserted the variable to use as the ātriggerā and the workflow ID to execute when this is supposed to run. It does run on page load, however, doesnt seem to be executing the workflow when the variable is changedā¦ I have confirmed that the variable is changing, just not executionā¦ Any flaws in the code that Ray made so graciously
thanks!
There may be other issues, but triggerWorkflowFromSubscribe take the variable ID as its argument. e.g.
triggerWorkflowFromSubscribe('80624cae-f0bd-4f72-9437-6e952fa5a173', "d50090c7-ae47-4616-a6c2-aaac5249a357");
not
triggerWorkflowFromSubscribe(āvariables[ā80624cae-f0bd-4f72-9437-6e952fa5a173ā]ā, ād50090c7-ae47-4616-a6c2-aaac5249a357ā);
@raydeck That was it! Yeah I thought I could pass it in but I just went over to Dev editor and snagged it. Just tried it now (albeit only once) and it worked beautifully!
2 Likes