Skip to content
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/adding-customization/cloud-functions.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ Also, see how to [build a page layout](/widgets-and-components/ui-and-layout-101

Few things to note here:

* We use the [ConditionalBuilder](/widgets-and-components/widgets/base-elements/conditionalbuilder) widget to show/hide the loading indicator based on the *generatingImage* variable. **Tip**: The Else branch of this widget is nothing but a ProgressBar inside the Container with a [rotating loop animation](/widgets-and-components/animations#4.-rotate).
* We use the [**ConditionalBuilder**](../layout/responsive-widgets/conditional-builder-widget.md) widget to show/hide the loading indicator based on the *generatingImage* variable. **Tip**: The Else branch of this widget is nothing but a ProgressBar inside the Container with a [rotating loop animation](../animations/widget_animations.md).
* The Image widget uses the *logoImage* variable to display the logo.

### 3. Create and deploy Cloud Function
Expand Down Expand Up @@ -230,7 +230,7 @@ To add a dependency, open the `package.json` file and specify your package in th

### 5. Trigger Cloud Function

The newly created *Cloud Function* will be available as an action when you are adding one. For this example, on click of a button, we'll first set the *generatingImage*to *True* and then [trigger the Cloud Function](/actions/actions/cloud-function).
The newly created *Cloud Function* will be available as an action when you are adding one. For this example, on click of a button, we'll first set the *generatingImage*to *True* and then trigger the **Cloud Function Action**.

<div class="video-container"><iframe src="https://www.loom.
com/embed/5c712863f95c4fcabd5c3851a3cbe56b?sid=a7ac875f-11b5-4b5a-b3e2-8ae03ce49571" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
Expand Down
3 changes: 2 additions & 1 deletion docs/ff-concepts/design-system/design-system.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,9 +79,10 @@ To create your own design system:


<p></p>

6. To use the design system, open your project and navigate to **Theme Settings > Design System**.
7. Click on the **No Design System Selected**.
8. A pop will open displaying the list of the design systems, click on the newly created design system to add it to your project. **Note** that the design system created in [My Organization](#) will also be available here.
8. A pop will open displaying the list of the design systems, click on the newly created design system to add it to your project. **Note** that the design system created in [My Organization](../../resources/projects/how-to-collaborate-on-projects.md#sharing-a-project-with-an-organization) will also be available here.

:::info

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
slug: /integrations/authentication/supabase/auth-actions
title: Auth Actions
description: Learn how to add Supabase authentication actions in your FlutterFlow app.
description: Learn how to add Supabase Authentication actions in your FlutterFlow app.
tags: [FlutterFlow, Auth Actions, Authentication, Supabase]
sidebar_position: 1
keywords: [FlutterFlow, Auth Actions, Authentication, Supabase]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,8 @@ Also, see how to build a page layout in case you want to build a page from scrat

Now, you can proceed to add an account creation flow, which basically consists of three actions in the following order:

1. Supabase [Create Account Action](/actions/actions/backend-database/supabase-authentication/create-account#email-signup)
2. Supabase [Insert row action](/actions/actions/backend-database/supabase#1.-insert-row-action)
1. Supabase [Create Account Action](auth-actions.md#create-account-action)
2. Supabase [Insert row action](../../database/supabase/database-actions.md#insert-row-action)
3. [Navigate](../../../ff-concepts/navigation-routing/nav-overview.md) action

The first one creates an account in Supabase and adds an email and password in the "auth.users" table (i.e., *Protected schemas > schema auth*). However, this action does not create an entry in the "users" table you created [here](/data-and-backend/supabase/supabase-authentication/initial-setup#1.-creating-a-users-table). To do so, you need to add another action called Supabase *insert row* action with the user's details, such as email and profile_pic. Once the entry has been created, you can navigate to the home page using the navigate action.
Expand All @@ -79,11 +79,11 @@ Here's how it looks:

### Adding Log In [Action]

To allow users to log in with their credentials, you can use [this](/actions/actions/backend-database/supabase-authentication/log-in#email-login) action.
To allow users to log in with their credentials, you can use [this](auth-actions.md#log-in-action) action.

### Adding Logout [Action]

To let users log out of your app, you can use [this](/actions/actions/backend-database/supabase-authentication/log-out) action.
To let users log out of your app, you can use [this](auth-actions.md#log-out-action) action.

### Verify user creation

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
slug: /integrations/authentication/supabase/initial-setup
title: Initial Setup
description: Learn how to perform the initial setup for Supabase authentication in your FlutterFlow app.
description: Learn how to perform the initial setup for Supabase Authentication in your FlutterFlow app.
tags: [FlutterFlow, Initial Setup, Authentication, Supabase]
sidebar_position: 0
keywords: [FlutterFlow, Initial Setup, Authentication, Supabase]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ com/embed/35564ad5e8be4f58aa72527bc6818183?sid=2740d823-df42-49c3-ae54-8e0e95a72

## 7. Delete note

You can delete an existing note from the database using the [SQLite query action](/actions/actions/backend-database/sqlite-query) with the type set to *Update Query* and Query Name to [DeleteNote](/settings-and-integrations/integrations/sqlite#id-4.-deletenote).
You can delete an existing note from the database using the [SQLite query action](../../../../resources/control-flow/backend-logic/backend-query/sqlite-query.md) with the type set to *Update Query* and Query Name to **Delete Note**.

:::tip[Pro Tip]
To refresh the page, simply add an [**Update App State Action**](../../../../resources/data-representation/app-state.md) Action with the Update Type set
Expand Down
3 changes: 3 additions & 0 deletions docs/ff-integrations/database/supabase/_category_.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"label": "Supabase"
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
slug: /integrations/database/supabase/database-actions
title: Database Actions
description: Learn about Supabase database actions in your FlutterFlow app, including how to perform various database operations.
description: Learn about Supabase Database actions in your FlutterFlow app, including how to perform various database operations.
tags: [FlutterFlow, Supabase, Database, Actions]
sidebar_position: 1
keywords: [FlutterFlow, Supabase, Database, Actions]
Expand Down Expand Up @@ -80,17 +80,15 @@ com/embed/f2a75f9b0e144f6aab06cc1f0965541b?sid=6f57ff8a-ca2a-4c47-833d-03fa928b8
8. Similarly, add the field for the other UI elements.





:::tip[How to & Tips]

<div class="video-container"><iframe src="https://www.loom.
com/embed/08cb8a851350428bbc226f2e7ce9d2b3?sid=b3d097cf-6f84-4f69-893a-3a363cbf7143" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>

<p></p>

If you have a flow like this, *HomePage* -> *AssignmentDetailsPage* ->
*UpdateAssignmentPage*, you can enable the **Replace Route** option (see point no. 5 [here](/actions/actions/navigation/navigate)) when you navigate from *AssignmentDetailsPage* to *UpdateAssignmentPage*. And then chain the [Navigate Back](/actions/actions/navigation/navigate-back#adding-navigate-back-action) action after the update action. This will directly open the *HomePage* after the row is updated.
*UpdateAssignmentPage*, you can enable the **Replace Route** option (see point no. 5 [here](../../../ff-concepts/navigation-routing/page-navigation.md#navigate-to-action)) when you navigate from *AssignmentDetailsPage* to *UpdateAssignmentPage*. And then chain the [Navigate Back](../../../ff-concepts/navigation-routing/page-navigation.md#navigate-back-action) action after the update action. This will directly open the *HomePage* after the row is updated.
:::


Expand Down
3 changes: 1 addition & 2 deletions docs/ff-integrations/gemini/gemini.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,8 +92,7 @@ This action enables your app to analyze images and generate descriptive text abo
* **Input**: *Text prompt* - "Identify the object in the image?"
* **Input**: *Image Type* - There are two ways you can provide an image.


+ **Image Network URL**: You can provide the URL of the image hosted on the internet. If you upload an image to [Firebase](/actions/actions/utilities/upload-data#id-1.-firebase) or [Supabase](/actions/actions/utilities/upload-data#id-2.-supabase), you can provide the image via ***Widget State > Uploaded File URL****.*
+ **Image Network URL**: You can provide the URL of the image hosted on the internet. If you upload an image to **Firebase** or **Supabase**, you can provide the image via ***Widget State > Uploaded File URL****.*
+ **Uploaded Image File**: You can also provide an image file directly [from your device](/actions/actions/utilities/upload-data#id-3.-local-upload-widget-state) via ***Widget State > Uploaded Local File****.*
* **Output**: *Action Output Variable Name* - "This is a pipe organ. It is a large musical instrument that is used in churches, concert halls, and other large buildings. The sound of a pipe organ is very powerful and can be used to create a wide variety of music."

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ com/embed/55a72de8e15e418581cc8b49fc108b12?sid=052ead4c-96e4-4e9a-95c5-40162eb0d
<figcaption class="centered-caption"></figcaption>
</figure>

4. Now, at appropriate event in your app, you can [add an action](/actions/actions/integrations/onesignal#adding-onesignal-action) that adds the user to the OneSignal's subscription.
4. Now, at appropriate event in your app, you can [add an action](#adding-onesignal-action) that adds the user to the OneSignal's subscription.

5. To test SMS functionality, follow the continuation of the instructions in the [SMS documentation](https://documentation.onesignal.com/docs/sending-sms-messages#sending-sms-notifications-from-dashboard).

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ com/embed/f6a0aa69b9274b1c965a85d72dcfdda5?sid=dfdebe15-61bf-4bf1-8cd6-238c7b9a5

You might want to send a push notification when something happens in your app. For example, sending a push notification on a message sent, a push notification on a new appointment booked, a push notification on a price change, etc.

You can send the push notification on such event occurrence by adding the [Trigger Push Notification](/actions/actions/alerts-notifications/trigger-push-notification-action) action.
You can send the push notification on such event occurrence by adding the **Trigger Push Notification** action.

For demonstration purposes, consider an example of sending a push notification to a post creator when someone comments on a post.

Expand Down
2 changes: 1 addition & 1 deletion docs/ff-integrations/streaming/mux/integrate-mux.md
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,7 @@ False. To do so:
3. Under the **On Broadcast Stop:**

- Add
the [Update Document](/actions/actions/backend-database/firestore#2.-defining-update-document-action)
the [Update Document](../../database/cloud-firestore/firestore-actions.md#update-document-action)
action.
- Set the reference to Action Outputs > broadcastOutput (action output variable name set in
previous step) > Reference.
Expand Down
2 changes: 1 addition & 1 deletion docs/ff-integrations/supabase/supabase-setup.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
slug: /integrations/supabase/setup
title: Supabase Setup
title: SupabaseSetup
description: Learn how to set up Supabase in your FlutterFlow app for database and authentication functionalities.
tags: [Supabase, Setup, Integration]
sidebar_position: 1
Expand Down
4 changes: 2 additions & 2 deletions docs/intro/ff-ui/widget-palette.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ From the Widgets tab, you can access all standard FlutterFlow widgets. They are

## 2. Components

Components are widgets with certain functionalities that can be reused throughout your app. They are constructed from either standard or custom widgets. Once you have created a [component](#) or [custom widget](../../ff-concepts/adding-customization/custom-widgets.md), you can access it from here.
Components are widgets with certain functionalities that can be reused throughout your app. They are constructed from either standard or custom widgets. Once you have created a [component](../../resources/ui-building-blocks/components/user-defined-components/getting-started.md) or [custom widget](../../ff-concepts/adding-customization/custom-widgets.md), you can access it from here.

## 3. Templates

Templates are predefined and ready-to-use widgets. These include UI elements that are commonly used in most apps and can serve as a starting point in creating parts of the user interface. You can also [create your own templates](#) from the standard widget.
Templates are predefined and ready-to-use widgets. These include UI elements that are commonly used in most apps and can serve as a starting point in creating parts of the user interface. You can also create your own templates from the standard widget.

## 4. Theme Widgets

Expand Down
8 changes: 4 additions & 4 deletions docs/resources/control-flow/backend-logic/api/rest-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ Sometimes you might want to retrieve the values of the response headers. For exa

To access the response header:

1. Ensure you have added the [API call action](/actions/actions/backend-database/api-call) and
1. Ensure you have added the [API call action](../api/rest-api.md) and
provided the **Action Output Variable Name**.
2. Now, whenever/wherever the **Value Source** is set to **From Variable**, select the **Action Outputs > [Action Output Variable Name]** (e.g., Action Outputs > loginResponse).
3. Set the **API Response Options** to **Get Response Header**.
Expand Down Expand Up @@ -303,7 +303,7 @@ To create a request body in the multipart format:
1. Select the **Body** tab and set the *Body* dropdown to **Multipart**.
2. Click on the **+ Add Parameter** and enter the **Name** of the parameter.
3. Set the **Value Source** to **From Variable,** and then from the **Select Variable** dropdown, click on **+ Create New Variable**. Note: This will immediately create a new variable with the same name as of parameter.
4. Now move to the **Variables** tab and set the **Type** to **Uploaded File**. This will allow you to pass the file stored locally on the device using an action such as [Upload/Save Media](/actions/actions/utilities/upload-data/upload-save-media).
4. Now move to the **Variables** tab and set the **Type** to **Uploaded File**. This will allow you to pass the file stored locally on the device using an action such as **Upload/Save Media**.

<div class="video-container"><iframe src="https://www.loom.
com/embed/89c86a2f87df4a7c9316e4ade9563976?sid=23eea851-5c59-45d0-8699-d952c62d7e6a" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
Expand Down Expand Up @@ -351,7 +351,7 @@ Here's how you do it:

<p></p>

3. On ListView, after adding the [API call backend query](docs/resources/control-flow/backend-logic/backend-query/api-call-query.md), access the values by setting the following options.
3. On ListView, after adding the [API call backend query](../../../../resources/control-flow/backend-logic/backend-query/api-call-query.md), access the values by setting the following options.

1. **Generate Children from Variable** by setting **API Response Options** to **As Data Type**.
2. Set **Available Options** to **Data Structure Field** because we want to grab only a specific field, which has a list of products and not other items such as 'total' and 'skip'.
Expand Down Expand Up @@ -698,7 +698,7 @@ It acts as a middleman between your app and the API server. So, when you make an
Let's see how to add an interceptor:

1. Navigate to the **Advanced Settings** tab.
2. Click on **+ Add Interceptors** and select **+ Create New Interceptor** to open the [Custom Action](/customizing-your-app/custom-functions/custom-actions) editor.
2. Click on **+ Add Interceptors** and select **+ Create New Interceptor** to open the [Custom Action](../../../../ff-concepts/adding-customization/custom-actions.md) editor.
3. Enter the **Action Name**.
4. In the boilerplate code, add your custom code within the `onRequest` function for request interception and modification and within the `onResponse` function for response interception and modification.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,9 @@ To change the loading indicator:

1. Ensure you have added a backend query.
2. Open the **Backend Query** section (on the right side) and scroll down to the **Backend Query Loading Widget**. Open it by clicking on the arrow icon.
3. Set the **Loading Widget Type** to **Image**. You can also choose a [**Component**](/widgets-and-components/custom-components) if you have already designed a loading component.
3. Set the **Loading Widget Type** to **Image**. You can also choose a [**Component**](../../../../resources/ui-building-blocks/components/user-defined-components/getting-started.md) if you have already designed a loading component.
4. Enable the **View in UI Builder**. This allows you to see your custom loading indicator on canvas (before you actually run the app).
5. Choose the **Image Type**, [add the image](../../../../resources/ui-building-blocks/widgets/widget-commonalities.md#changing-image-type), and adjust its **Padding** and **Width**.
5. Choose the **Image Type**, [add the image](../../../../resources/ui-building-blocks/widgets/built-in-widgets/image.md#image-type), and adjust its **Padding** and **Width**.
6. To show the indicator in the center, turn on the **Center Image** toggle.
7. Run the app, and your custom loading indicator will appear while the data is being loaded.

Expand Down Expand Up @@ -220,7 +220,7 @@ com/embed/ed9716ec74e542d8a264e87235ce3aec?sid=7b03c276-a8bb-4dbf-9131-acf0a1fa9
<p></p>

1. At this point, we have enabled the caching, but we still have one problem. Once the query is
cached, it will be used forever, although we update the data in our backend. This is because we are not clearing or invalidating the cache at the appropriate time. To properly invalidate the cache, you can use the **Should Override Cache** property OR [**Clear Query Cache**](/actions/actions/state-management/clear-query-cache) action. This helps you remove the cached data that has become stale or outdated.
cached, it will be used forever, although we update the data in our backend. This is because we are not clearing or invalidating the cache at the appropriate time. To properly invalidate the cache, you can use the **Should Override Cache** property OR **Clear Query Cache** action. This helps you remove the cached data that has become stale or outdated.

1. The *Should Override Cache* property accepts a boolean (True/False). That means we can
provide a variable (e.g., an *App State* variable named *isCacheOverride)* that knows when to override the cache. So create one and set it here.
Expand All @@ -242,7 +242,7 @@ page is loaded) and set the *isCacheOverride* variable accordingly. Here is how
1. [Update](/actions/actions/state-management/update-app-state) the **lastCacheTime** with
the current time and **isCacheOverride** to True. Make sure you keep the **Update Type** to **Rebuild Current Page** so that the backend query is made again, which will invalidate the cache and display updated data.
2. You can also add an action to [Clear Query Cache](/actions/actions/state-management/clear-query-cache).
3. Continuing the same action flow, [wait](/actions/actions/utilities/wait) for 1 sec and again update **isCacheOverride** to **False** so that the cached result won't override on page load for the next 30 min.
3. Continuing the same action flow, [wait](../../../../resources/control-flow/time-based-logic/wait-action.md) for 1 sec and again update **isCacheOverride** to **False** so that the cached result won't override on page load for the next 30 min.

<div class="video-container"><iframe src="https://www.loom.
com/embed/b5ca17571da943f2811db8b485ed4f02?sid=5e0a2480-727a-4868-8dd1-11f58e60d1f8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
Expand Down
Loading