Skip to content

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 16 commits into from
Jul 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions docs/ff-concepts/animations/hero_animations.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ The steps to build such an example are as follows:
</div>
<p></p>

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



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

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.

See how to [pass data](#) from one page to another.
See how to [pass data](../../ff-concepts/navigation-routing/passing-data.md) from one page to another.
</p>
</details>
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@ We offer you the following types of Backend Queries that you can specify on any
* [**Document from Reference**](document-from-reference.md)**:** Used to retrieve the details from a document reference.
* [**API Call Query**](api-call-query.md)**:** Used to initiate an API
call.
* [**SQLite Query**](sqlite-query.md): Used to execute the SQL statement defined [here]
(/settings-and-integrations/integrations/sqlite#id-3.-add-sql-queries).
* [**SQLite Query**](sqlite-query.md): Used to execute the SQL statements.
* [**Algolia Search**](algolia-search-query.md)**:** Used to trigger an Algolia search on a Firestore Collection.

## Difference between Actions & Backend Query
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"label": "Form Actions",
"position": 3
}
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.
![reset-form-field-component](../../imgs/reset-form-field-component.png)
Copy link
Collaborator

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

Copy link
Collaborator Author

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.

:::
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>
![set-form-field-in-component](../../imgs/set-form-field-in-component.avif)
Copy link
Collaborator

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

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as reset form action

:::
Loading