Workflows in Wized

Workflows in Wized describe the way you can interconnect various configurations, events, and conditions to create automated, dynamic processes within your web application. By linking element behaviors, requests, variable updates, and conditional logic using the Function Editor, you effectively build a flow that drives the app’s behavior from start to finish.

Think of it as a series of steps where each part of your project such as a form submission, a button click, or an request response triggers subsequent actions. When these steps are connected logically, they form a complete process that adapts to user interactions and data changes in real time.

This approach enables you to:

• Dynamic interactions: Automatically update parts of your interface when data changes.
• Automated processes: Trigger sequences of actions based on specific conditions.
• Personalized experiences: Adjust the user experience based on user input or API data.

---

Key concepts

• Interdependent features:
  Every component in your app (request responses, user inputs, variable updates) contributes to its overall state. For example, a request may update a variable, which then influences an element’s visibility, while a separate input might trigger a CSS change.

• Reactive logic:
  Wized continuously monitors the state of your application. As soon as data changes (like the success or failure of a request), any configuration that depends on that data updates automatically. This reactivity means that the final behavior of your app is the result of many small, interlinked updates.

• Flexible execution paths:
  Workflows in Wized are not linear; they can have multiple execution paths. For instance, after a login request:

  • One event may trigger a navigation action if the request succeeds.
  • Meanwhile, a separate configuration may adjust an error message’s visibility if the request fails. Each of these actions is independent and occurs only when its specific condition is met.

• Using the function editor:
  The Function Editor is your tool to define the logic that connects these features. Rather than "branching" actions directly, it allows you to set up conditions that determine how individual configurations (such as CSS classes, text updates, or visibility changes) react to changes in the app’s state.

---

How to build workflows in Wized

In Wized, workflows refer to the way you connect various reactive features such as requests, inputs, forms, variables, element configurations, among others, to create dynamic processes in your web app. Instead of following a strict trigger condition action pattern, think of your project as a state machine where different parts of your application interact and update independently in real time.

Conceptualizing your workflow

Think of a workflow as a series of connected steps that guide the user experience:

• Step 1: Something happens (e.g., a user submits a login form).
• Step 2: An action is triggered (e.g., a login request is sent).
• Step 3: The result is evaluated (e.g., only if the login is successful, redirect the user).

This step by step approach helps you plan how data and events flow through your application.

Putting it all together

To create a workflow, start by mapping out your process:

1. Outline your steps:
   Decide what should happen first (e.g., a user submits a login form) and what should follow (e.g., perform a login request, then update the UI based on the result).

2. Identify the features involved:
   Determine which Wized features will manage each step such as using a request to authenticate, a variable to store temporally data, and a global event to handle redirection.

3. Define conditions and actions:
   Use the Function Editor to write conditions that control individual configurations or events. For example, configure one element to show an error message if a login request fails, while an event redirects the user if it succeeds.

4. Test and iterate:
   As Wized is reactive, any change in state is immediately reflected in your app. Test your workflow by simulating different scenarios and adjust the conditions as needed.

---

Example: login workflow

This example demonstrates a complete login workflow in Wized, illustrating how various features work together to create a seamless user authentication process. This workflow shows how to capture user input, send a login request, handle the response, update the application state, and finally, navigate the user based on the outcome.

---

Step 1: User enters login credentials

• Setup:

  • A Webflow form is created with the necessary input fields (e.g., email and password).
  • Each input field is given a descriptive name (e.g., email and password).
  • The form is assigned the Wized attribute, making it available in the Data Store (e.g., f.loginForm).

• What Happens:

  • As the user types, the values in the input fields are captured in real time.

---

Step 2: User submits the login form

• element Event trigger:

  • The user submits the form by pressing the Enter key or clicking the submit button.
  • An Submit event is attached to the form.
  • Important: The Prevent Default option is enabled to stop Webflow's default form submission.

• Action:

  • The submission triggers a Perform Request action that sends the login credentials to the authentication request

---

Step 3: Executing the login request

• Request execution:

  • The login request is configured to send the form values (e.g., f.loginForm.email and f.loginForm.password) as key-value pairs.
  • Wized uses the Function Editor to map these values to the request body.

• Example Mapping (in the Function Editor for the request body):

  • For email:

  // Mapping form inputs to the request body
  return f.loginForm.email;

  • For password

    // Mapping form inputs to the request body
    return f.loginForm.password,

• What Happens:

  • The target API receives the login credentials.
  • The request's state (such as hasRequested, isRequesting, status, and ok) is updated in real time in the Data Store.

  Note

  You can display a loader element using the isRequesting state.

---

Step 4: handling the request response

• Global Event Trigger:

  • A "Request Finished" global event listens for when the login request completes.

• Response Evaluation:

  • The response is evaluated using conditions in the Function Editor.
  • For example, you can check if the login was successful with:

    return r.login.ok;

• Outcome Paths:

  • If the login fails:

    • The condition evaluates as false. Then a Visibility configuration on an error message element is triggered to display an error message.

      Example condition for showing the error message:

    return !r.login.ok;

  • If the login succeeds:

    • The condition evaluates as true. Then a separate global event is triggered to navigate the user to the /dashboard page.

    Note

    This event should have a conditional that only executes when the login request was successful.

    Example navigation logic:

    return r.login.ok ? '/dashboard' : '';

---

Step 5: Finalizing the Workflow

• Reactivity and Continuous Updates:
  • Wized continuously monitors the state of the login request and the associated variables.
  • Any change (such as a new login attempt or a user logout) immediately updates the UI based on the defined conditions.
• Integration of Multiple Features:
  • This workflow demonstrates how forms, requests, global events, conditional logic, and navigation actions work together.
  • Each step in the process is independent but interconnected, ensuring that a change in one part (like the API response) automatically triggers the next appropriate action.