Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Action Triggers #145

Closed
wants to merge 11 commits into from
Closed

New Action Triggers #145

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
9aa997d
update action flow editor visuals
pinkeshmars Sep 3, 2024
84f49c4
added action triggers
pinkeshmars Sep 5, 2024
99ec4a6
added arcade for example 3rd step
pinkeshmars Sep 6, 2024
bec407f
added lifecycle stages
pinkeshmars Sep 6, 2024
973fadf
Merge branch 'main' of https://github.com/FlutterFlow/flutterflow-doc…
pinkeshmars Sep 6, 2024
d3a8ca6
Fixed review comments
pinkeshmars Sep 7, 2024
d049b31
Formatting fix
PoojaB26 Sep 9, 2024
768efd2
Formatting fixes
PoojaB26 Sep 10, 2024
352e074
added lifecycle for tap gesture
pinkeshmars Sep 11, 2024
2d49245
Merge branch 'main' of https://github.com/FlutterFlow/flutterflow-doc…
pinkeshmars Sep 19, 2024
d274955
Address review comments
pinkeshmars Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 43 additions & 42 deletions docs/resources/control-flow/functions/action-flow-editor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Designing interactivity involves two steps:
1. Listening for Interaction (**Action Triggers**)
2. Responding to Interaction (**Actions**)

Action Triggers represent a specific event, while Actions are functions executed in response to the
**Action Triggers** represent a specific event, while **Actions** are functions executed in response to the
triggered event. Common triggers are:

- **On Tap**: Triggered on tapping on a widget or specifically buttons.
Expand All @@ -30,20 +30,45 @@ Actions are tasks or operations that are performed in response to an event detec
The Action Flow Editor is a visual, node-based editor used to configure the functions that run in
response to a trigger. This editor simplifies the process of creating and managing business logic.

![Action Flow Editor](../../../../static/img/action-flow-editor.avif)
![Action Flow Editor](img/actions.avif)

### Action Triggers

The **Action Triggers** toolbar, located at the top of the editor, displays a list of available
triggers. Each trigger has its own separate node editor, allowing you to create distinct logic
flows for different events. When you switch between triggers, the node editor updates to display
the logic specific to the selected action trigger.
When you open the Action Flow Editor, no triggers are added by default. To add a trigger, simply search for and select the desired one from the available options. The Action Triggers bar, located at the left of the editor, displays all added triggers.

![Triggers](../../../../static/img/action-flow-editor-triggers.avif)
:::info
To learn more about **Action Triggers** and its types, refer [**here**](action-triggers.md).
:::

<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/2kuQfhvjyPnW8PvbsaUw?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>

:::warning[Exposed by FlutterFlow]
Please note that Action Triggers are provided by FlutterFlow and are not user-generated. You can
only work with the ones provided by FlutterFlow.
Please note that Action Triggers are exposed by FlutterFlow and are not user-generated. You can
only work with the ones provided in the Action Flow Editor.
:::

Each trigger has its own separate node-editor, allowing you to create distinct logic flows for
Expand All @@ -57,7 +82,7 @@ specific to the selected trigger.
width: '100%'
}}>
<iframe
src="https://demo.arcade.software/JvaQ229YQSXBXsNRdA3l?embed&show_copy_link=true"
src="https://demo.arcade.software/IazHon14tfvS4UljRsqu?embed&show_copy_link=true"
title="Switching Triggers"
style={{
position: 'absolute',
Expand Down Expand Up @@ -127,7 +152,7 @@ the function body with the desired logic.
width: '100%'
}}>
<iframe
src="https://demo.arcade.software/AvnbHPyUl6FYbbnCAU8f?embed&show_copy_link=true"
src="https://demo.arcade.software/I9valjo4KqgEs8qol2Wp?embed&show_copy_link=true"
title="Create New Action"
style={{
position: 'absolute',
Expand Down Expand Up @@ -161,7 +186,7 @@ The Right Panel serves two main purposes:
width: '100%'
}}>
<iframe
src="https://demo.arcade.software/nfgVsa6x5Rb2uCtw5oIJ?embed&show_copy_link=true"
src="https://demo.arcade.software/oHXsShi0Kyo5hbOIYZL5?embed&show_copy_link=true"
title="Arcade Flow (Fri May 10 2024)"
style={{
position: 'absolute',
Expand All @@ -184,11 +209,11 @@ The Right Panel serves two main purposes:

In the Action Flow Editor, the icon in the upper left corner indicates the widget to which the current action flow is bound.

![Action Flow Editor](../../../../static/img/action-flow-editor-widget.avif)
![Widget Binding](img/widget-binding.avif)

:::info
If you rename your widget, the new name will automatically be updated and associated with this action flow. This makes it easier to keep track of the logic associated with each widget, ensuring clarity and better organization of your action flows.

![img.png](img/img.png)
:::

### Issues

Expand All @@ -197,39 +222,15 @@ these are neither issues in the whole project nor issues in all of the action fl
generated from the action flows bound to *this* widget. This includes *all* the action flows on
*all* the triggers and not just currently visible action flow on the selected trigger.

<div className="arcade-container" style={{
position: 'relative',
paddingBottom: 'calc(55.441478439425055% + 41px)', // Preserves the original aspect ratio and padding
height: 0,
width: '100%'
}}>
<iframe
src="https://demo.arcade.software/RxkkYgCTWU2Zo2i7Tzuz?embed&show_copy_link=true"
title="Issues"
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>
![Issues](img/action-errors.avif)

### Action Blocks

The diamond icon in the Action Flow Editor opens a menu where you can create and edit Action Blocks.
**Action Blocks** are reusable action flows that can accept parameters and return values, promoting code
reusability and modularity.

![action-block.avif](../../../../static/img/action-block.avif)
![action-block.avif](img/action-block-icon.avif)

:::tip[Deep Dive on Action Blocks]
Learn more about different types of **[Action Blocks](action-blocks.md)** and their scopes.
Expand All @@ -246,7 +247,7 @@ Here's a quick demo of how you can add an action or multiple sequential actions
width: '100%'
}}>
<iframe
src="https://demo.arcade.software/w3B62goFPcrUn1FFno3V?embed&show_copy_link=true"
src="https://demo.arcade.software/pzHtQyaiPVeLC01vbgbs?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
Expand Down
Loading