Wized Docs

Appearance

Set Visibility ​

The Set Visibility configuration allows you to dynamically show or hide elements of your website.

How does it work? ​

The Set Visibility feature applies to a specific element and uses a condition defined in the Function Editor to determine whether the element should be shown or hidden.

  • Condition: A JavaScript expression that Wized evaluates to decide whether to show or hide the element. Its result must be a boolean value (true or false). You can use any information available in your application, such as the value of a variable, the contents of a cookie, an API response, or the current page, to create flexible, custom conditions.
  • Reactivity: Wized constantly monitors the state of your application. If the condition associated with the Set Visibility feature changes, Wized automatically updates the visibility of the element in real time, without the need to reload the page.

Practical Use Cases ​

  • Show content only to authenticated users: Hide items only for members or administrators until the user has successfully logged in.
  • Customize welcome messages: Display different welcome messages based on the user's name, location, or other preferences.
  • Create dynamic forms: Show or hide form fields based on user selections or information obtained from an API.
  • Show error or success messages: Hide messages until a specific condition is met, such as a successful form submission or an error response from an API.
  • Create animation effects: Combine Set Visibility with CSS transitions to achieve fade-in and fade-out effects for elements.

Example: Display a Button Only for Administrators ​

Imagine you have an "Edit Content" button that should only be visible to users with the admin role. You can achieve this as follows:

  1. Associate the Set Visibility feature with the button.
  2. In the Function Editor, type the following condition:
javascript
// Show the button only if the user's role is "admin"
// r.getUserData.data.role retrieves the role of the current user from the user data object.

return r.getUserData.data.role === 'admin'; // This condition returns true if the role is admin; otherwise, false.