Wized Docs

Appearance

Introduction ​

The Function Editor is a vital tool within Wized that empowers you to add custom logic and enhance the interactivity of your web applications. This guide will outline the importance of the Function Editor and explain how it integrates with events, actions, and element configurations.

Note

Most customizations you need can be achieved using simple and intuitive JS logic. Even if you have no prior coding experience. For more information on how to use GPT to create snippets, check out our guide here.

Importance of the Function Editor ​

  1. Custom Logic Implementation:
    The Function Editor enables you to write JavaScript code that dictates your application’s behavior based on specific conditions. This feature is essential for creating dynamic interactions and delivering personalized user experiences.

  2. Conditional Logic:
    With the Function Editor, you can establish conditions that determine when certain actions or configurations should occur. This capability allows your web application to respond to user inputs or API responses in real-time, eliminating the need for page reloads.

  3. Work with Elements, Events and Actions:
    The Function Editor seamlessly integrates with events (such as clicks or form submissions) and actions (tasks executed in response to events). This synergy facilitates the programming of complex workflows and interactions, enhancing the overall functionality of your application.

How It Works with Events and Actions ​

Events:

  • Events represent user interactions that trigger actions, such as clicking a button or submitting a form. Wized provides the functionality to "listen" for these events and execute corresponding actions.
  • You can incorporate conditions within the Function Editor to determine whether an action should execute based on the event's context, such as verifying if a user is logged in.

Actions:

  • Actions refer to the tasks your application performs in response to events. Common actions include changing element visibility, setting text, or making API requests.
  • The Function Editor allows you to specify custom conditions for these actions, enabling intricate logic that significantly enhances user experience. For example, you may wish to execute an API request only if specific form fields contain valid data.

Element Configurations:

  • In Wized, you can configure UI components (elements) to behave differently based on real-time data or user interactions. The Function Editor is where you define these behaviors using JavaScript.
  • The configurations you establish will automatically respond to changes in application state, ensuring that the user interface reflects the most current data or user actions without requiring manual updates.

Examples ​

  • Dynamic Welcome Messages: Utilize the Function Editor to display a welcome message exclusively for registered users by checking a cookie that indicates their login status:

    javascript
    return c.isUserLoggedIn ? 'Welcome back!' : '';

  • Form Validation: Conduct real-time validation of form inputs and show error messages when inputs do not meet specific criteria:

    javascript
    return i.password.value.length < 8 ? 'Password too short' : '';

  • API Interaction: Perform an API request only if a user has accurately filled out a form:

    javascript
    return i.name.trim() !== '' && i.email.trim() !== '';