Add classes

Function: Add classes

This function allows you to dynamically add visual styles (CSS classes) to one or more UI elements on your application's page. This is useful for changing the appearance of elements based on user interactions, data conditions, or other logic, without needing to write any code.

Input

• Elements (List of Objects, required): This is a list where each item specifies a UI element and an optional condition.
  • Element (UI Element): The specific UI component (like a button, text field, or panel) on your page that you want to modify.
  • Conditional (True/False switch, optional): A switch that determines whether the classes should be added to this specific UI element. If set to True or left empty, the classes will be added. If set to False, the classes will not be added to this element.
• Classes (List of Text, required): A list of the specific style names (CSS classes) you want to add to the selected UI elements.
  • Class (Text): A single style name (e.g., "highlight", "is-active", "hidden").

Output

This function does not produce a direct output value. Instead, it modifies the visual appearance of the specified UI elements on your application's page by adding the chosen styles.

Execution Flow

Real-Life Examples

Here are some examples of how you can use the "Add classes" function in your application:

Example 1: Highlight a button when a form is valid

Imagine you have a form, and you want the "Submit" button to become visually prominent (e.g., change color) only when all required fields in the form are filled correctly.

• Inputs:
  • Elements:
    • Element: Submit Button
    • Conditional: True (or leave empty, as the action will be triggered by a form validation event)
  • Classes:
    • Class: btn-primary
    • Class: highlight-border
• Result: When this action runs, the Submit Button will immediately have the btn-primary and highlight-border styles applied, making it stand out.

Example 2: Show/hide a section based on user selection

You have a product configuration page where users can choose between "Basic" and "Advanced" options. When "Advanced" is selected, you want to reveal an additional section.

• Inputs:
  • Elements:
    • Element: Advanced Options Panel
    • Conditional: True (This condition would be linked to a "User selected 'Advanced'" logic)
  • Classes:
    • Class: is-visible
• Result: If the user selects "Advanced", the Advanced Options Panel will have the is-visible style added, making it appear on the page. If the user switches back to "Basic", you would use a "Remove classes" action to hide it.

Example 3: Apply a "read-only" style to multiple input fields based on user role

In an administrative dashboard, you want certain input fields to appear disabled or read-only for users with a "Viewer" role, while "Editor" roles can interact with them.

• Inputs:
  • Elements:
    • Element: Product Name Input
    • Conditional: Current User Role is 'Viewer'
    • Element: Product Description Textarea
    • Conditional: Current User Role is 'Viewer'
    • Element: Price Field
    • Conditional: Current User Role is 'Viewer'
  • Classes:
    • Class: read-only-field
    • Class: disabled-look
• Result: For users with the "Viewer" role, the Product Name Input, Product Description Textarea, and Price Field will all have the read-only-field and disabled-look styles applied, visually indicating they cannot be edited. For other roles, these styles will not be added.