Wized Docs

Appearance

Element Events ​

Introduction ​

Element Events are the interactions that the user performs with your application, such as clicking on an element, entering a value in an input field, or submitting a form. Wized allows you to "listen" for these events and respond to them by executing specific actions.

How does it work? ​

event-tab

  1. Select the element: In the Wized elements panel, click on the element to which you want to add this configuration.
  2. Associate the event: Go to the "events" tab in the properties panel.
  3. Choose the event: Use the dropdown menu to select the event you want to "listen" to. You can choose from a wide variety of standard JavaScript events, such as click, submit, change, input, focus, blur, keydown, etc. Check the full list.
  4. Select the action: Choose the action you want Wized to perform when the selected event occurs.
  5. Configure the action: Depending on the action you select, you will have different configuration options. For example, to Make a Request, you will need to specify the API request you want to execute.
  6. Add a condition (optional): If you want the action to execute only under certain circumstances, you can add a condition in the Function Editor. This condition must return a boolean value (true or false).

Available Actions ​

Actions are tasks that Wized performs in response to an event. You can chain multiple actions to create custom and complex workflows.

  • Modify Cookie: Modifies the value of a cookie.
  • Modify Variable: Modifies the value of a variable.
  • Custom Function: Executes a custom JavaScript function to perform more advanced operations or interact with external APIs.
  • Make a Request: Executes a request to an API to fetch or send data.

Managing Actions ​

All actions within an event can be easily managed:

  • Add New Actions: Insert a new action at any position within the chain.
  • Reorganize Actions: Rearrange actions by dragging them to the desired order. This flexibility lets you define precise workflows, as each action executes sequentially after the previous one.
  • Delete Actions: Remove actions that are no longer needed.

This level of control allows you to build complex and customized flows tailored to your application’s needs.

Reactivity in Wized ​

Wized has the ability to instantly react to changes in your application. Whenever any change in the state of your application is modified (for example, by changing the value of a variable or cookie or receiving a response from an API), Wized automatically re-evaluates all the conditions you have defined in your item settings.

If the result of any condition changes, Wized instantly updates the appearance or behavior of the relevant elements, without requiring a page reload.

Why are there no actions like "Set Text" or "Set Visibility"? ​

The rationale behind this is Wized's reactivity. Instead of having separate actions for every possible change to an element's appearance or behavior, Wized lets you define those settings directly on the elements, along with conditions that determine when they are applied.

How does it work? ​

  1. Configure your elements: Use the Set Text, Set Visibility, Set Style, etc. settings to specify how you want your elements to behave in different scenarios.
  2. Add conditional logic: In the Function Editor, write the conditions that determine when these settings will be applied. You can use any data available in Wized, such as variables, cookies, or API responses.
  3. Wized does the rest: Whenever an event occurs that modifies the state of the application, Wized automatically re-evaluates all the conditions associated with your elements' configurations. If a condition changes, the corresponding configuration is updated instantly.

Practical examples ​

  • Display a confirmation message when submitting a form:
    • Event: On Submit in the form
    • Action: Set Variable to set a formSubmitted variable to true .
    • Setting in another element (for example, a confirmation message): Set Visibility with condition v.formularioEnviado .
  • Refresh a product list by changing a filter:
    • Event: On Change in a category dropdown menu
    • Action: Perform Request to obtain the products of the selected category.
    • Setting on a list item: Render List to display products obtained from the API.
  • Validate an input field in real time:
    • Event: On Input in an input field
    • Action: Custom Function to validate the entered value and display an error message if necessary.