Skip to content

Commit 587f716

Browse files
pinkeshmarspinkeshmars
committed
Updated adding callback section
1 parent 8dce9fc commit 587f716

File tree

3 files changed

+135
-16
lines changed

3 files changed

+135
-16
lines changed

‎docs/resources/ui/components/callbacks.md

Lines changed: 135 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,16 @@ define specific behaviors that the child entity should execute when certain even
1212
It enables dynamic and interactive behavior in child components, allowing them to perform actions
1313
defined by the parent, such as navigation, data updates, or displaying dialogs.
1414

15+
For example, if you have an *image upload component*, the parent can define what should happen after an image is successfully uploaded. Using callbacks, the *image upload component* can execute a parent-defined action, such as:
16+
17+
- Resize and compress the image to reduce storage size.
18+
- Update the user's database record with the new image URL.
19+
- Refresh the UI to display the updated profile picture.
20+
21+
This makes the *image upload component* component reusable, as it doesn't need to know the specifics of what should happen post-upload. Instead, the parent controls the behavior by passing the appropriate actions via a callback.
22+
23+
![action-parameters-callbacks](imgs/action-parameters-callbacks.avif)
24+
1525
:::tip[Benefits of Using Callbacks in FlutterFlow]
1626

1727
- **Modularity:** Separate the logic of what happens when an event occurs from the child component,
@@ -21,35 +31,144 @@ defined by the parent, such as navigation, data updates, or displaying dialogs.
2131
:::
2232

2333

24-
## Creating a Callback Parameter
25-
In order to create a component that will execute a callback, you must create a component with a parameter of type Action.
34+
## Adding Callbacks
35+
36+
Let’s continue with our previous example (image upload component) and see how to add callbacks on it:
37+
38+
### Creating a Callback Parameter
39+
40+
In order to create a component that will execute a callback, you must create a component with a parameter of **Type** **Action**. You can create an action parameter called `uploadAction`, which represents the action that will be executed after the image is uploaded.
41+
42+
When you create an action parameter, you can also specify parameters that will be passed into the action. For this example, the action that will be executed will likely need to know the uploaded image URL to process it further, such as resizing and compressing the image, updating it in the database, and refreshing the profile picture. So, you can specify an action parameter called `uploadedURL`.
43+
44+
Now, the page or component that uses this button can utilize this parameter in its own action flow. An example of this is shown below.
45+
46+
<div style={{
47+
position: 'relative',
48+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
49+
height: 0,
50+
width: '100%'}}>
51+
<iframe
52+
src="https://demo.arcade.software/BRHcXG6zWBYLCxaa9ifG?embed&show_copy_link=true"
53+
title=""
54+
style={{
55+
position: 'absolute',
56+
top: 0,
57+
left: 0,
58+
width: '100%',
59+
height: '100%',
60+
colorScheme: 'light'
61+
}}
62+
frameborder="0"
63+
loading="lazy"
64+
webkitAllowFullScreen
65+
mozAllowFullScreen
66+
allowFullScreen
67+
allow="clipboard-write">
68+
</iframe>
69+
</div>
70+
<p></p>
71+
72+
### Executing a Callback
73+
74+
You can execute the action passed into the component by using the **Execute Callback** action within the component's action flows.
75+
76+
For example, you can execute the above callback after the image is successfully uploaded and the pass the uploaded image URL into the callback.
77+
78+
79+
<div style={{
80+
position: 'relative',
81+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
82+
height: 0,
83+
width: '100%'}}>
84+
<iframe
85+
src="https://demo.arcade.software/XEap1vCGTJ4x9Y1lswe3?embed&show_copy_link=true"
86+
title=""
87+
style={{
88+
position: 'absolute',
89+
top: 0,
90+
left: 0,
91+
width: '100%',
92+
height: '100%',
93+
colorScheme: 'light'
94+
}}
95+
frameborder="0"
96+
loading="lazy"
97+
webkitAllowFullScreen
98+
mozAllowFullScreen
99+
allowFullScreen
100+
allow="clipboard-write">
101+
</iframe>
102+
</div>
103+
<p></p>
104+
105+
### Passing in an Action to a Component
26106

27-
When you create an action parameter, you can also specify parameters that will get passed into the action. For example,
28-
you might have a button that allows your app to add an item to a user's cart.
107+
When you add a component to the widget tree of a page or another component, you can define values for its parameters, including action parameters.
29108

30-
You can create a parameter called `onAddToBag` which represents the action that will be executed when the button is tapped.
109+
For instance, when you add an *image upload component*, you can specify the action flows to be executed when the callback is triggered. For this example, we simply update the profile picture.
31110

32-
The action that will be executed will likely need to know which item is being added to the cart. So, you can also specify an action parameter -
33-
`item`. Now, the page or component that leverages this button can use this parameter in its own action flow. You can see an example of that below.
111+
:::info
34112

35-
![action-parameters.png](imgs/action-parameters.png)
113+
You can access the value passed to the callback by navigating to the **Set Variable** menu > **Callback Parameters**.
36114

37-
## Executing a Callback
115+
:::
38116

39-
You can execute the action that is passed into the component by using the **Execute Callback** action in the component's action flows.
40117

41-
For example, you may want to execute the above callback when the button is tapped.
118+
<div style={{
119+
position: 'relative',
120+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
121+
height: 0,
122+
width: '100%'}}>
123+
<iframe
124+
src="https://demo.arcade.software/61EV732tfLpqQAIzLP8G?embed&show_copy_link=true"
125+
title=""
126+
style={{
127+
position: 'absolute',
128+
top: 0,
129+
left: 0,
130+
width: '100%',
131+
height: '100%',
132+
colorScheme: 'light'
133+
}}
134+
frameborder="0"
135+
loading="lazy"
136+
webkitAllowFullScreen
137+
mozAllowFullScreen
138+
allowFullScreen
139+
allow="clipboard-write">
140+
</iframe>
141+
</div>
142+
<p></p>
143+
144+
:::tip
145+
146+
Now that we have an image upload component with action parameters, it can be reused across different pages or contexts, as it relies on the parent to define the post-upload logic. For example, the same component can be used to upload an image while posting reviews for a product, eliminating the need to create a separate component for this functionality.
147+
148+
![component-action-parameters.avif](imgs/component-action-parameters.avif)
149+
150+
:::
151+
152+
## More Examples
153+
154+
Let's see some more examples of adding action parameters (callbacks) to component to solidify understanding and use it in real-world scenarios.
155+
156+
### Example 1: Dynamic Dialog Components
42157

43-
![execute-callback.png](imgs/execute-callback.png)
158+
Let’s take another example of a reusable dialog component that uses callbacks to handle context-specific actions like confirming a deletion, logging out, or saving data. In one context, "Yes" deletes an item. In another, it logs out a user.
44159

45-
## Passing in an Action to a Component
160+
Here the dialog component can execute different actions based on the context in which it's used. The specific logic for each action is defined by the parent component or page using the dialog. The dialog itself does not need to know the specifics of what should happen—it simply executes the callback passed to it.
46161

47-
When you add a component to the widget tree of a page or another component, you can set values for its parameters.
162+
[image]
48163

49-
This holds true for action parameters as well. For example, when you create an instance of the button component mentioned above, you can specify the action flows that should be used when the callback is executed.
164+
[how to]
50165

51-
![execute-callback.png](imgs/set-action-callback.png)
166+
### Example 2: Custom Navigation Bar
52167

168+
[info]
53169

170+
[image]
54171

172+
[how to]
55173

174+
## Best practices

‎docs/resources/ui/components/imgs/action-parameters-callbacks.avif

182 KB
Binary file not shown.

‎docs/resources/ui/components/imgs/component-action-parameters.avif

152 KB
Binary file not shown.

0 commit comments

Comments
 (0)