diff --git a/docs/ff-integrations/search/algolia-search.md b/docs/ff-integrations/search/algolia-search.md index c4cf73a5..99b341da 100644 --- a/docs/ff-integrations/search/algolia-search.md +++ b/docs/ff-integrations/search/algolia-search.md @@ -9,82 +9,30 @@ keywords: [FlutterFlow, Algolia Search, Firestore Search] # Algolia -Using Algolia you can add search functionality to your FlutterFlow app. It allows you to search for documents present inside a Firestore Collection. Learn how to integrate Algolia Search with your app by following this tutorial. +[Algolia](https://www.algolia.com/) is a powerful search-as-a-service platform that provides lightning-fast and highly relevant search capabilities. Integrating Algolia into your FlutterFlow app allows you to implement real-time search functionality, making it easier for users to find relevant information within your app. :::info[Prerequisites] -Make sure you: -- Complete [**Firebase Setup**](../../ff-integrations/firebase/connect-to-firebase-setup.md) for your project. -- Upgraded your Firebase project to [**Blaze Plan**](https://firebase.google.com/pricing). -- Have at least one **Firestore Collection** on which you want to perform the search queries. -::: - -## Algolia integration -Alogolia integration comprises the following steps: +- Algolia integration in FlutterFlow is tied exclusively to Firestore collections. This means you must [**setup Firebase**](../../ff-integrations/firebase/connect-to-firebase-setup.md) to sync data from Firestore into Algolia for searching. +- **Upgraded** your Firebase project to the [**Blaze Plan**](https://firebase.google.com/pricing) for the Algolia Firebase Extension to work. +- Have at least one **Firestore Collection** on which you want to perform the search queries. -1. [Setup Algolia](#1-setup-algolia) -2. [Integrate with Firebase](#2-integrate-with-firebase) -3. [Import existing documents](#3-import-existing-documents) -4. [Algolia configuration on FlutterFlow](#4-algolia-configuration-on-flutterflow) -5. [Choose searchable fields](#5-choose-searchable-fields) -6. [Using Algolia Search](#6-using-algolia-search) +::: -### 1. Setup Algolia +## Algolia integration -You need to create an Algolia account for using their search service. Follow the steps below to setup Algolia: +Follow the steps below to integrate Algolia in your FlutterFlow apps: -1. Login to [Algolia](https://www.algolia.com/). If you don't have an account, create your free Algolia account by going [here](https://www.algolia.com/users/sign_up). -2. For a new account, fill up the required details and select a region of the data center. -3. Once you reach the dashboard of Algolia, go to **Settings**. -4. Select **Applications**. By default, you should already have an application called "(unnamed application)". -5. Click on the button with three dots present beside it, and select **Rename**. -6. Enter a name for the Application and click **Save**. +### Setup Algolia -
- -
-

+Setting up Algolia involves creating an application, defining an index, and generating an API key with the necessary permissions. Here are the steps in detail: -### 2. Integrate with Firebase +#### Step 1: Create an Algolia Application -You have to configure Firebase for integrating the Algolia search, follow the steps below: +Login to [Algolia](https://www.algolia.com/). If you don’t have an account, sign up for a free account [here](https://www.algolia.com/users/sign_up). During registration, fill in the required details and select a **data center region**. After signing up, you’ll be presented with an **import data screen**, but you can skip this for now (see button at the top right). -1. Go to your **Firebase project dashboard**. -2. Click on **Extensions**. -3. Click **Install** under ***Search with Algolia***. -4. In ***Step 1*** (Review billing and usage), it will show some information related to billing, click **Next**. -5. In ***Step 2*** (Review APIs enabled and resources created), this extension automatically creates a Cloud Function to interact with Algolia, click **Next**. -6. In ***Step 3*** (Configure extension), you have to fill in some information related to Algolia: - 1. Enter the **Collection Path** which is actually the name of the Collection that you want to make searchable using Algolia. - 2. You can skip the **Indexable Fields**. - 3. For **Algolia Index Name**, go to the Algolia dashboard and create a new index. Enter the same name in this field. - 4. For **Algolia Application Id**, you can go to the Algolia dashboard page, and check its URL, `https://www.algolia.com/apps/`. Copy the `application_id` and enter in the field. - 5. For **Algolia API Key**, from the Algolia dashboard go to `Settings > API Keys > All API Keys` and click **New API Key**. Under **Indices**, select the Index that you created earlier. In the **ACL** field, include these options: `addObject`, `deleteObject`, `listIndexes`, `deleteIndex`, `editSettings` & `settings`. Click **Create**. Copy the generated API Key and enter it in the respective field. - 6. Select a **Cloud Functions location**. - 7. Click **Install Extension**. +Next, name your application by navigating to **Settings > Applications** in the Algolia dashboard. By default, you should see an application called **"(unnamed application)"**. Click the three-dot button beside it, select **Rename**, enter a name for your application, and click **Save**. -Wait for the extension to get installed before proceeding to the next phase.
-
-

- - -### 4. Algolia configuration on FlutterFlow - -In order to use Algolia Search in your apps, you have to configure Algolia on FlutterFlow. Follow the steps below: +To integrate Algolia, you need an **API key** with the correct permissions. In the Algolia dashboard, go to **Settings > API Keys > All API Keys**, then click **New API Key**. Under **Indices**, select the index you created in the previous step. In the **ACL (Access Control List)** field, include these permissions: `addObject`, `deleteObject`, `listIndexes`, `deleteIndex`, `editSettings`, and `settings`. Click **Create**, then copy the generated API Key and keep it handy—you’ll need it next to [configure Algolia Firebase Extension](#sync-firebase-data). -1. Go to the [FlutterFlow dashboard](https://app.flutterflow.io/). -2. Click **Settings and Integrations** (the gear icon) from the Navigation Menu (left side menu). -3. Select **Integrations > Algolia**. -4. On the **Algolia Configuration** page, first, you have to enter the **Application ID**. You will find it on the Algolia dashboard page, copy the application ID from the URL: `https://www.algolia.com/apps/`. -5. You will get the **Search API Key** by going to `Algolia Settings > API Keys`. Copy the **Search-Only API Key** and paste it into the respective field of FlutterFlow. -6. Under **Indexed Collections**, select the Collections to be indexed by Algolia Search.
-
-

- - -This completes the building of a simple search user interface. Move on to the next step to define the Search Action. - -### Define Algolia Search Action - -Follow the steps below to define an Algolia Search Action: - -1. Select the **widget** (eg., IconButton) on which you want to define the action. -2. Select **Actions** from the Properties panel (the right menu). -3. Click **+ Add Action** button. -4. Choose a gesture from the dropdown among **On Tap, On Double Tap, or On Long Press**. -5. Select the **Action Type** as ***Algolia Search**.* -6. Choose the **Firebase Collection** on which to perform the search. -7. Now, you have to define from where to get the **Search Term**. You can either choose ***Specific Value*** or ***From Variable***. If you want to use a TextField value as the search term, you should choose *From Variable*. -8. If you have chosen **Specific Value**, define the term inside the field present. -9. If you have chosen ***From Variable***, select a **Source** from the dropdown menu and then select an option from the **Available Options**. For example, if you want to use the value of a TextField, select the Source as ***Widget State*** and choose the field name under Available Options. -10. Finally, you can set the number of maximum search results to fetch under **Max Results**. +Once done, click **Review and Save Settings**, then confirm by clicking **Save Settings** in the dialog. Algolia will now search only within the specified fields in your app.
-
-

+To configure the **Algolia Search** action in FlutterFlow, begin by selecting the widget that will trigger the search, such as an **IconButton**. In the **Properties Panel**, navigate to the **Actions** tab and click on **+ Add Action**, choose the appropriate gesture, like **On Tap**. Search and select the **Algolia Search** action. +Next, configure the search parameters: for **Firebase Collection**, select the Firestore collection you intend to search; for **Search Term**, choose **From Variable** and select the TextField's value (e.g., **Widget State > [Your TextField]**); and specify the optional **Max Results** to determine the number of search results. -Follow the steps below to pass each to the search result to a different page: - -1. Select the widget present inside the ListView on which you want to apply the [Navigate](../../ff-concepts/navigation-routing/page-navigation.md#navigate-to-action) Action. -2. Select **Actions** from the Properties panel (the right menu). -3. Click **+ Add Action** button. -4. Choose a gesture from the dropdown among **On Tap, On Double Tap, or On Long Press**. -5. Select the **Action Type as Navigate**. -6. Choose Navigation Type as Navigate to Page, select the page under **Navigate To**. -7. Click **+ Pass in Parameter**. -8. Select the **Parameter** name from the dropdown. -9. Choose the **Source** as the Algolia search result variable and select **reference** under **Available Options**. +Here’s an example of how you can add Algolia Search Action:
- -## Define Algolia Search Backend Query - -Once the UI of the page is ready, you can move on to the next step, that is, defining an Algolia Search Backend Query. - -Follow the steps below to define the Backend Query: - -1. Select the **widget** (or page) on which to apply the query. In this case, it's recommended to -apply the query on the `ListView` widget. -2. Select **Backend Query** from the [Properties Panel](../../../../intro/ff-ui/builder.md#properties-panel) (the right menu). -3. Select the **Query Type** as ***Algolia Search***. -4. Choose the **Firebase Collection** on which to perform the search. -5. Define from where to get the **Search Term**. You can either choose ***Specific Value*** or ***From Variable***. If you want to use a `TextField` value as the search term, you should choose *From Variable*. -6. If you have chosen **Specific Value**,define the term inside the field present. -7. If you have chosen ***From Variable***, select a **Source** from the dropdown menu and then select an option from the **Available Options**. For example, if you want to use the value of a `TextField`, select the Source as ***Widget State*** and choose the field name under Available Options. -8. Set the number of maximum search results to fetch under **Max Results**. Keep this field blank if you want to fetch all the matching search results. - -
- -
- -## Display Search Results - -Follow the step below to display the search results inside the `ListView`: - -1. Select a **widget** present inside the `ListView`, for example, a `Text` widget. -2. Click **Set from Variable** from the [Properties Panel](../../../../intro/ff-ui/builder.md#properties-panel) (right menu). -3. From the **Source** dropdown menu, choose the response of the Algolia Search that you had defined on the ListView widget. -4. Under **Available Options** select the name of the field whose value you want to use. -5. (Optional) You can specify a **Default Value** that would be shown if the field value is empty. -6. Click **Save**. -7. Repeat **Steps 1 to 6** for using the search response data on any other widget. - -
- -
- +

\ No newline at end of file diff --git a/docs/resources/control-flow/backend-logic/backend-query/api-call-query.md b/docs/resources/control-flow/backend-logic/backend-query/api-call-query.md index 7e216926..be14b61b 100644 --- a/docs/resources/control-flow/backend-logic/backend-query/api-call-query.md +++ b/docs/resources/control-flow/backend-logic/backend-query/api-call-query.md @@ -81,7 +81,7 @@ Once you have the API Call query defined, you can use the data retrieved from th 4. Set the **API response Options** to **JSON Body**. 5. Set the **Available Options** to **JSON Path**. 6. Set the **JSON Path Name** to either the custom JSON path or use the already created JSON - path. See how to [**create a JSON path**](../../backend-logic/api/rest-api.md#adding-json-path). + path. See how to [**create a JSON path**](../../backend-logic/api/rest-api.md#add-json-predefined-path). 7. Click **Confirm**.