-
Notifications
You must be signed in to change notification settings - Fork 110
Forms #69
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.
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
Merged
Merged
Forms #69
Changes from all commits
Commits
Show all changes
16 commits
Select commit
Hold shift + click to select a range
baf0061
Added textfield widget
pinkeshmars f8341e6
Added dropdown widget
pinkeshmars 6a4c29f
Added radio button
pinkeshmars 652bfd3
Added pincode widget
pinkeshmars 9b85b48
added slider and ratingbar widget
pinkeshmars 5f65bb2
added form validation
pinkeshmars dd68c43
Added form actions
pinkeshmars cf8f4b3
Added checkbox group widget
pinkeshmars 3da074b
Merge branch 'main' of https://github.com/FlutterFlow/flutterflow-doc…
pinkeshmars f06078f
Merge branch 'main' of https://github.com/FlutterFlow/flutterflow-doc…
pinkeshmars 9e43e1b
Address review comments part 1
pinkeshmars 5fa1fb8
Merge branch 'main' of https://github.com/FlutterFlow/flutterflow-doc…
pinkeshmars caf74c0
Address review comments part 2
pinkeshmars 374f1ec
Fix link
PoojaB26 983eb60
Fix tags
PoojaB26 8a0af38
Fix link
PoojaB26 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 4 additions & 0 deletions
4
docs/resources/control-flow/user-interactivity/forms/form-actions/_category_.json
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"label": "Form Actions", | ||
"position": 3 | ||
} |
80 changes: 80 additions & 0 deletions
80
...esources/control-flow/user-interactivity/forms/form-actions/reset-form-field.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
--- | ||
slug: /resources/forms/reset-form-field | ||
title: Reset Form Field [Action] | ||
tags: [Action, Form] | ||
keywords: [FlutterFlow, reset form field, form action, user interface, mobile app development, input clearing, form management] | ||
description: Learn how to add Reset Form Field action in your FlutterFlow app. | ||
sidebar_position: 1 | ||
--- | ||
# Reset Form Field [Action] | ||
|
||
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. | ||
|
||
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. | ||
|
||
<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/8j2HzV0zEQu2JN23K0NG?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> | ||
|
||
## Adding Reset Form Field action | ||
|
||
Follow the steps below to add this action to any widget. | ||
|
||
1. Select the **Widget** (e.g., Button, etc.) on which you want to add the action. | ||
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**. | ||
3. Search the **Reset Form Field** (under *State Management*) action and select the widget you would like to reset. | ||
|
||
You can reset the same types of widgets in a single action only. e.g., multiple *TextField* widgets. | ||
|
||
<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/ceKpYitIZcLrq8UKZBdp?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> | ||
|
||
:::info | ||
You can also reset form fields that are inside the components. | ||
 | ||
::: |
80 changes: 80 additions & 0 deletions
80
.../resources/control-flow/user-interactivity/forms/form-actions/set-form-field.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
--- | ||
slug: /resources/forms/set-form-field | ||
title: Set Form Field [Action] | ||
tags: [Action, Form] | ||
keywords: [FlutterFlow, set form field, form action, user interface, mobile app development, input prefill, form management] | ||
description: Learn how to add Set Form Field action in your FlutterFlow app. | ||
sidebar_position: 0 | ||
--- | ||
# Set Form Field [Action] | ||
|
||
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. | ||
|
||
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. | ||
|
||
<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/7YwkCFeBsQ6rnYzr3zQh?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> | ||
|
||
## Adding Set Form Field action | ||
|
||
Follow the steps below to add this action to any widget. | ||
|
||
1. Select the **Widget** (e.g., Button, etc.) on which you want to add the action. | ||
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**. | ||
3. Search the **Set Form Field** (under *State Management*) action and select the widget you would like to set. | ||
4. Now, you can set its value directly or from a variable. | ||
|
||
<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/dnZobgoW5fi0Jm4OkFvL?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> | ||
|
||
:::info | ||
You can also set form fields that are inside the components. | ||
<p></p> | ||
 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Add p tag before image There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. same as reset form action |
||
::: |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add p tag before image
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added, but seems like no effect to me, and adding
tag adds more gap.