Skip to content

Commit b297d14

Browse files
Openblocks-docsgitbook-bot
Openblocks-docs
authored and
gitbook-bot
committed
GitBook: [lowcoder-org#94] add doc "List View" & edit doc "Query library"
1 parent 081ddd8 commit b297d14

29 files changed

+102
-21
lines changed

‎docs/.gitbook/assets/Add a library (1) (1) (1) (1).png

116 KB
Loading

‎docs/.gitbook/assets/Add a library (1) (1) (1) (2).png

116 KB
Loading

‎docs/.gitbook/assets/Import on Workspace-level libraries (1) (1) (1) (1).png

36.6 KB
Loading

‎docs/.gitbook/assets/Import on Workspace-level libraries (1) (1) (1) (2).png

36.6 KB
Loading

‎docs/.gitbook/assets/Import on Workspace-level libraries-advanced (1) (1) (1) (1).png

82.7 KB
Loading

‎docs/.gitbook/assets/Import on Workspace-level libraries-advanced (1) (1) (1) (2).png

82.7 KB
Loading

‎docs/.gitbook/assets/in another app (1) (1) (1) (1).png

81.3 KB
Loading

‎docs/.gitbook/assets/in another app (1) (1) (1) (2).png

81.3 KB
Loading

‎docs/.gitbook/assets/listview-1.gif

6.69 MB
Loading

‎docs/.gitbook/assets/listview-2.png

71.4 KB
Loading

‎docs/.gitbook/assets/listview-3.png

192 KB
Loading

‎docs/.gitbook/assets/listview-4.png

90.5 KB
Loading

‎docs/.gitbook/assets/listview-5.png

191 KB
Loading

‎docs/.gitbook/assets/listview-6.png

239 KB
Loading

‎docs/.gitbook/assets/listview-7.png

301 KB
Loading

‎docs/.gitbook/assets/listview-8.png

430 KB
Loading

‎docs/.gitbook/assets/or in Properties (1) (1) (1) (1).png

148 KB
Loading

‎docs/.gitbook/assets/or in Properties (1) (1) (1) (2).png

148 KB
Loading

‎docs/.gitbook/assets/write code in JS query (1) (1) (1) (1).png

92.8 KB
Loading

‎docs/.gitbook/assets/write code in JS query (1) (1) (1) (2).png

92.8 KB
Loading

‎docs/SUMMARY.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
* [Temporary state](build-apps/write-javascript/temporary-state.md)
3030
* [Component guides](build-apps/component-guides/README.md)
3131
* [Option lists](build-apps/component-guides/option-lists.md)
32+
* [List View](build-apps/component-guides/list-view.md)
3233
* [Image](build-apps/component-guides/image.md)
3334
* [Use Markdown](build-apps/component-guides/use-markdown.md)
3435
* [Module](build-apps/module.md)

‎docs/build-apps/component-guides/list-view.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
---
2+
description: >-
3+
The component List View is for you to display rows of data. It works like a
4+
container: you can insert other components into it and bind data to these
5+
components.
6+
---
7+
8+
# List View
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):
11+
12+
<figure><img src="../../.gitbook/assets/listview-1.gif" alt=""><figcaption></figcaption></figure>
13+
14+
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.
15+
16+
<figure><img src="../../.gitbook/assets/listview-2.png" alt=""><figcaption></figcaption></figure>
17+
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.
19+
20+
<figure><img src="../../.gitbook/assets/listview-3.png" alt=""><figcaption></figcaption></figure>
21+
22+
To display data or images in a dynamic way, [#use-dynamic-variable-i](list-view.md#use-dynamic-variable-i "mention").
23+
24+
## Set the number of list rows
25+
26+
You can set the number of list rows in a static way by inputting a number, or bind it to dynamic query result.
27+
28+
<figure><img src="../../.gitbook/assets/listview-4.png" alt=""><figcaption></figcaption></figure>
29+
30+
For example, to display all the fictions from the table `fiction` in **List View**, set the number of rows in the following steps:
31+
32+
1. Create a query to count the items of your data—for example, `countAllFictions`.
33+
2. Write the following code for the query:&#x20;
34+
35+
```sql
36+
select count(*) from fiction
37+
```
38+
39+
&#x20; 3\. Reference the query result in **Number of rows** via the code:&#x20;
40+
41+
```javascript
42+
{{countAllFictions.data[0].count}}
43+
```
44+
45+
## Use dynamic variable i
46+
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:
48+
49+
1. Create a query to get all the needed data—for example, `getAllFictions`:
50+
51+
```sql
52+
select * from fiction
53+
```
54+
55+
&#x20; 2\. Reference the query result in the value of `text1`:
56+
57+
```javascript
58+
{{getAllFictions.data[i].book_name}}
59+
```
60+
61+
Then you can see the fiction book names displayed in **List View** by index order.
62+
63+
<figure><img src="../../.gitbook/assets/listview-5.png" alt=""><figcaption></figcaption></figure>
64+
65+
Similarly, to display book covers, reference the query result in the value of `image1`:
66+
67+
```javascript
68+
{{getAllFictions.data[i].cover}}
69+
```
70+
71+
<figure><img src="../../.gitbook/assets/listview-6.png" alt=""><figcaption></figcaption></figure>
72+
73+
To display more data such as author names and book introductions, drag in **Text** components and then reference the query result:
74+
75+
```javascript
76+
{{getAllFictions.data[i].author_name}}
77+
{{getAllFictions.data[i].intro}}
78+
```
79+
80+
<figure><img src="../../.gitbook/assets/listview-7.png" alt=""><figcaption></figcaption></figure>
81+
82+
<figure><img src="../../.gitbook/assets/listview-8.png" alt=""><figcaption></figcaption></figure>

‎docs/build-apps/event-handlers.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
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.
44

5-
<figure><img src="../.gitbook/assets/image (19).png" alt=""><figcaption></figcaption></figure>
5+
<figure><img src="../.gitbook/assets/image (8) (1).png" alt=""><figcaption></figcaption></figure>
66

77
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.
88

@@ -32,7 +32,7 @@ Running a query can result in success or failure, so queries have two events: **
3232

3333
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.
3434

35-
![](<../.gitbook/assets/image (1) (1).png>)
35+
![](<../.gitbook/assets/image (9) (1).png>)
3636

3737
{% hint style="info" %}
3838
See [advanced](event-handlers.md#advanced) on this page to know advanced settings.
@@ -48,7 +48,7 @@ Trigger the selected query.
4848

4949
To control a component, select a component in the **Component** dropdown list and call one of its methods in the **Method** dropdown list.
5050

51-
![](<../.gitbook/assets/image (17).png>)
51+
![](<../.gitbook/assets/image (29).png>)
5252

5353
### Set temporary state
5454

‎docs/build-apps/module.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ When building an app, you want to reuse components and queries across different
44

55
<figure><img src="../.gitbook/assets/module-1.png" alt=""><figcaption><p>Build a <a href="module.md#demo-a-statistics-module">statistics module</a></p></figcaption></figure>
66

7-
<figure><img src="../.gitbook/assets/module-2.png" alt=""><figcaption><p>Reuse this module anywhere</p></figcaption></figure>
7+
<figure><img src="../.gitbook/assets/module-2 (1).png" alt=""><figcaption><p>Reuse this module anywhere</p></figcaption></figure>
88

99
## Module basics
1010

@@ -67,7 +67,7 @@ Module inputs are parameters passed to the module from external apps. The suppor
6767

6868
This section guides you through the steps to build a statistics module and reuse it in an app. &#x20;
6969

70-
<figure><img src="../.gitbook/assets/module-2.png" alt=""><figcaption></figcaption></figure>
70+
<figure><img src="../.gitbook/assets/module-2 (1).png" alt=""><figcaption></figcaption></figure>
7171

7272
1. Create module inputs:
7373

@@ -86,7 +86,7 @@ This section guides you through the steps to build a statistics module and reuse
8686
<figure><img src="../.gitbook/assets/module-17.png" alt=""><figcaption></figcaption></figure>
8787
5. Reuse the module multiple times by passing different input values.&#x20;
8888

89-
<figure><img src="../.gitbook/assets/module-2.png" alt=""><figcaption></figcaption></figure>
89+
<figure><img src="../.gitbook/assets/module-2 (1).png" alt=""><figcaption></figcaption></figure>
9090

9191
#### Input Test
9292

‎docs/build-apps/use-third-party-libraries.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,19 +70,19 @@ https://unpkg.com/cowsay@1.5.0/build/cowsay.umd.js
7070

7171
Navigate to the left sidebar, click <img src="../.gitbook/assets/image (1).png" alt="" data-size="line"> > **Other** > **Scripts and style** > **Add a library**. Then paste the **cowsay** link here.
7272

73-
<figure><img src="../.gitbook/assets/Add a library (2).png" alt=""><figcaption></figcaption></figure>
73+
<figure><img src="../.gitbook/assets/Add a library (1) (1) (1) (2).png" alt=""><figcaption></figcaption></figure>
7474

7575
Now you can write code in **JS query** to test its usage with `cowsay.say`:
7676

77-
<figure><img src="../.gitbook/assets/write code in JS query (2).png" alt=""><figcaption></figcaption></figure>
77+
<figure><img src="../.gitbook/assets/write code in JS query (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
7878

7979
or in component **Properties**:
8080

81-
<figure><img src="../.gitbook/assets/or in Properties (2).png" alt=""><figcaption></figcaption></figure>
81+
<figure><img src="../.gitbook/assets/or in Properties (1) (1) (1) (2).png" alt=""><figcaption></figcaption></figure>
8282

8383
And since you have set up cowsay just for **Openblocks's new application 1,** you can not use cowsay in another app.
8484

85-
<figure><img src="../.gitbook/assets/in another app (1).png" alt=""><figcaption></figcaption></figure>
85+
<figure><img src="../.gitbook/assets/in another app (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
8686

8787
### Import on Workspace-level
8888

‎docs/data-sources/connect-to-databases/google-sheets.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ Navigate back to to [Google Sheets](https://docs.google.com/spreadsheets), and f
3737
1. Open the JSON file of the key.
3838
2. Copy the value of `client_email`, which is an identity used for access management of your sheet.
3939

40-
<figure><img src="../../.gitbook/assets/Google-sheets-key-client-email (1).jpeg" alt=""><figcaption></figcaption></figure>
40+
<figure><img src="../../.gitbook/assets/Google-sheets-key-client-email.jpeg" alt=""><figcaption></figcaption></figure>
4141
3. Click **Share** at the top right and paste the copied `client_email` value to add a member with access.
4242

4343
<figure><img src="../../.gitbook/assets/Google-sheets-share.jpg" alt=""><figcaption></figcaption></figure>

‎docs/data-sources/data-source-basics.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Follow the steps below:
1515
1. Click **Data Sources** on Openblocks homepage.
1616
2. Click **New data source** on the upper right. This permission is restricted to workspace admins and developers.
1717

18-
<figure><img src="../.gitbook/assets/image (12) (1).png" alt=""><figcaption></figcaption></figure>
18+
<figure><img src="../.gitbook/assets/image (31) (1).png" alt=""><figcaption></figcaption></figure>
1919
3. Select the database or API type you need to connect.&#x20;
2020

2121
<figure><img src="../.gitbook/assets/data source basics-2.png" alt=""><figcaption></figcaption></figure>

‎docs/queries/query-basics.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Queries support you to read data from or write data to your data sources. You ca
66

77
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").
88

9-
<figure><img src="../.gitbook/assets/image (31) (1).png" alt=""><figcaption></figcaption></figure>
9+
<figure><img src="../.gitbook/assets/image (12) (1).png" alt=""><figcaption></figcaption></figure>
1010

1111
## Create a query
1212

‎docs/queries/query-library.md

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -71,18 +71,16 @@ You can restore your current draft to a history version by selecting the target
7171

7272
## Import a query
7373

74-
1. In an app or module, Click **+ New** in the **Query editor** in the bottom pane, then select **Import from Query Library**.
74+
1. In an app or module, Click **+ New** in the **Query editor** in the bottom pane, then select **Import from Query Library**. &#x20;
7575

76-
<figure><img src="../.gitbook/assets/query library 12.png" alt=""><figcaption></figcaption></figure>
76+
<figure><img src="../.gitbook/assets/query library 12.png" alt=""><figcaption></figcaption></figure>
77+
2. Select a query from the library from the dropdown list, choose your desired version and pass in corresponding input parameters.
7778

78-
1. Select a query from the library from the dropdown list, choose your desired version and pass in corresponding input parameters.
79+
<figure><img src="../.gitbook/assets/query library 13.png" alt=""><figcaption></figcaption></figure>
7980

80-
<figure><img src="../.gitbook/assets/query library 13.png" alt=""><figcaption></figcaption></figure>
81+
<figure><img src="../.gitbook/assets/query library 14.png" alt=""><figcaption></figcaption></figure>
8182

82-
83-
84-
<figure><img src="../.gitbook/assets/query library 14.png" alt=""><figcaption></figcaption></figure>
85-
2. For other settings, see [query-basics.md](query-basics.md "mention").
83+
For other settings, see [query-basics.md](query-basics.md "mention").
8684

8785
## Permissions
8886

0 commit comments

Comments
 (0)