Skip to content

Commit 51eb8dd

Browse files
pinkeshmarsPoojaB26
pinkeshmars
and
PoojaB26
authored
Forms (#69)
* Added textfield widget * Added dropdown widget * Added radio button * Added pincode widget * added slider and ratingbar widget * added form validation * Added form actions * Added checkbox group widget * Address review comments part 1 * Address review comments part 2 * Fix link * Fix tags * Fix link --------- Co-authored-by: PoojaB26 <[email protected]>
1 parent 6be133c commit 51eb8dd

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+3790
-9
lines changed

‎docs/ff-concepts/animations/hero_animations.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ The steps to build such an example are as follows:
7979
</div>
8080
<p></p>
8181

82-
3. Add [navigation action](../../resources/ui-building-blocks/pages/navigation-.md#navigate-to-action) from page 1 to page 2.
82+
3. Add [navigation action](../../ff-concepts/navigation-routing/page-navigation.md#navigate-to-action) from page 1 to page 2.
8383

8484

8585

@@ -187,6 +187,6 @@ This is because the image on the second page does not exist on the very first fr
187187

188188
To fix this issue, you can avoid loading an image directly from Firestore. Instead, you can pass the image URL (which would have already been retrieved from the Firestore) from the previous page to the second page. And then use that URL to load the image.
189189

190-
See how to [pass data](#) from one page to another.
190+
See how to [pass data](../../ff-concepts/navigation-routing/passing-data.md) from one page to another.
191191
</p>
192192
</details>

‎docs/resources/control-flow/backend-logic/backend-query/backend-query.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,7 @@ We offer you the following types of Backend Queries that you can specify on any
2020
* [**Document from Reference**](document-from-reference.md)**:** Used to retrieve the details from a document reference.
2121
* [**API Call Query**](api-call-query.md)**:** Used to initiate an API
2222
call.
23-
* [**SQLite Query**](sqlite-query.md): Used to execute the SQL statement defined [here]
24-
(/settings-and-integrations/integrations/sqlite#id-3.-add-sql-queries).
23+
* [**SQLite Query**](sqlite-query.md): Used to execute the SQL statements.
2524
* [**Algolia Search**](algolia-search-query.md)**:** Used to trigger an Algolia search on a Firestore Collection.
2625

2726
## Difference between Actions & Backend Query

‎docs/resources/control-flow/user-interactivity/forms/form-actions/_category_.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"label": "Form Actions",
3+
"position": 3
4+
}

‎docs/resources/control-flow/user-interactivity/forms/form-actions/reset-form-field.md

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
---
2+
slug: /resources/forms/reset-form-field
3+
title: Reset Form Field [Action]
4+
tags: [Action, Form]
5+
keywords: [FlutterFlow, reset form field, form action, user interface, mobile app development, input clearing, form management]
6+
description: Learn how to add Reset Form Field action in your FlutterFlow app.
7+
sidebar_position: 1
8+
---
9+
# Reset Form Field [Action]
10+
11+
This action allows you to reset a value for the Form widgets. This is helpful in clearing out any previously entered data and allows users to start fresh.
12+
13+
For example, If a form has been successfully submitted, it may make sense to clear out the form fields so that the user can enter new data if they want to submit the form again.
14+
15+
<div style={{
16+
position: 'relative',
17+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
18+
height: 0,
19+
width: '100%'}}>
20+
<iframe
21+
src="https://demo.arcade.software/8j2HzV0zEQu2JN23K0NG?embed&show_copy_link=true"
22+
title=""
23+
style={{
24+
position: 'absolute',
25+
top: 0,
26+
left: 0,
27+
width: '100%',
28+
height: '100%',
29+
colorScheme: 'light'
30+
}}
31+
frameborder="0"
32+
loading="lazy"
33+
webkitAllowFullScreen
34+
mozAllowFullScreen
35+
allowFullScreen
36+
allow="clipboard-write">
37+
</iframe>
38+
</div>
39+
<p></p>
40+
41+
## Adding Reset Form Field action
42+
43+
Follow the steps below to add this action to any widget.
44+
45+
1. Select the **Widget** (e.g., Button, etc.) on which you want to add the action.
46+
2. Select **Actions** from the properties panel, If it's the first action, click **+ Add Action** button. Otherwise, click the "**+**" button below the previous action tile (inside *Action Flow Editor*) and select **Add Action**.
47+
3. Search the **Reset Form Field** (under *State Management*) action and select the widget you would like to reset.
48+
49+
You can reset the same types of widgets in a single action only. e.g., multiple *TextField* widgets.
50+
51+
<div style={{
52+
position: 'relative',
53+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
54+
height: 0,
55+
width: '100%'}}>
56+
<iframe
57+
src="https://demo.arcade.software/ceKpYitIZcLrq8UKZBdp?embed&show_copy_link=true"
58+
title=""
59+
style={{
60+
position: 'absolute',
61+
top: 0,
62+
left: 0,
63+
width: '100%',
64+
height: '100%',
65+
colorScheme: 'light'
66+
}}
67+
frameborder="0"
68+
loading="lazy"
69+
webkitAllowFullScreen
70+
mozAllowFullScreen
71+
allowFullScreen
72+
allow="clipboard-write">
73+
</iframe>
74+
</div>
75+
<p></p>
76+
77+
:::info
78+
You can also reset form fields that are inside the components.
79+
![reset-form-field-component](../../imgs/reset-form-field-component.png)
80+
:::

‎docs/resources/control-flow/user-interactivity/forms/form-actions/set-form-field.md

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
---
2+
slug: /resources/forms/set-form-field
3+
title: Set Form Field [Action]
4+
tags: [Action, Form]
5+
keywords: [FlutterFlow, set form field, form action, user interface, mobile app development, input prefill, form management]
6+
description: Learn how to add Set Form Field action in your FlutterFlow app.
7+
sidebar_position: 0
8+
---
9+
# Set Form Field [Action]
10+
11+
This action allows you to set a value for the Form widgets. For example, you could use this action to auto-populate a form based on a user's previous submission.
12+
13+
You could also dynamically update a dropdown menu based on a user's previous selection, such as showing relevant cities based on a selected country.
14+
15+
<div style={{
16+
position: 'relative',
17+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
18+
height: 0,
19+
width: '100%'}}>
20+
<iframe
21+
src="https://demo.arcade.software/7YwkCFeBsQ6rnYzr3zQh?embed&show_copy_link=true"
22+
title=""
23+
style={{
24+
position: 'absolute',
25+
top: 0,
26+
left: 0,
27+
width: '100%',
28+
height: '100%',
29+
colorScheme: 'light'
30+
}}
31+
frameborder="0"
32+
loading="lazy"
33+
webkitAllowFullScreen
34+
mozAllowFullScreen
35+
allowFullScreen
36+
allow="clipboard-write">
37+
</iframe>
38+
</div>
39+
<p></p>
40+
41+
## Adding Set Form Field action
42+
43+
Follow the steps below to add this action to any widget.
44+
45+
1. Select the **Widget** (e.g., Button, etc.) on which you want to add the action.
46+
2. Select **Actions** from the properties panel. If it's the first action, click the **+ Add Action** button. Otherwise, click the "**+**" button below the previous action tile (inside *Action Flow Editor*) and select **Add Action**.
47+
3. Search the **Set Form Field** (under *State Management*) action and select the widget you would like to set.
48+
4. Now, you can set its value directly or from a variable.
49+
50+
<div style={{
51+
position: 'relative',
52+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
53+
height: 0,
54+
width: '100%'}}>
55+
<iframe
56+
src="https://demo.arcade.software/dnZobgoW5fi0Jm4OkFvL?embed&show_copy_link=true"
57+
title=""
58+
style={{
59+
position: 'absolute',
60+
top: 0,
61+
left: 0,
62+
width: '100%',
63+
height: '100%',
64+
colorScheme: 'light'
65+
}}
66+
frameborder="0"
67+
loading="lazy"
68+
webkitAllowFullScreen
69+
mozAllowFullScreen
70+
allowFullScreen
71+
allow="clipboard-write">
72+
</iframe>
73+
</div>
74+
<p></p>
75+
76+
:::info
77+
You can also set form fields that are inside the components.
78+
<p></p>
79+
![set-form-field-in-component](../../imgs/set-form-field-in-component.avif)
80+
:::

0 commit comments

Comments
 (0)