Skip to content

Commit 8008482

Browse files
adnanqaopsgitbook-bot
adnanqaops
authored and
gitbook-bot
committed
GITBOOK-199: Methods Explanation of different Components
1 parent 5624144 commit 8008482

File tree

12 files changed

+313
-25
lines changed

12 files changed

+313
-25
lines changed

‎docs/build-applications/app-editor/visual-components/dashboard-and-reporting/table.md

Lines changed: 107 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -82,16 +82,110 @@ Events give you the ability to trigger further actions (with Event-Handlers)
8282

8383
### Methods
8484

85-
You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events
86-
87-
| Method Name | Description |
88-
| ------------------- | ---------------------------------------------- |
89-
| setFilter | Set the Value of Property filter |
90-
| setPage | Set the Value of Property page |
91-
| setSort | Set the Value of Property sort |
92-
| resetSelections | Set the Value of Property resetselections |
93-
| setMultiSort | Set the Value of Property sort |
94-
| cancelChanges | Cancel the Changes to the Table |
95-
| cancelInsertChanges | Cancel the to be inserted changes to the Table |
96-
97-
\
85+
You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events. 
86+
87+
**setPage() :** 
88+
89+
table1.setPage() method sets the table's page property to be displayed on Table component. e.g. following code will set the 2nd page on the Table component :
90+
91+
```javascript
92+
table1.setPage(2);
93+
```
94+
95+
**setFilter() :** 
96+
97+
table1.setFilter() method sets single or multiple Filter conditions on the Table's data, and in return Table shows the filtered data as per the conditions set in the setFilter() method. Here's how it works : 
98+
99+
```javascript
100+
// Single Filter condition
101+
table1.setFilter({
102+
stackType: 'and',
103+
filters: [
104+
{
105+
columnKey: 'name',
106+
filterValue: 'Mano',
107+
operator: 'contain'
108+
}
109+
]
110+
})
111+
```
112+
113+
In the above code, "stackType" sets the condition of "AND" or "OR" among different Filters. "filters" array include the columnKey, filterValue and the operator.
114+
115+
```javascript
116+
// Multiple Filter conditions
117+
table1.setFilter({
118+
stackType: 'and',
119+
filters: [
120+
{
121+
columnKey: 'name',
122+
filterValue: 'a',
123+
operator: 'contain'
124+
},
125+
{
126+
columnKey: 'id',
127+
filterValue: '1',
128+
operator: 'contain'
129+
}
130+
]
131+
})
132+
```
133+
134+
In the above code, we have applied multiple filters on the Table.
135+
136+
**setSort() :** 
137+
138+
table1.setSort() method sorts an individual column on a Table in ascending or descending order. It takes two arguments : 
139+
140+
1. ColumnKey
141+
2. Descending order
142+
143+
```javascript
144+
// Descending order set to True
145+
table1.setSort("id", true);
146+
```
147+
148+
The above code sorts the "ID" column in descending order. If descending order is set to 'false', then it will sort the "ID" column in ascending order.
149+
150+
**setMultiSort() :** 
151+
152+
table1.setMultiSort() method sorts the Table in ascending or descending order, based on multiple columns. It sorts first based on 1st column , and then based on the 2nd column : 
153+
154+
```javascript
155+
// MultiSort
156+
table1.setMultiSort([
157+
{
158+
"column": "name",
159+
"desc": true
160+
},
161+
{
162+
"column": "id",
163+
"desc": false
164+
}])
165+
```
166+
167+
**resetSelections() :** 
168+
169+
table1.resetSelections() method resets the selected Row or Rows to the default ones. By default, 1st Row is selected in the Table in case of Single Row Select. If you click on let say 5th Row of the Table, it will get selected and if you run following code, then the table's 1st Row will be selected.
170+
171+
In case of multiple row selected, following code will deselect all the selected rows.
172+
173+
```javascript
174+
table1.resetSelections();
175+
```
176+
177+
**cancelChanges() :** 
178+
179+
table1.cancelChanges() method cancels the Updated + Inserted changes on an Editable table. Updated changes are those which you make to the existing Table data/rows. Inserted changes are the new Rows that you insert on the Table
180+
181+
```javascript
182+
table1.cancelChanges();
183+
```
184+
185+
**cancelInsertChanges() :** 
186+
187+
table1.cancelInsertChanges() method only cancels the inserted changes on an Editable table.
188+
189+
```javascript
190+
table1.cancelInsertChanges();
191+
```

‎docs/build-applications/app-editor/visual-components/data-collection-and-forms/form.md

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,5 +43,32 @@ Events give you the ability to trigger further actions (with Event-Handlers).
4343

4444
You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.
4545

46-
<table><thead><tr><th>Method Name</th><th width="426.51953125">Description</th></tr></thead><tbody><tr><td>setData</td><td>Set the data of the property Data</td></tr><tr><td>clear</td><td>Clear the data of the property Data</td></tr><tr><td>reset</td><td>ReSet the data of the property Data</td></tr></tbody></table>
46+
**setData() :**&#x20;
4747

48+
form1.setData() method sets the Form's data property, which fills up all the components that are present/added into the Form component. This method takes Object as an argument. For example, for a Form having an input field, a number input field and a TextArea component, following code will set the Data of the Form component.
49+
50+
```javascript
51+
form1.setData({
52+
input1 : "John",
53+
numberInput1 : 25,
54+
textArea1: "Hello, I am John, 25 years old"
55+
});
56+
```
57+
58+
Here, in the above code, "input1" refers to key/id of the Input field.
59+
60+
**clear() :**&#x20;
61+
62+
form1.clear() clears the Form's data property and empties the Form component.
63+
64+
```javascript
65+
form1.clear();
66+
```
67+
68+
**reset() :**&#x20;
69+
70+
form1.reset() method resets the Form's data property to the default value of the Form component.
71+
72+
```javascript
73+
form1.reset();
74+
```

‎docs/build-applications/app-editor/visual-components/layout-and-navigation/cascader.md

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,5 +41,26 @@ Events give you the ability to trigger further actions (with Event-Handlers).
4141

4242
You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.
4343

44-
<table><thead><tr><th width="177.9296875">Method Name</th><th width="485.80078125">Description</th></tr></thead><tbody><tr><td>setValue</td><td>Set the value of the property Value</td></tr><tr><td>resetValue</td><td>Reset the value of the property Value</td></tr><tr><td>clearValue</td><td>Clear the value of the property Value</td></tr></tbody></table>
44+
**setValue() :**&#x20;
4545

46+
cascader1.setValue() method sets the Cascader's Value property, which is shown as selected in the Cascader component.
47+
48+
```javascript
49+
cascader1.setValue(["New South Wales","Sydney","Sydney Opera House"]);
50+
```
51+
52+
**clearValue() :**&#x20;
53+
54+
tree1.clearValue() clears the Tree's Value property and empties the selected value in the Tree component.
55+
56+
```javascript
57+
tree1.clearValue();
58+
```
59+
60+
**resetValue() :**&#x20;
61+
62+
tree1.resetValue() method resets the Tree's value property to the default value of the Tree component.
63+
64+
```javascript
65+
tree1.resetValue();
66+
```

‎docs/build-applications/app-editor/visual-components/layout-and-navigation/drawer.md

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,11 @@ Usually, in an app, you trigger opening a drawer by an event such as clicking a
3434
2. Set the event handler of the button. Select "Control component" as the **Action** and select the component "cart" and method "openDrawer". All these settings are auto-saved.
3535
3. Click the button `gotoCart` and the binded drawer "cart" is open.
3636

37+
```javascript
38+
// Some code
39+
drawer1.openDrawer();
40+
```
41+
3742
### Trigger closeDrawer
3843

3944
Triggerring "closeDrawer" is similar to triggering "openDrawer". When setting up the event handler, select the method "closeDrawer". For example, in the [Online Shopping demo](https://cloud.lowcoder.dev/apps/63a422a344075b798fe3ae06/view), closing a drawer that displays the shopping cart is implemented in the following steps.
@@ -42,6 +47,11 @@ Triggerring "closeDrawer" is similar to triggering "openDrawer". When setting up
4247
2. Set the event handler of the button. Select "Control component" as the **Action** and select the component "cart" and method "closeDrawer". All these settings are auto-saved.
4348
3. Click the "Continue Shopping" button and the binded drawer "cart" is closed.
4449

50+
```javascript
51+
// Some code
52+
drawer1.closeDrawer();
53+
```
54+
4555
### Component Playground
4656

4757
On Component Playground, you can interact with the Drawer component and explore it's Properties, Events and Methods. Play with different Styling properties to see the effect on the Drawer component.
@@ -62,5 +72,26 @@ In the Auto-Docs of Drawer component, we have shown how to use different propert
6272

6373
You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.
6474

65-
<table><thead><tr><th width="140.265625">Method Name</th><th width="477.546875">Description</th></tr></thead><tbody><tr><td>openDrawer</td><td>Opens a Drawer component</td></tr><tr><td>closeDrawer</td><td>Closes a Drawer component</td></tr><tr><td>setVisible</td><td>Sets the value of property Visible</td></tr><tr><td>resetVisible</td><td>Resets the value of property Visible</td></tr><tr><td>clearVisible</td><td>Clears the value of propery Visible</td></tr></tbody></table>
75+
**setVisible() :**&#x20;
76+
77+
drawer1.setVisible() method sets the Drawer's Visible property, due to which Drawer component is shown or not.
78+
79+
```javascript
80+
drawer1.setVisible(true);
81+
```
82+
83+
**clearVisible() :**&#x20;
84+
85+
drawer1.clearVisible() clears the Drawer's Visible property and empties the already set value in the Drawer component.
86+
87+
```javascript
88+
drawer1.clearVisible();
89+
```
90+
91+
**resetVisible() :**&#x20;
92+
93+
drawer1.resetVisible() method resets the drawer's visible property to the default value of the drawer component.
6694

95+
```javascript
96+
drawer1.resetValue();
97+
```

‎docs/build-applications/app-editor/visual-components/layout-and-navigation/floating-button.md

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,5 +35,26 @@ These properties are accessible in \{{ \}} notations, as well as in JavaScript Q
3535

3636
You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilised. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.
3737

38-
<table><thead><tr><th width="177.9296875">Method Name</th><th width="485.80078125">Description</th></tr></thead><tbody><tr><td>setValue</td><td>Set the data of the property Value</td></tr><tr><td>clearValue</td><td>Clear the data of the property Value</td></tr><tr><td>resetValue</td><td>Reset the data of the property Value</td></tr></tbody></table>
38+
**setValue() :**&#x20;
3939

40+
floatingButton1.setValue() method sets the Floating button's Value property.
41+
42+
```javascript
43+
floatingButton1.setValue();
44+
```
45+
46+
**clearValue() :**&#x20;
47+
48+
floatingButton1.clearValue() clears the Floating button's Value property and empties the current value from the component.
49+
50+
```javascript
51+
floatingButton1.clearValue();
52+
```
53+
54+
**resetValue() :**&#x20;
55+
56+
floatingButton1.resetValue() method resets the Floating button's value property to the default value of the component.
57+
58+
```javascript
59+
floatingButton1.resetValue();
60+
```

‎docs/build-applications/app-editor/visual-components/layout-and-navigation/list-view.md

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,12 @@ In the Auto-Docs of List View component, we have shown how to use different prop
114114

115115
### &#x20;Methods
116116

117-
You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events
117+
You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.&#x20;
118118

119-
<table><thead><tr><th>Method Name</th><th width="425.68359375">Description</th></tr></thead><tbody><tr><td>setPage</td><td>Set the Page Number on the ListView component</td></tr></tbody></table>
119+
**setPage() :**&#x20;
120120

121+
listView1.setPage() method sets the ListView's page property to be displayed on the ListView component. e.g. following code will set the 3nd page on the ListView component :
122+
123+
```javascript
124+
listView1.setPage(3);
125+
```

‎docs/build-applications/app-editor/visual-components/layout-and-navigation/modal.md

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,5 +40,26 @@ Events give you the ability to trigger further actions (with Event-Handlers).
4040

4141
You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.
4242

43-
<table><thead><tr><th width="177.9296875">Method Name</th><th width="485.80078125">Description</th></tr></thead><tbody><tr><td>setVisible</td><td>Set the value of the property Visible</td></tr><tr><td>resetVisible</td><td>Reset the value of the property Visible</td></tr><tr><td>clearVisible</td><td>Clear the value of the property Visible</td></tr></tbody></table>
43+
**setVisible() :**&#x20;
4444

45+
modal1.setVisible() method sets the Modal's Visible property, due to which Modal component is shown or not.
46+
47+
```javascript
48+
modal1.setVisible(true);
49+
```
50+
51+
**clearVisible() :**&#x20;
52+
53+
modal1.clearVisible() clears the Modal's Visible property and empties the already set value in the Modal component.
54+
55+
```javascript
56+
modal1.clearVisible();
57+
```
58+
59+
**resetVisible() :**&#x20;
60+
61+
modal1.resetVisible() method resets the Modal's visible property to the default value of the Modal component.
62+
63+
```javascript
64+
modal1.resetValue();
65+
```

‎docs/build-applications/app-editor/visual-components/layout-and-navigation/page-layout.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,10 @@ These properties are accessible in \{{ \}} notations, as well as in JavaScript Q
3131

3232
You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilised. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.
3333

34-
<table><thead><tr><th width="177.9296875">Method Name</th><th width="485.80078125">Description</th></tr></thead><tbody><tr><td>setSiderCollapsed</td><td>Set the value of the property siderCollapsed</td></tr></tbody></table>
34+
**setSiderCollapsed() :**&#x20;
3535

36+
pageLayout1.setSiderCollapsed() method sets the siderCollapsed property of the Page Layout component. It takes True or False as an Argument. Following code collapses the Sider component on Page Layout.
37+
38+
```javascript
39+
pageLayout1.setSiderCollapsed(true);
40+
```

‎docs/build-applications/app-editor/visual-components/layout-and-navigation/step-control.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,5 +37,5 @@ Events give you the ability to trigger further actions (with Event-Handlers).
3737

3838
You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.
3939

40-
<table><thead><tr><th>Method Name</th><th width="426.51953125">Description</th></tr></thead><tbody><tr><td>setValue</td><td>Set the data of the property Value</td></tr><tr><td>clear</td><td>Clear the data of the property Value</td></tr><tr><td>reset</td><td>ReSet the data of the property Value</td></tr><tr><td>blur</td><td>When a User "clicks" outside of the Step Control component i.e, defocuses the Step Control component.</td></tr><tr><td>focus</td><td>When a User "clicks" on the Step Control component</td></tr></tbody></table>
40+
<table><thead><tr><th>Method Name</th><th width="426.51953125">Description</th></tr></thead><tbody><tr><td>setValue</td><td>Set the data of the property Value</td></tr><tr><td>clearValue</td><td>Clear the data of the property Value</td></tr><tr><td>resetValue</td><td>ReSet the data of the property Value</td></tr><tr><td>blur</td><td>When a User "clicks" outside of the Step Control component i.e, defocuses the Step Control component.</td></tr><tr><td>focus</td><td>When a User "clicks" on the Step Control component</td></tr></tbody></table>
4141

‎docs/build-applications/app-editor/visual-components/layout-and-navigation/tabbed-container.md

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,5 +40,26 @@ Events give you the ability to trigger further actions (with Event-Handlers).
4040

4141
You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilised. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.
4242

43-
<table><thead><tr><th width="177.9296875">Method Name</th><th width="485.80078125">Description</th></tr></thead><tbody><tr><td>setKey</td><td>Set the data/value of the property selectedTabKey</td></tr><tr><td>clearKey</td><td>Clear the data/value of the property selectedTabKey</td></tr><tr><td>resetKey</td><td>Clear the data/value of the property selectedTabKey</td></tr></tbody></table>
43+
**setKey() :**&#x20;
4444

45+
tabbedContainer1.setKey() method sets the tabbedContainer's SelectedTabKey property. It takes the value of the Tabs present in the Tabbed Container component. Following method selects the Tab with the Tab Value = 2.
46+
47+
```javascript
48+
tabbedContainer1.setKey(2);
49+
```
50+
51+
**clearKey() :**&#x20;
52+
53+
tabbedContainer1.clearValue() clears the tabbedContainer's SelectedTabKey property, and removes the current value of SelectedTabKey.
54+
55+
```javascript
56+
tabbedContainer1.clearKey();
57+
```
58+
59+
**resetKey() :**&#x20;
60+
61+
tabbedContainer1.resetKey() method resets the tabbedContainer's SelectedTabKey property to the default value of the Tabbed Container component.
62+
63+
```javascript
64+
tabbedContainer1.resetKey();
65+
```

‎docs/build-applications/app-editor/visual-components/layout-and-navigation/text.md

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,5 +34,26 @@ Events give you the ability to trigger further actions (with Event-Handlers).
3434

3535
You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilised. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.
3636

37-
<table><thead><tr><th width="177.9296875">Method Name</th><th width="485.80078125">Description</th></tr></thead><tbody><tr><td>setText</td><td>Set the data/value of the property Text</td></tr><tr><td>clearText</td><td>Clear the data/value of the property Text</td></tr><tr><td>resetText</td><td>Clear the data/value of the property Text</td></tr></tbody></table>
37+
**setText() :**&#x20;
3838

39+
text1.setText() method sets the Text component's text property. It takes a String argument
40+
41+
```javascript
42+
text1.setText("Text component's Text");
43+
```
44+
45+
**clearText() :**&#x20;
46+
47+
text1.clearText() clears the Text component's text property and empties the current value from the component.
48+
49+
```javascript
50+
text1.clearText();
51+
```
52+
53+
**resetText() :**&#x20;
54+
55+
text1.resetValue() method resets the Text component's text property to the default value of the component.
56+
57+
```javascript
58+
text1.resetText();
59+
```

0 commit comments

Comments
 (0)