Skip to content

Commit 00b7c72

Browse files
PoojaB26PoojaB26
committed
Add action block page
1 parent 36c94d7 commit 00b7c72

File tree

2 files changed

+87
-9
lines changed

2 files changed

+87
-9
lines changed

‎docs/resources/control-flow/functions/action-blocks.md

Lines changed: 87 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,94 @@ title: Action Blocks
66
An Action Block is a set of actions that perform a specific task and can be reused in different parts of the app. If you find yourself repeatedly performing a particular set of operations in your app, it may be helpful to create an Action Block. This allows you to break down complex actions into smaller, more manageable units, making them easier to understand and modify in the future.
77

88
Action Blocks have different scopes, which determine their availability:
9+
| **Action Block Type** | **Description** | **Scope** |
10+
|----------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------|
11+
| **App Level Action Blocks** | Usable across the entire app. You can create an App Level Action Block from any page or component, and it will be accessible for viewing or editing from any page or component as well. | Internally, an App Level Action Block can only access the state variables available in its scope (e.g., app state variables). |
12+
| **Page Level Action Blocks** | Restricted to the page in which they were created. These can access the state variables available in their scope, such as page state variables, as well as variables above their scope, such as App State variables. | Page Level Action Blocks can access page state variables and App State variables. |
13+
| **Component Level Action Blocks**| Restricted to the component in which they were created. These can access the state variables available in their scope, such as component state variables, as well as variables from higher scopes, like page and App State variables. | Component Level Action Blocks can access component state variables, page state variables, and App State variables. |
914

10-
- **App Level Action Blocks:** Usable across the entire app.
11-
- **Page Level Action Blocks:** Restricted to the page in which they were created.
12-
- **Component Level Action Blocks:** Restricted to the component in which they were created.
1315

14-
## App Level Action Blocks
16+
## Action Blocks Structure
17+
When creating an action block, the process of defining the flow is similar to defining Actions.
18+
The main difference is in choosing the scope and defining the input & output values of the
19+
Action Block.
20+
21+
### Choosing the Scope of Action Block
22+
23+
As discussed, Action Blocks can be **App Level, Page Level**, or **Component Level**. App Level Action Blocks can be created from any widget's action properties throughout the app. However, Page Level or Component Level Action Blocks are only available in the Page or Component where they were created.
24+
25+
Usually, you will see a dropdown to choose between App Level, Page Level, or Component Level. Choose the scope based on your Action Block's use case.
26+
27+
![action-blocks.png](img%2Faction-blocks.png)
28+
29+
30+
### Input Parameters
31+
32+
Action Blocks have access to the state variables available in the same scope as the Action Block
33+
(for e.g Page State variables can be accessed from Page Level Action Blocks). However, there
34+
will be times when you may need to input some parameters for the Action Block to perform its logic. These are called **Action Parameters**, and they can be added from the Action Flow Editor when you create a new Action.
35+
36+
For example, here is a small demo where we create an Action Block with an input parameter.
37+
38+
n this example, we add an item to the wishlist of an e-commerce app. Let's say our local wishlist is saved in an App State variable called `localWishlist`, and we have a reusable Action Block called `addToWishlist` that takes an input parameter called productId and performs the actions to add it to the `localWishlist` object.
39+
40+
<div style={{
41+
position: 'relative',
42+
paddingBottom: 'calc(56.67989417989418% + 41px)',
43+
height: 0,
44+
width: '100%'
45+
}}>
46+
<iframe
47+
src="https://demo.arcade.software/YHRng4VryDSVZdsmYfr5?embed&show_copy_link=true"
48+
title=""
49+
style={{
50+
position: 'absolute',
51+
top: 0,
52+
left: 0,
53+
width: '100%',
54+
height: '100%',
55+
colorScheme: 'light'
56+
}}
57+
frameborder="0"
58+
loading="lazy"
59+
webkitAllowFullScreen
60+
mozAllowFullScreen
61+
allowFullScreen
62+
allow="clipboard-write">
63+
</iframe>
64+
</div>
65+
66+
67+
68+
### Return Values
69+
70+
Often, your Action Block may return a value. For example, in our Product Cart Page, we have a reusable Component Level Action Block called `getTotalCost` that returns the final cost of all the products. You can define such an Action Block that returns a value (e.g., a double for this example) or a value related to your use case. You can define the return value in the Action Flow Editor. Let's see one example.
71+
72+
<div style={{
73+
position: 'relative',
74+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
75+
height: 0,
76+
width: '100%'
77+
}}>
78+
<iframe
79+
src="https://demo.arcade.software/u9jrS3b8eFXyGiZ34dS3?embed&show_copy_link=true"
80+
title=""
81+
style={{
82+
position: 'absolute',
83+
top: 0,
84+
left: 0,
85+
width: '100%',
86+
height: '100%',
87+
colorScheme: 'light'
88+
}}
89+
frameborder="0"
90+
loading="lazy"
91+
webkitAllowFullScreen
92+
mozAllowFullScreen
93+
allowFullScreen
94+
allow="clipboard-write">
95+
</iframe>
96+
</div>
97+
1598

16-
You can create an app level action block from any Page or Component and it wil be accessible for
17-
viewing or editing from any Page or Component as well. This makes it easier for you to access the
18-
app level action blocks and quickly get to editing it without leaving the page you are in.
1999

20-
Internally an action block can only access the state variables available in its scope (for e.g
21-
component level action b)

‎docs/resources/control-flow/functions/img/action-blocks.png

345 KB
Loading

0 commit comments

Comments
 (0)