Merge branch 'main' into marketplace-libraries-submission

Author: leighajarett

docs/ff-integrations/database/cloud-firestore/firestore-actions.md

@@ -261,26 +261,37 @@ com/embed/238400b5445b444db712f492584b0d6e?sid=7b496882-0280-4920-924c-640fddeff
 
 To do so:
 
-1. Ensure you have **Query Collection** or **Document from Reference** added on a widget with **Single Time Query** disabled.
-2. Now select the widget, head over to **Actions**, and click **+ Add Action**.
-3. Select the **On Data Change** tab. That means actions added under this will be called whenever the data changes.
-4. Now, you can 
-[add any Action](../../../resources/control-flow/functions/action-flow-editor.md#adding-an-action-example) 
-   here.
+1. Ensure you have added a **Query Collection** or **Document from Reference** on a widget with **Single Time Query** disabled.
+2. Now, on the widget with **Query Collection** or **Document from Reference**, open the **Action Flow Editor** and set **On Data Change** as the [Action Trigger](../../../resources/control-flow/functions/action-triggers.md). This ensures that any actions you add will be triggered whenever the data is updated, added, or deleted.
+3. You can now [add any action](../../../resources/control-flow/functions/action-flow-editor.md#adding-an-action-example) you want to perform, such as showing a notification, refreshing the UI, or fetching related data.
 
 :::info
-* Actions will be triggered whenever the data is added, updated, or deleted.
-* If you are adding this on ListView, ensure you disable the infinite scroll.
+If you are using this trigger on a ListView, make sure to **disable** the **Infinite Scroll**.
 :::
 
-Here is an example showing the 
-[**Snackbar**](../../../resources/ui/pages/page-elements.md#show-snackbar-action)
-message when the data 
-changes in a collection.
-
-<figure>
-    ![img_27.png](img_27.png)
-  <figcaption class="centered-caption">Trigger snackbar action on data change</figcaption>
-</figure>
-
+<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/ghFiQWGsQuJu5reUyXnl?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>
 

docs/ff-integrations/database/supabase/database-actions.md

@@ -174,7 +174,17 @@ Let's see how to filter the Supabase table to display only desired items:
 - Find the **Value** property and set it to an appropriate value and click Confirm.
 
 :::tip
-You could choose a Filter relation based on your requirements. For example, to show only completed assignments, set the Field Name to the column that holds completed status, e.g., is_done, set the Relation to Equal To, and set the Value to True. Here's another example. For showing only users older than 30, create a column called Age, set the Relation to Greater Than, and set the Value to 30.
+You could choose a filter relation based on your requirements. For example:
+
+- **Equal To**: To show only completed assignments, set the **Field Name** to the column that holds the completion status (e.g., **is_done**), set the **Relation** to **Equal To**, and set the **Value** to **True**.
+- **Greater Than**: To show only users older than 30, set the **Field Name** to the **age** column, set the **Relation** to **Greater Than**, and set the **Value** to 30.
+- **Like**: For filtering addresses with zip codes starting with '35,' set the **Field Name** to the **zip_code** column, set the **Relation** to **LIKE**, and set the **Value** to **35%**. In the value field, you use the following wildcards to perform flexible pattern matching to filter your data effectively.
+    - **Percent (`%`) Wildcard**: Represents zero, one, or multiple characters.
+        - Example: `'A%'` matches any string starting with `'A'` (e.g., `'Apple'`, `'Apex'`).
+        - Example: `'%A%'` matches any string containing `'A'` (e.g., `'Canada'`, `'Australia'`).
+    - **Underscore (`_`) Wildcard**: Represents a single character.
+        - Example: `'A_'` matches any two-character string starting with `'A'` (e.g., `'An'`, `'At'`).
+        - Example: `'A__'` matches any three-character string starting with `'A'` (e.g., `'Ant'`, `'Art'`).
 :::
 
 <div class="video-container"><iframe src="https://www.loom.
@@ -204,6 +214,42 @@ com/embed/244eea2a4f694120b08524b7b8cf67de?sid=13d47ef5-5d48-4986-88da-d335ce23b
 Additional Note: Currently, you can only add "and" conditions to Supabase query filters. If you want to add an "or" filter like "status == 5 or status == 8", you can consider logic to apply "status in (5,8)" or any other logic. Fully customizable using API calls or custom actions.
 :::
 
+## Trigger Action On Data Change
 
+Sometimes, you may want to trigger an action whenever data changes in a Supabase table. For instance, in an ecommerce app, you might want to notify users on the orders page when the status of their order is updated.
 
+To respond to data changes in a Supabase table:
 
+1. Ensure you have added a **Supabase Query** to a widget (e.g., a ListView) with **Single Time Query** disabled to enable real-time updates.
+2. On the widget with the **Supabase Query**, open the **Action Flow Editor** and set **On Data Change** as the [Action Trigger](../../../resources/control-flow/functions/action-triggers.md). This ensures that any actions you add will be triggered whenever the data is updated, added, or deleted.
+3. You can now [add any action](../../../resources/control-flow/functions/action-flow-editor.md#adding-an-action-example) you want to perform, such as showing a notification, refreshing the UI, or fetching related data.
+
+:::info
+If you are using this trigger on a ListView, make sure to **disable** the **Infinite Scroll**.
+:::
+
+<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/ghFiQWGsQuJu5reUyXnl?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>