Intro to workflows

When to use workflows

Workflows are helpful to add reactivity to your WeWeb apps without defaulting to code.

For example, you can trigger workflows to react when a user clicks on a button, types something in a search bar, or hovers over a marker on a map.

In the example below, when a user logs in, we redirect them to a different page based on their role:

You can:

1. test the full workflow
2. setup a separate workflow if the default runs into an error
3. choose the event that triggers the workflow (e.g. on click, on mouse enter, etc.)
4. add an action to the workflow
5. test an individual action
6. click on the three vertical dots to copy/duplicate/delete an action
7. zoom in and out of the workflow
8. edit the settings of an action
9. close the workflow view to return to the editor

TIP

With the Custom JavaScript action, you can add code in your workflows, but you don't have to.

Global vs local workflows

In WeWeb, you can create 2 types of workflows:

• global workflows (that you can execute anywhere), and
• local workflows that you can create at app level, page level, or element level.

Whenever possible, we recommend creating a global workflow that you then execute at app, page, or element level.

Learn more about workflow best practices.

Create global workflows

Global workflows are workflows that you create in the Data tab of the left panel in the WeWeb Editor.

These workflows have a global scope. You can execute them anywhere in your app:

• at app level,
• at page level,
• at element level.

In the example below, we have three global workflows and execute one on a login button:

Filter on current page

To see if a global workflow is used on a page, you can toggle the All pages switch:

In the example above, you can see we are currently on the Characters page and only the Login workflow is being used on that page.

Element workflows

Element workflows will trigger on a specific element.

You can execute a global workflow on an element as described above, or you can create a workflow at element level.

In that case, you will not be able to execute the workflow elsewhere because the workflow will not be available globally:

In the example above, you can see:

1. on a card element,
2. in the workflow tab,
3. we created a workflow that triggers when the user clicks on the card, and
4. that workflow is not available as a global workflow because we created it locally

Element workflow triggers

Depending on the element, you will have access to different triggers.

For example:

• on click,
• on mouse enter,
• on mouse leave,
• on chart click,
• on map click, etc.

Page workflows

You can execute a global workflow on a page as described above, or you can create a workflow at page level.

In that case, you will not be able to execute the workflow elsewhere because the workflow will not be available globally.

In WeWeb, you can trigger workflows on page load. Go to the page's settings, Trigger workflows:

Page workflow triggers

Examples of workflows you could trigger on page load:

• display a popup,
• initialize a variable,
• send custom tracking data.

TIP

The On page load (before fetching collections) trigger can be helpful when the data you load on the page depends on the current user's information.

For example, you might want to display news items that the user has not yet read or load only the data that matches the user's role in the organization.

App workflows

App workflows will trigger on all the pages of your WeWeb app.

Common use cases include but are not limited to:

• check that a user is logged every time the app loads,
• display a custom alert whenever there is a collection fetch error in your app,
• change the color of a top navbar when the user scrolls down any page in your app.

Triggers include:

• on app load before fetching collections
• on page load before fetching collections
• on app load
• on page load
• on page unload
• on collection fetch error
• on page scroll
• on page resize

How to trigger an app workflow

To trigger a workflow at app level, go to More > App workflows. This will open a panel where you can

This will open a panel where you can create a new workflow:

When you trigger a new workflow at app level, you can can choose to build the workflow from scratch or execute a global workflow.

In the example below, on page scroll, throughout our app, we execute a global workflow to change the navbar color:

Best practices

In the Actions tab of the left panel, you can set up global workflows that you can re-use throughout your application.

This approach has three big benefits:

1. you can manage all your workflows in one place inside the WeWeb Editor
2. you can see if a global workflow is being used on a specific page
3. you can create a workflow once and execute it in multiple places

This will save you a lot of time from the start and become more and more helpful as your app grows in complexity.

When you need to debug or update a feature that is used throughout the app, you'll only have to look at one global workflow instead of multiple local workflows.

This last point is critical when you build large projects that require complex workflows.

The more complex your app, the more room for error and need for efficient debugging.

That's why you need an API management center where you can edit a workflow in one place, knowing that it will update every instance of that workflow in the app.

Just as you would write functions in code to handle repetitive tasks, you'll want to use global workflows in no-code to handle repetitive user interactions.

Learn more about building an API management center to scale your app

Recurring tasks

WARNING

WeWeb is a frontend builder. It follows that WeWeb's workflows allow you to build frontend logic, to display popup alerts, send an email when a user clicks on a button, or filter data for example.

If you are looking to program recurring tasks, i.e. CronJobs, to perform regular scheduled actions, we invite you to create backend logic in the backend of your choice.