‍

Used to trigger specific actions in applications, redirect the user to a different page, or submit a form.

Usage Areas:

• Initiating payment transactions,
• Form submission,
• Page transitions,
• Triggering API calls, etc.

Supported only in web applications.

Reservation Confirmation Use Case

In a vacation reservation application, when the user reaches the payment step, they click the “Confirm Reservation” button. This button confirms the reservation by saving it to the database.

Connecting the Data Source

• Go to the Datasources module.
• Then click the + icon next to the Tables heading and name the table “ReservationData”.
• Create the following table:

Creating an SQL Action

• Then go to the SQL Actions section and name the action “ReservationData”. You can also create it with C#.
• Enter the following SQL command:

SELECT 101 AS Id,‘john.smith’ AS UserName,‘Confirmed’ AS StatusUNION ALLSELECT 102, ‘emma.jones’, ‘Pending’UNION ALLSELECT 103, ‘michael.brown’, ‘Confirmed’;

UI Design Module Operations

1. In the UI Design module, add the Button element from the Navigation category.
2. Select the Add Action → OnClick → Managed DB → ReservationData action.
3. Configure the following settings in the Properties panel:
   
   • Label → Confirm Reservation
   • Icon → check-circle
   • Icon Position → Left

Using Properties in a Scenario Context

Label

• Description: Specifies the text on the button.
• How to Use: Write a short text that clearly explains the action to the user.
• Example: “Confirm Reservation”

Icon

• Description: Adds a visual icon to the button.
• How to Use: Select an icon that supports the function.
• Example: check-circle → ✅ sign

Icon Position

• Description: Sets the position of the icon relative to the text.
• How to Use: When Left is selected, the icon appears to the left of the text.
• Example: Confirm Reservation

When the Scenario is Complete

• The user sees the “Confirm Reservation” button on the screen.
• The ✅ confirmation icon is located to the left of the button.
• When the user clicks, the ReservationData action runs and the reservation information is saved to the database.

Limitations

• The Button element only works in web applications.
• Performance may decrease if too many actions are linked to the same button.

Tips and Best Practices

Labels should be action-oriented: “Save,” “Submit,” “Continue.”

• Icons reinforce the function (✔ confirmation, ✖ cancel).
• For critical operations, OnClick → Confirmation popup should be added.
• Button styles that match the theme colors should be preferred.