You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/build-apps/component-guides/list-view.md
+87-35
Original file line number
Diff line number
Diff line change
@@ -7,52 +7,73 @@ description: >-
7
7
8
8
# List View
9
9
10
-
The following is a demo of **List View**, which displays part of BEST BOOKS OF 2021 from [Goodreads](https://www.goodreads.com/choiceawards/best-books-2021):
10
+
The component **List View** displays rows of data. Similar to Form, Modal, and Drawer, it is also a container-like component that can hold other components or modules. For list viewing data, you first bind the data to a **List View** component and configure the naming rules for the items. Then, you design the display of the first row by dragging and dropping components, and this layout will be applied to all items within this component.
11
+
12
+
The following is a demo of **List View**, displaying part of BEST BOOKS OF 2021 from [Goodreads](https://www.goodreads.com/choiceawards/best-books-2021):
Drag and drop **List View** onto the canvas. The list has three rows by default, and in each row there is an **Image** and a **Text** component. You only need to change properties of the first row, and the same settings are applied to the other rows automatically.
16
+
Drag and drop **List View** onto the canvas. Each item contains an **Image**, a **Text** and a **Rating** component. You can update the exhibition of the whole **List View** component by configuring the layout of the first entry.
Click the **Image** component, you see the defaulted image source.
17
19
18
-
For example, you can bind a static URL address to the **Image** component for image display; and because that URL address is static, the same image shows up in all rows.
The **List View** component retrieves data from a JSON array of objects and displays an **Image**, a **Text** and a **Rating** component for each entry. You can also pass query results to a **List View**.
21
23
22
-
To display data or images in a dynamic way, [#use-dynamic-variable-i](list-view.md#use-dynamic-variable-i"mention").
* Number: Numbers are processed as row count and no valid data is passed into the **List View** component.
31
+
* Array: The length of an array is passed as row count and each entry in the array is processed as a JS object in JSON format, corresponding to a row in the **List View** component. For example, the following data contains two rows of data, each containing four fields: `rate`, `title`, `url`, and `cover`. 
29
32
30
-
For example, to display all the fictions from the table `fiction` in **List View**, set the number of rows in the following steps:
After binding valid data to **List View** component and designing its inside components, you can add data to these components. **List View** supports local variables `currentItem` and `i`. Notice that you only need to change data of the first row, and the same settings are applied to the other rows automatically.
46
59
47
-
To bind the display data in a dynamic way, use the dynamic variable `i`. For example, if you want to display fiction book names in **Text** components, then you bind the value of `book_name` to `text1` in the following steps:
60
+
{% hint style="info" %}
61
+
You can bind a static URL address to the **Image** component for image display; and because that URL address is static, the same image shows up in all rows.
62
+
{% endhint %}
48
63
49
-
1. Create a query to get all the needed data—for example, `getAllFictions`:
  2\. Reference the query result in the value of `text1`:
68
+
You can set the item index names and item data names. This is useful when embedding a list in another list. For example, you can set the index of one list as `i`, and the inner nested `j` to avoid naming conflict.
By default, item index is named as`i`, referring to the index of list data and starting from zero. Besides using `i` as numbers, you can also use `i` to dynamically access data from query results.
75
+
76
+
For example, to access the `book_name` field from table `fiction` in the **Text** component, write the following code.
56
77
57
78
```javascript
58
79
{{getAllFictions.data[i].book_name}}
@@ -62,21 +83,52 @@ Then you can see the fiction book names displayed in **List View** by index orde
Similarly, to display book covers, reference the query result in the value of `image1`:
86
+
### Item data name
87
+
88
+
By default, you can reference the value of each item within a list using variable `currentItem`. For example, to display a serial number plus book name, write the following code in `text1` value.
Circular dependency errors occur when you reference the data of a row by `listView.items[i]` from a component inside a **List View** component. It is recommended to use such reference only outside the list.
98
+
{% endhint %}
99
+
100
+
## Pagination
72
101
73
-
To display more data such as author names and book introductions, drag in **Text** components and then reference the query result:
102
+
### Quick jumper
103
+
104
+
Toggle "Show quick jumper" or set its value to `true` to allow your users quickly jump to the specified page.
You can configure whether to allow your users to customize how many items to be displayed on a single page by enabling or disabling the "Show size changer button" or set its value in JS. When disabled, you can set the default page size.
By default, the total row count of a **List View** component is the number of current data items. You can also insert a value from a query. For example, `{{query1.data[0].count}}`.
121
+
122
+
## Reference List View items outside
123
+
124
+
**List View** supports exposing data of inside components with **Items** field. You can inspect the **Data Browser** in the left pane.
For example, drag an **Input** component into **List View**, and then you can reference the value of the **Rating** component in components outside the **List View** by the following code.
Copy file name to clipboardExpand all lines: docs/build-apps/event-handlers.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
In Openblocks, event handlers are responsible for collecting and processing events from components and queries, and executing subsequent actions. For example, for a **Button** component, you can add an event handler to trigger the **Run query** action **** in response to the button **Click** event.
Set event handlers wisely to provide a reactive and responsive user experience (UX). For example, triggering a **get-all** query after **insert-new-data** query finishes enables table automatically refresh.
8
8
@@ -32,7 +32,7 @@ Running a query can result in success or failure, so queries have two events: **
32
32
33
33
There are a number of event handler actions available in Openblocks for handling different scenarios. Set them in the **Action** dropdown list in an event handler.
34
34
35
-
 (1).png>)
35
+
 (1).png>)
36
36
37
37
{% hint style="info" %}
38
38
See [advanced](event-handlers.md#advanced) on this page to know advanced settings.
@@ -48,7 +48,7 @@ Trigger the selected query.
48
48
49
49
To control a component, select a component in the **Component** dropdown list and call one of its methods in the **Method** dropdown list.
Copy file name to clipboardExpand all lines: docs/build-apps/module.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ When building an app, you want to reuse components and queries across different
4
4
5
5
<figure><imgsrc="../.gitbook/assets/module-1.png"alt=""><figcaption><p>Build a <ahref="module.md#demo-a-statistics-module">statistics module</a></p></figcaption></figure>
6
6
7
-
<figure><imgsrc="../.gitbook/assets/module-2.png"alt=""><figcaption><p>Reuse this module anywhere</p></figcaption></figure>
7
+
<figure><imgsrc="../.gitbook/assets/module-2 (1).png"alt=""><figcaption><p>Reuse this module anywhere</p></figcaption></figure>
8
8
9
9
## Module basics
10
10
@@ -67,7 +67,7 @@ Module inputs are parameters passed to the module from external apps. The suppor
67
67
68
68
This section guides you through the steps to build a statistics module and reuse it in an app.  
Navigate to the left sidebar, click <imgsrc="../.gitbook/assets/image (1).png"alt=""data-size="line"> > **Other** > **Scripts and style** > **Add a library**. Then paste the **cowsay** link here.
Copy file name to clipboardExpand all lines: docs/build-apps/write-javascript/javascript-query.md
+3-11
Original file line number
Diff line number
Diff line change
@@ -198,7 +198,7 @@ function getCurrentDate() {
198
198
}
199
199
```
200
200
201
-
## Customized scripting
201
+
## Add preloaded scripts
202
202
203
203
Openblocks supports importing third-party JS libraries and adding predefined JS code, such as adding global methods or variables for reuse either at **app-level** or **workspace-level**. You can find the app-level settings in ⚙️ > **Other** > **Scripts and style**.
204
204
@@ -208,20 +208,12 @@ For workspace-level, go to ⚙️ **Settings** > **Advanced**.
Openblocks supports setting up preloaded JS libraries. For detailed information, see [use-third-party-libraries.md](../use-third-party-libraries.md "mention").
In **JavaScript** tab, you can add preloaded JavaScript code to define global methods and variables and then reuse them in your app.
211
+
In **JavaScript** tab, you can add preloaded JavaScript code to define global methods and variables and then reuse them in your app. For importing libraries, see [use-third-party-libraries.md](../use-third-party-libraries.md "mention").
For security reasons, several global variables and functions of **window** are disabled in Openblocks. Please report to our [GitHub](https://github.com/openblocks-dev/openblocks) or [Discord](https://discord.com/invite/z5W2YHXdtt) if you encounter any issues.
4. Fill out data source connection fields. See docs in [Connect to databases](broken-reference) and [Connect to APIs](connect-to-databases-1/) for detailed tutorials.
22
+
4. Fill out data source connection fields. See docs in [Connect to databases](broken-reference) and [Connect to APIs](connect-to-databases/) for detailed tutorials.
23
23
5. Click **Test connection** to check whether you can make a successful connection to data source based on current settings.
Copy file name to clipboardExpand all lines: docs/queries/query-basics.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ Queries support you to read data from or write data to your data sources. You ca
6
6
7
7
You can connect to a data source that was already in your data source library or create a new one. For detailed information, see [data-source-basics.md](../data-sources/data-source-basics.md"mention").
0 commit comments