Wized Docs

Appearance

Inputs ​

Introduction ​

Inputs allow you to monitor and manage all the input fields on your page that you have connected with Wized. Here you can see their values in real time and use them to create dynamic and personalized interactions in your application.

What will you find in the "Inputs" section? ​

  • List of Inputs: A complete listing of all the input fields on the currently selected page that have the wized attribute. These are the inputs that Wized recognizes and can interact with.
  • Real-Time Values: Next to each input, you will see its current value in real time. Each time the user interacts with the field, the value will automatically update in the dashboard.

How to use Inputs in Wized? ​

Inputs have a dual role in Wized:

  • As a Data Source: You can use the values of the inputs in the Function Editor to create custom conditions and logic.

For example:

  • Show an error message if a field is empty:
javascript
// In the "Set Visibility" configuration of an error message element:

return i.myField.trim() === '' ? true : false; // Checks if the field is empty
  • Calculate the total of a purchase based on the selected quantity:
javascript
// In the "Set Text" configuration of an element that displays the total price:

return `Total: $${(r.request_name.data.price * i.items).toFixed(2)}`; // Calculates the total formatted to two decimals
  • As Interactive Elements: You can associate specific events with the inputs to trigger actions when the user interacts with them. Some common configurations for inputs are:
    • On Change: Triggered when the value of the input changes.
    • On Input: Triggered every time the user types or deletes a character in the input.
    • Set Input Value: Allows you to programmatically set the value of an input.

How to send the collected data? ​

  1. Wized attribute on the button: Ensure that the element acting as a button has the wized attribute with a unique value.
  2. Associate an On Click event: In the Wized configuration panel, select the button and associate the On Click event.
  3. Perform the request action: Within the On Click event, select the action to Perform Request and configure the API request you want to execute.
  4. Send the data in the request body: In the Function Editor of the request that will be executed, you can access the input values using the parameter i and send them in the request body.