Execute query

The Execute Query task in Zeroplat’s Event Designer allows you to run a predefined query (SQL, API, JS, or other data sources) as part of an event flow. It’s typically used when a user action (like clicking a button) should trigger a database call or REST API request.

You can connect to data sources (e.g., MsSQL, MySQL, PostgreSQL, SQLite, or REST APIs) and execute queries directly from workflows.

Where It Fits in the Event Designer

• Found in the Toolbox → Task → Execute query.
• Can be chained with other tasks such as Show notification, Close page, or Set variable.
• Supports success/failure branching for robust error handling.

Anatomy

1. Execute Query Block (center canvas)
   • Represents the task visually in the event flow.
   • Example: Execute query connected to Close page.
2. Properties Panel (right side)
   • Step name → Friendly label for the task (default: “Execute query”).
   • Select query → Dropdown to pick the query (e.g., query1).
   • Show success message → Toggle to display a toast message when successful.
   • Success message → Customizable message (default: “Successfully completed.”).
   • Hide loading → Suppresses the full-screen loading overlay. Instead, only the triggering action (e.g., button) shows a spinner.
   • Use if state for response → Allows conditional branching or state-driven behavior based on the query’s response.
3. Flow Connections
   • onSuccess → Path taken when the query completes successfully.
   • onFailure → Path taken when the query errors or rejects.
   • Both can be connected to subsequent tasks (e.g., show a notification, close page, rollback action).

How It Works

1. Query Setup
   • Queries must be created in the Explorer before they can be used here.
   • Supported sources:
     • SQL (MsSQL, MySQL, PostgreSQL, SQLite, etc.)
     • REST APIs
     • GraphQL APIs
     • Stored JS Queries
2. Execution
   • When the event runs (e.g., button click), this task calls the selected query.
   • The query can use parameters bound to UI components or variables.
3. Branching
   • If the query succeeds → onSuccess path executes.
   • If the query fails → onFailure path executes.
   • Both paths can trigger different actions (notifications, page navigation, etc.).

Example 1: Insert Data and Close Page

• Button → onClick → Execute query (insertCustomer) → Close page.
• If query is successful → Page closes.
• If query fails → Page stays open (optional notification task could be added).

Example 2: Query with Success & Failure Handling

Flow

• Execute query →
  • onSuccess → Show notification “Saved successfully” → Close page
  • onFailure → Show notification “Error saving record”

Setup in Properties

• Show success message: enabled
• Custom success message: “Customer record created.”
• Hide loading: disabled (so full overlay shows while saving)

Property Reference

Step name

• Rename the block for easier debugging.
• Example: Save Customer Query.

Select query

• Choose from existing queries defined in the project.
• Queries can include parameterized SQL, REST API calls, or JS Queries.

Show success message

• Displays a toast when the query completes successfully.
• Default: “Successfully completed.”
• Example custom message: “Customer added successfully!”

Hide loading

• Disabled (default):
  • A full-screen dimmed loading overlay appears during execution.
• Enabled (true):
  • No global loading overlay.
  • Only the triggering action (e.g., button) shows a loading spinner.
• Best practice: Enable when you want non-blocking background calls (so users can still interact with the page).

Use if state for response

• Binds the query’s response to a conditional evaluation.
• Useful for branching logic (e.g., check if response.success === true before continuing).

Best Practices

• Use clear names for tasks and queries (insertOrderQuery, updateProfileQuery).
• Chain notifications with success/failure to guide users.
• Enable Hide loading for background data refreshes to avoid blocking UX.
• Use onFailure paths to prevent silent errors.
• Combine with Set variable when storing query results for later use.

Example Use Cases

1. Save a Form

INSERT INTO Customers (Name, Email) VALUES (@Name, @Email)

• Event: Form Submit → Execute query (saveCustomer) → Show notification (“Saved!”)

2. Refresh Data after Insert

• Execute query (insertOrder)
• onSuccess → Execute query (getOrders) → Show notification (“Order created!”)

3. API Call with Custom Handling

• Execute query (POST /users)
• onSuccess → Navigate to “Users List”
• onFailure → Show notification “User creation failed.”

FAQ

Q: Can I run multiple queries sequentially?
A: Yes, chain multiple Execute Query tasks via onSuccess connections.

Q: Can I suppress the success toast?
A: Yes, disable Show success message.

Q: What’s the difference between Hide loading on/off?

• Off (default): Shows a blocking overlay while query runs.
• On: Only shows a spinner on the action (e.g., button), letting users still interact with other parts of the page.

Q: Can I branch logic based on query response?
A: Yes, use Use if state for response together with Switch/If tasks.

👉 In summary: Execute Query is the backbone of connecting user interactions with your data sources in Zeroplat. It provides success/failure handling, customizable messages, and flexible loading options to deliver a smooth user experience.