Trigger a workflow via JavaScript

Ask us anything
1

Questing for the WeWeb team: is it possible to trigger a workflow via custom JavaScript in WeWeb?

I have 3rd party forms (Paperform) embedded in WeWeb via custom JS on an HTML element (screenshot here — it was a nice workaround inspired by this comment).

Paperform’s JavaScript API has submission events that would be create a nice trigger to a WeWeb workflow (such as a page redirect), but I haven’t found any resources to doing this.

So, I’m wondering—is it possible to call a function/workflow in WeWeb from this Javascript?

Here’s what that the custom code might look like.

<div data-paperform-id="${WeWeb variable id}" onsubmit="${WeWeb workflow id}"></div>
<script>
  (function() { 
    var script = document.createElement('script'); 
    script.src = "https://paperform.co/__embed";
    document.body.appendChild(script)); 
  })()
</script>

My question isn’t necessarily relevant to my exact project as I can still achieve the desired functionality without it—it just requires a page refresh: I’m currently passing variables to Paperform and then passing them back to WeWeb via their “redirect on submission” settings, where I include the variables in a dynamic redirect. However, I could see this being a blocker for future front-end JavaScript integrations where there isn’t a workaround like the one I currently have in place.

1 Like
2

Hey,
This is probably doable, but in a hacky way for the moment.
I will push your need to the product team so we have it in mind for the future.
The solution will probably be to expose you an execute workflow function via the wwLib object.
What interface will you want? Pass the id (we can display it in the dev info) or the name of the global workflow? Only global workflow or also some element workflow?

3

how about having an opt-in flag in every workflow? This way instead of exposing all your workflows globally you create an allow list of exposed workflows.

4

I wouldn’t use this feature personally as this can be easily achieved by plugin.
I am proposing to make it opt-in only to avoid having all the workflows exposed by default

1 Like
5

Also, looking at the html you are embedding, be careful to trust the content of the variables you are adding dynamically as it can bring to XSS attacks (eg. "><script>alert(document.domain)</script>) because you are updating the element innerHTML using the v-html directive.

1 Like
6

All workflows are already available on the Vue store, i will just expose our internal method which take a workflowId and execute it. No script injection, just a new method on the wwLib global variable.

1 Like
7

Great to know. Thank you, @aurelie. I just wanted to make sure that it wasn’t a definitive “This isn’t possible and likely won’t be possible for a long time.” It’s really helpful to understand how far I can push WeWeb with this sort of functionality.

As far as the interface, I was thinking it would make sense for me to to select the function by the name here and the workflowId would get added to the Custom JS (similarly to other variables are added).

Screen Shot 2022-08-03 at 8.56.36 AM
Screen Shot 2022-08-03 at 8.56.36 AM908×1374 169 KB

This particular example would have been a global workflow.

1 Like
8

This is a bit above my technical knowledge, but I’d endorse whichever method is most secure. It sounds like @aurelie you might be saying that there isn’t actually a risk of a XSS attack?

9

Standard considerations about security apply, the most critical is: are you inserting user generated content in the html component?
If yes you should assess if this can be a problem in your specific case.

Here is an example:
chrome_4EKBR3O0FK

A custom plugin instead can avoid this kind of problem.

2 Likes