Set components props

The Set components props task allows you to dynamically update the properties of any component on the page at runtime. This enables highly interactive applications where component states, values, or styles can change automatically in response to user actions or workflow events.

Purpose

• Dynamically change component behavior or appearance.
• Set or reset values in input fields.
• Enable/disable buttons and controls.
• Show or hide components conditionally.
• Synchronize values between multiple components.

Anatomy

1. Step name
   • Label for the task in the event flow.
   • Example: Set components props.
2. Components (+)
   • Add one or more components to update.
   • Each component/property/value pair can be configured separately.
   • Example: Input1.value = {{ Button1.children }}.
3. Component (second screenshot)
   • Select the component you want to modify.
   • Example: Input1 (Input) or Button1 (Button).
4. Property
   • Choose which property of the component to update.
   • Each component exposes different properties (e.g., value, default value, disabled, visible, color, etc.).
   • Example: Default value.
5. Value
   • The new value to assign to the property.
   • Can be static (hard-coded) or dynamic (using bindings like {{ query1.data }}).
   • Example: {{ Button1.children }} → sets the input’s value to the text of Button1.

How It Works

1. The Set components props task is added to an event flow (e.g., a button click).
2. When executed, it updates the selected component’s property/properties with the specified value(s).
3. The changes are applied immediately on the UI without requiring a page reload.

Example 1: Set Input Value from Another Component

• Component: Input1
• Property: Default value
• Value: {{ Button1.children }}

Result: When the event is triggered, the text from Button1 is copied into Input1.

Example 2: Disable a Button After Click

• Component: Button1
• Property: disabled
• Value: true

Result: After clicking, the button becomes disabled.

Example 3: Conditional Visibility

• Component: Panel1
• Property: visible
• Value: {{ variable1.isAdmin }}

Result: Panel1 will only be visible if the isAdmin variable is true.

Example 4: Updating Multiple Components

The Set components props task supports multiple entries at once:

• Input1.value = {{ Table1.selectedRow.name }}
• Label1.text = "Customer Selected"
• Button2.disabled = false

Result: Updates several components in one single event.

Code-based Usage (Advanced)

In addition to using the Set components props task inside the Event Designer, component properties can also be updated directly via code. This is useful for more complex or conditional logic that cannot be easily expressed in the visual flow.

The syntax is:

ComponentName.setProp('propertyName', value);

Example 1: Set Input Value

Input1.setProp('value', 'Hello world');

Result: Updates the value of Input1 to Hello world.

Example 2: Disable a Button

Button1.setProp('disabled', true);

Result: Disables Button1, preventing user interaction.

Example 3: Bind to Dynamic Data

Input1.setProp('value', Table1.selectedRow.email);

Result: Automatically sets Input1 value to the email of the selected row in Table1.

When to Use

• Event Designer → Best for simple UI logic, easy to maintain visually.
• Code (setProp) → Best for advanced scenarios, dynamic calculations, or when many properties need to be updated conditionally.

👉 With setProp(), Zeroplat offers two complementary approaches:

• Visual updates through Set components props task, and
• Direct programmatic control through code.

Best Practices

• Use variables for shared state → Instead of directly linking components, store values in variables, then bind multiple components to those variables.
• Keep component names clear → Use meaningful names like SearchButton, CustomerInput.
• Be careful with loops → Setting the same property repeatedly can override previous values.
• Debug with console → If values don’t appear, check whether your binding (e.g., {{ Input1.value }}) is returning the expected result.

FAQ

Q: Can I update multiple properties of the same component in one step?

• Yes. For example, you can set both disabled and color on the same button.

Q: Can I bind query results directly?

• No. Example: Input1.value = {{ query1.data[0].email }}.

Q: Can this task create new components?

• No. It only modifies existing components’ properties.

👉 In summary: Set components props is a flexible task that lets you dynamically control how UI components behave and look at runtime. By linking it with queries, variables, or other user actions, you can build interactive and data-driven applications inside Zeroplat.