Added Form Triggers Info

Author: pinkeshmars

docs/resources/control-flow/user-interactivity/forms/form-triggers.md

@@ -13,13 +13,13 @@ sidebar_position: 4
 
 ## On Selected
 
-The **On Selected** action trigger is used to perform actions when a user selects or changes a value from a widget that presents multiple options. This trigger is associated with form widgets where selection input is required, such as Dropdown, RadioButton, CheckboxGroup, ChoiceChips, and Slider.
+The **On Selected** action trigger is used to perform actions when a user selects or changes a value from a widget that presents multiple options. This trigger is associated with form widgets where selection input is required, such as [Dropdown](form-widgets/dropdown.md), [RadioButton](form-widgets/radiobutton.md), [CheckboxGroup](form-widgets/checkbox.md#checkboxgroup), [ChoiceChips](form-widgets/choicechips.md), and [Slider](../../../ui/widgets/built-in-widgets/slider.md).
 
 :::tip[Possible use cases]
 
-- **Dropdown – Shipping Method Selection:** User selects a shipping method from options like "Standard", "Express", or "Next Day". The On Selected trigger might set the app state variable shippingOption, which updates pricing or estimated delivery time dynamically.
-- **Slider – Show Volume Level in Snackbar:** User adjusts a Slider from 0 to 100. The On Selected trigger displays a Snackbar showing the current volume: Volume set to: [sliderValue].
-- **ChoiceChips – Filter Products by Category:** User taps a chip like "All", "Electronics", or "Clothing". The On Selected trigger might set an app state variable (e.g., selectedCategory) and update the product list to match the chosen category.
+- **Dropdown – Shipping Method Selection:** User selects a shipping method from options like "Standard", "Express", or "Next Day". Action under the *On Selected* trigger sets the app state variable `shippingOption`, which updates pricing or estimated delivery time dynamically.
+- **Slider – Show Volume Level in Snackbar:** User adjusts a Slider from 0 to 100. The *On Selected* trigger displays a Snackbar showing the current volume: Volume set to: [sliderValue].
+- **ChoiceChips – Filter Products by Category:** User taps a chip like "All", "Electronics", or "Clothing". The *On Selected* trigger might set an app state variable (e.g., `selectedCategory`) and update the product list to match the chosen category.
 
 :::
 
@@ -34,15 +34,15 @@ To use the **On Selected** trigger:
 
 ## On Toggled On / On Toggled Off
 
-The **On Toggled On** and **On Toggled Off** action triggers are used to perform actions when a user turns a toggleable widget on or off. These triggers are supported by widgets such as Checkbox, CheckboxListTile, Switch, and SwitchListTile; any widget that represents a binary state.
+The **On Toggled On** and **On Toggled Off** action triggers are used to perform actions when a user turns a toggleable widget on or off. These triggers are supported by widgets such as [Checkbox](form-widgets/checkbox.md), [CheckboxListTile](form-widgets/checkbox.md#checkboxlisttile), [Switch](form-widgets/switch.md), and [SwitchListTile](form-widgets/switch.md#switchlisttile), any widget that represents a binary state.
 
 These triggers are especially useful when you want to conditionally execute different actions based on whether a user enables or disables a setting, preference, or feature.
 
 :::tip[Possible use cases]
 
-- **Switch – Enable Dark Mode:** User toggles a Switch to enable Dark Mode. The On Toggled On trigger sets the dark mode.
-- **Checkbox – Agree to Terms:** User checks a Checkbox labeled “I agree to the terms and conditions.” The On Toggled On trigger enables the Submit button. If the user unchecks it, the On Toggled Off trigger disables the button again.
-- **CheckboxListTile – Select Notification Channels:** User checks or unchecks options like Email, SMS, or Push Notifications. Each toggle fires either On Toggled On or On Toggled Off to update selected preferences in the backend.
+- **Switch – Enable Dark Mode:** User toggles a Switch to enable Dark Mode. Action under the *On Toggled On* trigger sets the dark mode.
+- **Checkbox – Agree to Terms:** User checks a Checkbox labeled “I agree to the terms and conditions.” The *On Toggled On* trigger enables the Submit button. If the user unchecks it, the *On Toggled Off* trigger disables the button again.
+- **CheckboxListTile – Select Notification Channels:** User checks or unchecks options like Email, SMS, or Push Notifications. Each toggle fires either *On Toggled O*n or *On Toggled Off* to update selected preferences in the backend.
 
 :::
 
@@ -57,14 +57,14 @@ To use the **On Toggled On** or **On Toggled Off** trigger:
 
 ## On Change
 
-The **On Change** action trigger is used to respond to real-time user input as they type or modify the contents of an input field. This trigger is supported by widgets such as **TextField** and **Pincode**.
+The **On Change** action trigger is used to respond to real-time user input as they type or modify the contents of an input field. This trigger is supported by widgets such as [TextField](form-widgets/text-field.md) and [Pincode](../../../ui/widgets/built-in-widgets/pincode.md).
 
 It’s ideal for enabling live form validations, updating app state as the user types, or enabling/disabling UI elements based on the current input.
 
 :::tip[Possible use cases]
 
-- **TextField – Enable Button When Email Is Entered:** As the user types in an email TextField, the On Change trigger checks if the input is a valid email. If it is, it enables the Continue button.
-- **Pincode – Auto Submit When Complete:** When a user finishes entering a 6-digit code in a Pincode widget, the On Change trigger checks if the full code is entered and triggers form submission or a backend call.
+- **TextField – Enable Button When Email Is Entered:** As the user types in an email TextField, action under the *On Change* trigger checks if the input is a valid email. If it is, it enables the Continue button.
+- **Pincode – Auto Submit When Complete:** When a user finishes entering a 6-digit code in a Pincode widget, action under the *On Change* trigger checks if the full code is entered and triggers form submission or a backend call.
 
 :::
 
@@ -81,12 +81,12 @@ To use the **On Change** trigger:
 
 ## On Focus Change
 
-The **On Focus Change** trigger fires whenever an input field gains or loses focus, like when a user taps into or out of a **TextField** or **Pincode** widget. It’s useful for providing user guidance (on focus) or performing validations.
+The **On Focus Change** trigger fires whenever an input field gains or loses focus, like when a user taps into or out of a [TextField](form-widgets/text-field.md) and [Pincode](../../../ui/widgets/built-in-widgets/pincode.md) widget. It’s useful for providing user guidance (on focus) or performing validations.
 
 :::tip[Possible use cases]
 
-- **TextField – Show Hint on Focus:** When the TextField gains focus, the On Focus Change trigger displays a helper text or tooltip with input instructions (e.g., “Enter your phone number without dashes”).
-- **Pincode – Validate on Exit:** When the user finishes entering the code and the Pincode widget loses focus, the On Focus Change trigger runs validation logic to check if the input is complete or valid, and displays an error if it's not..
+- **TextField – Show Hint on Focus:** When the TextField gains focus, action under the *On Focus Change* trigger displays a helper text or tooltip with input instructions (e.g., “Enter your phone number without dashes”).
+- **Pincode – Validate on Exit:** When the user finishes entering the code and the Pincode widget loses focus, action under the *On Focus Change* trigger runs validation logic to check if the input is complete or valid, and displays an error if it's not.
 
 :::
 

docs/resources/control-flow/user-interactivity/forms/form-widgets/checkbox.md

@@ -77,11 +77,8 @@ Here is a simple way to do it:
 </div>
 <p></p>
 
-### Trigger action on change
 
-See how to [trigger an action when a selection changes](../../forms/form-triggers.md#on-selected) on this widget.
-
-### Setting initial value
+### Setting Initial Value
 
 You might want to show the checkbox with a default value, either check or uncheck. For example, showing the checked checkbox for travel insurance.
 
@@ -116,45 +113,9 @@ To set the initial value:
 </div>
 <p></p>
 
-### Saving checkbox value
-
-You might want to save the checkbox's value as soon as it is checked or unchecked. For example, saving in an app state variable or Firestore document field. You can do so by adding the action on the checkbox widget.
-
-The checkbox widget provides you with the following types of actions (aka callbacks), and you can choose any of them to add actions under it.
-
-1. **On Toggled On**: Actions added under this will be triggered whenever the checkbox is selected/checked.
-2. **On Toggled Off**: Actions added under this will be triggered whenever the checkbox is unselected/unchecked.
+### Saving Checkbox Value
 
-Here's how you do it:
-
-1. Select the **Checkbox** widget, select **Actions** from the Properties panel (the right menu), and click **Open**. This will open an **Action Flow Editor** in a new popup window.
-2. Select **On Toggled On** or **On Toggled Off** and add an action that will update the value. (e.g., [update app state](../../../../../resources/data-representation/app-state.md#update-app-state-action), [update Firestore record](../../../../../ff-integrations/database/cloud-firestore/firestore-actions.md), etc.)
-
-<div style={{
-    position: 'relative',
-    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
-    height: 0,
-    width: '100%'}}>
-    <iframe 
-        src="https://demo.arcade.software/O8U6Xv5IbVwH9qDwVVfV?embed&show_copy_link=true"
-        title=""
-        style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            colorScheme: 'light'
-        }}
-        frameborder="0"
-        loading="lazy"
-        webkitAllowFullScreen
-        mozAllowFullScreen
-        allowFullScreen
-        allow="clipboard-write">
-    </iframe>
-</div>
-<p></p>
+You may want to immediately save the checkbox’s value when it is checked or unchecked. To do this, [add an action using the trigger](../../forms/form-triggers.md#on-toggled-on--on-toggled-off) that responds to changes in the widget’s selection.
 
 ### Customizing
 
@@ -314,7 +275,11 @@ Here's an example of how you can use the CheckboxGroup widget in your project:
 </div>
 <p></p>
 
-### Setting initial selection
+### Trigger Action on Change
+
+See how to [trigger an action when a selection changes](../../forms/form-triggers.md#on-selected) on this widget.
+
+### Setting Initial Selection
 
 Sometimes you might want to display the CheckboxGroup with some options already selected. For example, selecting the topping options that are already served with Pizza itself. You can do so by setting the initial selection for the CheckboxGroup.
 

docs/resources/control-flow/user-interactivity/forms/form-widgets/choicechips.md

@@ -52,11 +52,11 @@ To add the ChoiceChips widget to your app:
 </div>
 <p></p>
 
-### Trigger action on change
+### Trigger Action on Change
 
 See how to [trigger an action when a selection changes](../../forms/form-triggers.md#on-selected) on this widget.
 
-## Select or clear all choices [Action]
+## Select or Clear All Choices [Action]
 
 Users may need to swiftly deselect all chips or choose all available choice chips at once. You can do so by adding the **Clear All/Select All** action.
 
@@ -68,7 +68,7 @@ Before you add this action, ensure you [**allow multiselect**](#allow-multiselec
 
 You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
 
-### Allow multiselect
+### Allow Multiselect
 
 You might want to allow users to select multiple choices to filter the result.
 
@@ -165,7 +165,7 @@ To add a space between the chips, you can use the **Chip Spacing** ad **Row Spac
 </div>
 <p></p>
 
-### Align chips
+### Align Chips
 
 When you have chips in multiple rows, you can align them using the **Alignment** property. This is similar to setting main axis alignment for the Row widget.
 
@@ -195,7 +195,7 @@ When you have chips in multiple rows, you can align them using the **Alignment**
 </div>
 <p></p>
 
-### Customizing selected and unselected chip style
+### Customizing Selected and Unselected Chip Style
 
 Various properties under the **Selected Chip Style** and **Unselected Chip Style** section allow you to customize chips to match your design. Here's how you do it:
 

docs/resources/control-flow/user-interactivity/forms/form-widgets/dropdown.md

@@ -76,7 +76,7 @@ Let's see how to add a *DropDown* widget and build an example that shows the sel
 </div>
 <p></p>
 
-### Setting initial value
+### Setting Initial Value
 
 Setting a default or initial value for the DropDown is a common requirement for many apps. It can provide a better user experience by pre-selecting the most likely option.
 
@@ -115,7 +115,7 @@ To set an initial value:
 </div>
 <p></p>
 
-### Saving DropDown value on selection change
+### Saving DropDown Value on Selection Change
 
 You might want to save the dropdown value as soon as the selection changes. This approach is useful when you want to ensure that the user's selection is immediately saved without having to wait for them to submit the form. By doing so, you can provide a better user experience and reduce the risk of data loss in case of any interruption.
 
@@ -127,7 +127,7 @@ You can do so by adding an action such as [update app state](../../../../../reso
 
 You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
 
-### Showing option label
+### Showing Option Label
 
 The dropdown widget allows you to show a label than the actual option value. By adding the option label, you can have a simple/short name or abbreviation (which is quite easy to compare and process in the backend) instead of a tricky name (e.g., Falkland Islands (the) [Malvinas]).
 
@@ -171,7 +171,7 @@ To show option label:
 </div>
 <p></p>
 
-### Searchable dropdown
+### Searchable Dropdown
 
 The *DropDown* widget is a good choice when you have a small number of options, up to around 10-20; however, If you have more options than that, consider using a searchable dropdown.
 
@@ -210,7 +210,7 @@ To make the dropdown widget a searchable one:
 
 ![Making dropdown searchable](../../imgs/making-dd-searchable.png)
 
-### Disable dropdown
+### Disable Dropdown
 
 You might need to disable a dropdown when certain conditions are not yet met or need to be fulfilled. For example, when the dropdown options are dependent on other fields, and those fields are not filled yet.
 
@@ -247,7 +247,7 @@ To disable the dropdown:
 
 ![Disabling dropdown](../../imgs/disabling-dropdown.png)
 
-### Allow multi select
+### Allow Multi Select
 
 You might want to allow users to select multiple options from the dropdown list. For example, on an e-commerce app, users might want to filter products based on multiple attributes, such as t-shirts in both 'blue' and 'red' colors.
 
@@ -283,12 +283,11 @@ To clear the selection, you can use the [Reset Form Fields](../form-actions/rese
 </div>
 <p></p>
 
-
-### Changing dropdown size
+### Changing Dropdown Size
 
 To change the height and width of the dropdown, select the **DropDown** widget, move to the **Properties Panel > DropDown Properties > enter the Width and Height value**.
 
-### Set max height
+### Set Max Height
 
 If needed, you can also control the dropdown height using the **Max Height** property.
 
@@ -318,7 +317,7 @@ If needed, you can also control the dropdown height using the **Max Height** pro
 </div>
 <p></p>
 
-### Adding margin
+### Adding Margin
 
 Margin adds a space between the DropDown's text and its border. To change the margin, select the **DropDown** widget, move to the **Properties Panel > DropDown Properties >** find the **Margin** property, and change the values.
 
@@ -348,13 +347,13 @@ Margin adds a space between the DropDown's text and its border. To change the ma
 </div>
 <p></p>
 
-### Changing background color
+### Changing Background Color
 
 To change the background color, move to the **Properties Panel > DropDown Style > set the Fill Color**.
 
 ![Changing background color](../../imgs/changing-background-color.png)
 
-### Changing menu elevation
+### Changing Menu Elevation
 
 Menu elevation adds a shadow to the dropdown, giving it a sense of depth and making it appear above the surface it is placed on.
 
@@ -364,11 +363,11 @@ To change the menu elevation (depth or Z-axis), move the **Properties Panel >**
 The higher value draws the bigger size of the shadow.
 :::
 
-### Adding border
+### Adding Border
 
 See how to [add a border](../../../../ui/widgets/widget-commonalities.md#adding-border).
 
-### Show/hide underline
+### Show/hide Underline
 
 To show or hide the dropdown underline, move the **Properties Panel >** **DropDown Style** > use the **Hides Underline** toggle.
 
@@ -398,12 +397,8 @@ To show or hide the dropdown underline, move the **Properties Panel >** **DropDo
 </div>
 <p></p>
 
-### Fix position
+### Fix Position
 
 By default, the dropdown options are displayed over/above the dropdown button. To display beneath/below the button, move the **Properties Panel >** **DropDown Style** > switch on the **Fix Position** toggle.
 
 ![Fix position for dropdown options](../../imgs/fix-position.webp)
-
-:::info[Trigger action on change]
-See how to [**trigger an action when a selection changes**](../../../../ui/widgets/widget-commonalities.md#trigger-action-on-selection-change) on this widget.
-:::

docs/resources/control-flow/user-interactivity/forms/form-widgets/radiobutton.md

@@ -54,7 +54,7 @@ The RadioButton widget adds a single option named **Option 1** by default.
 </div>
 <p></p>
 
-### Trigger action on change
+### Trigger Action on Change
 
 See how to [trigger an action when a selection changes](../../forms/form-triggers.md#on-selected) on this widget.
 

docs/resources/control-flow/user-interactivity/forms/form-widgets/switch.md

@@ -74,7 +74,7 @@ Here is a simple way to do it:
 </div>
 <p></p>
 
-### Setting initial value
+### Setting Initial Value
 
 You might want to show the switch with a default status, i.e., ON or OFF. For example, showing the location service setting with a default switch OFF.
 
@@ -109,45 +109,9 @@ To set the initial value:
 </div>
 <p></p>
 
-### Saving switch value
+### Saving Switch Value
 
-You might want to save the switch value as soon as it is toggled ON or OFF. For example, saving in an app state variable or Firestore document field. You can do so by adding the action on the switch widget.
-
-The switch widget provides you with the following types of actions (aka callbacks), which you can use to add actions under it.
-
-1. **On Toggled On**: Actions added under this will be triggered whenever the switch is ON.
-2. **On Toggled Off**: Actions added under this will be triggered whenever the switch is OFF.
-
-Here's how you do it:
-
-1. Select the **Switch** widget, select **Actions** from the Properties panel (the right menu), and click **Open**. This will open an **Action Flow Editor** in a new popup window.
-2. Select **On Toggled On** or **On Toggled Off** and add an action that will update the value. (e.g., [update app state](../..//../../data-representation/app-state.md#update-app-state-action), [update Firestore record](../../../../../ff-integrations/database/cloud-firestore/firestore-actions.md), etc.)
-
-<div style={{
-    position: 'relative',
-    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
-    height: 0,
-    width: '100%'}}>
-    <iframe 
-        src="https://demo.arcade.software/XHgeXkbmfkV2YqbV9enj?embed&show_copy_link=true"
-        title=""
-        style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            colorScheme: 'light'
-        }}
-        frameborder="0"
-        loading="lazy"
-        webkitAllowFullScreen
-        mozAllowFullScreen
-        allowFullScreen
-        allow="clipboard-write">
-    </iframe>
-</div>
-<p></p>
+You may want to save the switch value as soon as it is toggled ON or OFF. To do this, [add an action using the trigger](../../forms/form-triggers.md#on-toggled-on--on-toggled-off) that responds to changes in the widget’s selection.
 
 ### Customizing