Skip to content

Commit 8dac645

Browse files
PoojaB26PoojaB26
committed
Add backend query
1 parent fcdb2b6 commit 8dac645

File tree

13 files changed

+761
-0
lines changed

13 files changed

+761
-0
lines changed

‎docs/resources/control-flow/backend-logic/_category_.json

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

‎docs/resources/control-flow/backend-logic/api/_category_.json

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

‎docs/resources/control-flow/backend-logic/backend-query/_category_.json

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

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

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
---
2+
title: Algolia Search Query
3+
sidebar_position: 5
4+
---
5+
6+
# Algolia Search Query
7+
8+
You can set up an Algolia Search backend query to automatically trigger a search once the user navigates to the page. This will help users to find any document present inside a Firestore Collection by providing a search term.
9+
10+
:::info[Prerequisites]
11+
12+
There are some prerequisites before you start defining the search query:
13+
14+
1. A properly configured **Algolia account**.
15+
5. Have at least one **Firestore Collection** connected to the Algolia account.
16+
8. Completed Algolia configuration on **FlutterFlow**.
17+
:::
18+
19+
:::warning[Complete setup]
20+
If you haven't completed these steps, please follow the instructions present on the following
21+
page before proceeding: [Algolia Search](/data-and-backend/searching-data/algolia-search)
22+
:::
23+
24+
## Building Search UI
25+
26+
You will need a text to be used as the **search term** while using the Algolia search backend query. Let's build a search UI to take the term as user input and display the results returned from the query in a list. You can use a `TextField` to take the search term as input and a `ListView` to display the results.
27+
28+
Follow the steps below to create this UI:
29+
30+
1. Drag a `**TextField**` widget from the [Widget Panel]
31+
(/getting-started/ui-builder/navigation-menu/widget-and-component-panel) and drop it onto the canvas. (In the demo below, the `TextField` is placed inside the `AppBar` of the app).
32+
5. You can customize the `TextField` properties to match your app's design style. Add a search `Icon` to signify that it's a search field.
33+
8. Check the **Update Page On Change** checkbox. This helps to update the page as the user types inside the `TextField`. This would be required to use the latest text field value as the search term.
34+
11. Set an **Update Delay** (in milliseconds). This specifies the amount of time after the user stops typing to update the page.
35+
14. Now, drag and drop a `**ListView**` widget onto the canvas.
36+
17. Similarly, you can add widgets inside the `ListView` that you need for displaying the search result. (In the following demo, you will find that two `Text` widgets are added inside a `Column`).
37+
38+
<div style={{
39+
position: 'relative',
40+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
41+
height: 0,
42+
width: '100%'
43+
}}>
44+
<iframe
45+
src="https://demo.arcade.software/9FuHgvGaYMcNyy6SaO45?embed&show_copy_link=true"
46+
title=""
47+
style={{
48+
position: 'absolute',
49+
top: 0,
50+
left: 0,
51+
width: '100%',
52+
height: '100%',
53+
colorScheme: 'light'
54+
}}
55+
frameborder="0"
56+
loading="lazy"
57+
webkitAllowFullScreen
58+
mozAllowFullScreen
59+
allowFullScreen
60+
allow="clipboard-write">
61+
</iframe>
62+
</div>
63+
64+
## Define Algolia Search Backend Query
65+
66+
Once the UI of the page is ready, you can move on to the next step, that is, defining an Algolia Search Backend Query.
67+
68+
Follow the steps below to define the Backend Query:
69+
70+
1. Select the **widget** (or page) on which to apply the query. In this case, it's recommended to
71+
apply the query on the `ListView` widget.
72+
5. Select **Backend Query** from the [Properties panel](/getting-started/ui-builder/properties-panel) (the right menu).
73+
8. Select the **Query Type** as ***Algolia Search***.
74+
11. Choose the **Firebase Collection** on which to perform the search.
75+
14. 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*.
76+
17. If you have chosen ***Specific Value****,*define the term inside the field present.
77+
20. 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.
78+
23. 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.
79+
80+
<div style={{
81+
position: 'relative',
82+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
83+
height: 0,
84+
width: '100%'
85+
}}>
86+
<iframe
87+
src="https://demo.arcade.software/WdDxin8loDO8Pt3um1H0?embed&show_copy_link=true"
88+
title=""
89+
style={{
90+
position: 'absolute',
91+
top: 0,
92+
left: 0,
93+
width: '100%',
94+
height: '100%',
95+
colorScheme: 'light'
96+
}}
97+
frameborder="0"
98+
loading="lazy"
99+
webkitAllowFullScreen
100+
mozAllowFullScreen
101+
allowFullScreen
102+
allow="clipboard-write">
103+
</iframe>
104+
</div>
105+
106+
## Display Search Results
107+
108+
Follow the step below to display the search results inside the `ListView`:
109+
110+
1. Select a **widget** present inside the `ListView`, for example, a `Text` widget.
111+
5. Click **Set from Variable** from the [Properties Panel](/getting-started/ui-builder/properties-panel) (right menu).
112+
8. From the **Source** dropdown menu, choose the response of the Algolia Search that you had defined on the ListView widget.
113+
11. Under **Available Options** select the name of the field whose value you want to use.
114+
14. (Optional) You can specify a **Default Value** that would be shown if the field value is empty.
115+
17. Click **Save**.
116+
20. Repeat **Steps 1 to 6** for using the search response data on any other widget.
117+
118+
<div style={{
119+
position: 'relative',
120+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
121+
height: 0,
122+
width: '100%'
123+
}}>
124+
<iframe
125+
src="https://demo.arcade.software/rlecxtQjsAojNh7V4hlD?embed&show_copy_link=true"
126+
title=""
127+
style={{
128+
position: 'absolute',
129+
top: 0,
130+
left: 0,
131+
width: '100%',
132+
height: '100%',
133+
colorScheme: 'light'
134+
}}
135+
frameborder="0"
136+
loading="lazy"
137+
webkitAllowFullScreen
138+
mozAllowFullScreen
139+
allowFullScreen
140+
allow="clipboard-write">
141+
</iframe>
142+
</div>
143+

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

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
---
2+
title: API Call Query
3+
sidebar_position: 4
4+
---
5+
6+
# API Call Query
7+
8+
You can use the **API Call Query** to trigger an API call automatically as soon as the page or widget is loaded. This is helpful if you want to retrieve the data from an API call and display it on a page or widget. For example, showing a list of items in a ListView, showing users details on several Text widgets.
9+
10+
11+
<p></p>
12+
<div style={{
13+
position: 'relative',
14+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
15+
height: 0,
16+
width: '100%'
17+
}}>
18+
<iframe
19+
src="https://demo.arcade.software/7AK7XbMTJTvczmET5utt?embed&show_copy_link=true"
20+
title=""
21+
style={{
22+
position: 'absolute',
23+
top: 0,
24+
left: 0,
25+
width: '100%',
26+
height: '100%',
27+
colorScheme: 'light'
28+
}}
29+
frameborder="0"
30+
loading="lazy"
31+
webkitAllowFullScreen
32+
mozAllowFullScreen
33+
allowFullScreen
34+
allow="clipboard-write">
35+
</iframe>
36+
</div>
37+
38+
<p></p>
39+
40+
:::info[Prerequisites]
41+
42+
Before you add this query, ensure you [create an API call](../api/api-calls-101.md) in your project
43+
:::
44+
45+
## Adding API Call query
46+
47+
Adding API call query comprises the following steps:
48+
49+
2. [Querying API call](/data-and-backend/backend-query/api-call-query#quering-api-call)
50+
5. [Showing query data in UI element](/data-and-backend/backend-query/api-call-query#showing-query-data-in-ui-element)
51+
52+
### 1. Quering API call
53+
54+
Go to your project page and follow the steps below to define an **API Call** backend query:
55+
56+
1. Select the **widget** (or page) on which to apply the query.
57+
5. Select **Backend Query** from the [Properties panel](/getting-started/ui-builder/properties-panel) (the right menu).
58+
8. Select the **Query Type** as ***API Call***.
59+
11. Choose the API **Group or Call Name** from the dropdown. It would display all the API Calls created in your project.
60+
14. If your API call requires variables (e.g., auth token, query parameters, user id, etc.), pass their value by clicking on the **+ Set Additional Variable** button.
61+
17. Click **Confirm**.
62+
63+
<div class="video-container"><iframe src="https://www.loom.
64+
com/embed/a97de9dc59654495b5fa17d388360379?sid=5bf7009c-cf76-4905-a02e-aa21928882e4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
65+
66+
67+
68+
### 2. Showing query data in UI element
69+
70+
Once you have the API Call query defined, you can use the data retrieved from the query to display on widgets present inside. Follow the steps below:
71+
72+
2. Select the **widget** (e.g., `Text`) on which you want to display the data.
73+
5. From the [Properties Panel](/getting-started/ui-builder/properties-panel), select **Set from Variable**.
74+
8. Select the **Source** as the **YOUR\_API\_CALL\_NAME Response**.
75+
11. Set the **API response Options** to **JSON Body**.
76+
14. Set the **Available Options** to **JSON Path**.
77+
17. 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](/data-and-backend/api-calls/api-calls-101#adding-json-path).
78+
20. Click **Confirm**.
79+
80+
<div class="video-container"><iframe src="https://www.loom.
81+
com/embed/f706a263428b45358c1f6a2c7e3df05d?sid=b35ffd12-e894-4cdd-8cb6-0a11888116c2" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
82+
83+

0 commit comments

Comments
 (0)