Wized Docs

Appearance

Set HTML Attribute ​

The Set HTML Attribute action in Wized enables you to modify the value of any HTML attribute of an element efficiently.

How It Works ​

  1. Select Element: Start by choosing the element in the element panel to which you wish to apply the settings.

  2. Apply the Set HTML Attribute Setting: Navigate to the Settings tab in the properties panel and select the Set HTML Attribute action.

  3. Specify the Attribute Key: Input the name of the HTML attribute you intend to modify (for example, src, href, class, etc.).

  4. Define the Value in the Function Editor: Utilize the Function Editor to specify the new value for the attribute. You can incorporate any data available in Wized, such as variables, cookies, API responses, or values from other inputs.

  5. Add Conditions (Optional): If desired, you can include a condition in the Function Editor to modify the attribute only under specific circumstances.

Remove an HTML Attribute ​

To remove an attribute from an element, simply return a null or undefined value from the function in the Function Editor.

Examples ​

  • Change a Product Image:

    • Attribute: src

    • In the Function Editor, enter:

      javascript
      return r.getProduct.data.imageUrl; // Retrieves the image URL from the API response

  • Update a Button Link:

    • Attribute: href

    • In the Function Editor, enter:

      javascript
      return v.destinationPage; // Provides the URL stored in a variable

  • Enable or Disable an Input:

    • Attribute: disabled

    • In the Function Editor, enter:

      javascript
      return !v.formularioValido; // Disables the input if the form is invalid

  • Show or Hide an Element Using a Custom Data-* Attribute:

    • Attribute: data-visible

    • In the Function Editor, enter:

      javascript
      return c.usuarioPremium ? 'true' : 'false'; // Displays the item only if the user is a premium member