Skip to content

Commit fce6fff

Browse files
adnanqaopsgitbook-bot
adnanqaops
authored and
gitbook-bot
committed
GITBOOK-200: Method's documentation for multiple Components
1 parent 522beb1 commit fce6fff

File tree

7 files changed

+286
-17
lines changed

7 files changed

+286
-17
lines changed

‎docs/build-applications/app-editor/visual-components/calendar-and-scheduling/calendar.md

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

6666
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.
6767

68-
<table><thead><tr><th width="247.83984375">Method Name</th><th width="446.3984375">Description</th></tr></thead><tbody><tr><td>clearDeletedEvents</td><td>Clears the data in the property toDeletedEvent</td></tr><tr><td>clearInsertedEvents</td><td>Clears the data in the property toInsertedEvent</td></tr><tr><td>clearUpdatedEvents</td><td>Clears the data in the property toUpdatedEvent</td></tr><tr><td>setResources</td><td>Set the data for the property Resources</td></tr><tr><td>clearResources</td><td>Clear the data for the property Resources</td></tr><tr><td>resetResources</td><td>Reset the data for the property Resources</td></tr><tr><td>setDayGridDayView</td><td>Switches the Calendar view to 'Day Grid Day', displaying a Single day in a grid layout that includes all events for that day.</td></tr><tr><td>setDayGridWeeklyView</td><td>Switches the Calendar view to 'Day Grid Week', where the days of the week are displayed as Columns and Events are laid out in Grid form.</td></tr><tr><td>setDayGridMonthlyView</td><td>Switches the Calendar view to 'Day Grid Month', presenting the entire month in a grid with events displayed on their respective days.</td></tr><tr><td>setListWeekView</td><td>Switches the Calendar view to 'List Week', which provides a list-style overview of all the events happening throughout the week.</td></tr><tr><td>setMultiMonthYearView</td><td>Switches the Calendar view to 'Multi Month Year', showing multiple months at once, allowing for long-term planning and overview.</td></tr><tr><td>setResourceTimeGridDayView</td><td>Switches the Calendar view to 'Resource Time Grid Day', which displays resources along the vertical axis and the hours of the Single day along the horizontal axis.</td></tr><tr><td>setResourceTimelineDayView</td><td>Switches the Calendar view to 'Resource Timeline Day', showing Events against a timeline for a Single day, segmented by Resources.</td></tr><tr><td>setTimeGridDayView</td><td>Switches the Calendar view to 'Time Grid Day', which shows a detailed hourly schedule for a Single day.</td></tr><tr><td>setTimeGridWeekView</td><td>Switches the Calendar view to 'Day Grid Week', where the days of the week are displayed as Columns and Events are laid out in Grid form.</td></tr></tbody></table>
68+
**setResources() :**&#x20;
6969

70+
calendar1.setResources() method sets the Calendar's Resources property. This method takes an Array of Object/s as an argument.
71+
72+
```javascript
73+
calendar1.setResources(
74+
[
75+
{
76+
"id": "1",
77+
"title": "South Auditorium"
78+
},
79+
{
80+
"id": "2",
81+
"title": "West Auditorium",
82+
"eventColor": "gree"
83+
},
84+
{
85+
"id": "3",
86+
"title": "HQ Auditorium",
87+
"children": [
88+
{
89+
"id": "r1",
90+
"title": "Room 1"
91+
},
92+
{
93+
"id": "r2",
94+
"title": "Room 2"
95+
}
96+
]
97+
}
98+
]);
99+
```
100+
101+
**clearResources() :**&#x20;
102+
103+
calendar1.clearResources() method clears the Calendar's Resources property, and removes all the Resources.
104+
105+
```javascript
106+
calendar1.clearResources();
107+
```
108+
109+
**resetResources() :**&#x20;
110+
111+
calendar1.resetResources() method resets the Calendar's Resources property to the default data.
112+
113+
```javascript
114+
calendar1.clearResources();
115+
```
116+
117+
**clearInsertedEvents() :**&#x20;
118+
119+
calendar1.clearInsertedEvents() method clears any newly inserted event on the Calendar component. It clears the value of the **toInsertedEvents** property.
120+
121+
```javascript
122+
calendar1.clearInsertedEvents();
123+
```
124+
125+
**clearUpdatedEvents() :**&#x20;
126+
127+
calendar1.clearUpdatedEvents() method clears any updated details on the event of the Calendar component. It clears the value of the **toUpdatedEvents** property.
128+
129+
```javascript
130+
calendar1.clearUpdatedEvents();
131+
```
132+
133+
**clearDeletedEvents() :**
134+
135+
calendar1.clearDeletedEvents() method clears any deleted event from the Calendar component. It clears the value of the **toDeletedEvents** property.
136+
137+
```javascript
138+
calendar1.clearDeletedEvents();
139+
```
140+
141+
**setDayGridDayView() :**&#x20;
142+
143+
calendar1.setDayGridDayView() method sets the Calendar view where list of the current Day's Events is shown. It switches the Calendar view to 'Day Grid Day', displaying a Single day in a grid layout that includes all events for that day.
144+
145+
```javascript
146+
calendar1.setDayGridDayView();
147+
```
148+
149+
**setDayGridMonthView() :**
150+
151+
calendar1.setDayGridMonthView() method sets the Calendar view where current Month is shown. It switches the Calendar view to 'Day Grid Month', presenting the entire month in a grid with events displayed on their respective days.
152+
153+
```javascript
154+
calendar1.setDayGridMonthView();
155+
```
156+
157+
**setDayGridWeekView() :**
158+
159+
calendar1.setDayGridWeekView() method sets the Calendar view where list of the current Week's Events is shown. It switches the Calendar view to 'Day Grid Week', where the days of the week are displayed as Columns and Events are laid out in Grid form.
160+
161+
```javascript
162+
calendar1.setDayGridWeekView();
163+
```
164+
165+
**setListWeekView() :**
166+
167+
calendar1.setListWeekView() method sets the Calendar view where only those days of the Week are shown which have some Events. It switches the Calendar view to 'List Week', which provides a list-style overview of all the events happening throughout the week.
168+
169+
```javascript
170+
calendar1.setListWeekView();
171+
```
172+
173+
**setMultiMonthYearView() :**&#x20;
174+
175+
calendar1.setMultiMonthYearView() method sets the Calendar view where Full current year is shown on the Calendar component with all the 12 months. It switches the Calendar view to 'Multi Month Year', showing multiple months at once, allowing for long-term planning and overview.
176+
177+
```javascript
178+
calendar1.setMultiMonthYearView();
179+
```
180+
181+
**setTimeGridDayView() :**
182+
183+
calendar1.setTimeGridDayView() method sets the Calendar view where current Day is shown with full 24 hours timeline. It switches the Calendar view to 'Time Grid Day', which shows a detailed hourly schedule for a Single day.
184+
185+
```javascript
186+
calendar1.setTimeGridDayView();
187+
```
188+
189+
**setTimeGridWeekView() :**
190+
191+
calendar1.setTimeGridWeekView() method sets the Calendar view where current Week is shown with full 7 days and 24 hours timeline. It switches the Calendar view to 'Day Grid Week', where the days of the week are displayed as Columns and Events are laid out in Grid form.
192+
193+
```javascript
194+
calendar1.setTimeGridWeekView();
195+
```
196+
197+
**setResourceTimeGridDayView() :**
198+
199+
calendar1.setResourceTimeGridDayView() is yet to be implemented. It switches the Calendar view to 'Resource Time Grid Day', which displays resources along the vertical axis and the hours of the Single day along the horizontal axis.
200+
201+
```javascript
202+
calendar1.setResourceTimeGridDayView();
203+
```
204+
205+
**setResourceTimelineDayView() :**
206+
207+
calendar1.setResourceTimelineDayView() is yet to be implemented. It switches the Calendar view to 'Resource Timeline Day', showing Events against a timeline for a Single day, segmented by Resources.
208+
209+
```javascript
210+
calendar1.setResourceTimelineDayView();
211+
```

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,3 +142,41 @@ To display only the Map and use the JavaScript API, "Map Embed API" and "Maps Ja
142142
Now you can create and see your Google Maps API Key. It is suggested that you limit the Traffic by a Domain or IP Range.
143143

144144
<figure><img src="../../../../.gitbook/assets/Google Maps APIs API Key.png" alt=""><figcaption></figcaption></figure>
145+
146+
#### Properties of the Google Map <a href="#properties-of-the-table" id="properties-of-the-table"></a>
147+
148+
These properties are accessible in \{{ \}} notations, as well as in JavaScript Queries.
149+
150+
<table><thead><tr><th width="176.38671875">Property Name</th><th width="114.9921875">Type</th><th>Description</th></tr></thead><tbody><tr><td>data</td><td>Array</td><td>Returns an Array containing the data fed to the chartsGeooMap component</td></tr><tr><td>lastInteractionData</td><td>Object</td><td>Returns an Object containing the details about the Location point, which a User interacted most lately </td></tr><tr><td>selectedPoints</td><td>Array</td><td></td></tr><tr><td>title</td><td>String</td><td>Returns title of the Chart</td></tr></tbody></table>
151+
152+
#### Events <a href="#events" id="events"></a>
153+
154+
Events give you the ability to trigger further actions (with Event-Handlers).
155+
156+
<table><thead><tr><th width="201.359375">Event Name</th><th width="495.39453125">Description</th></tr></thead><tbody><tr><td>MapReady</td><td>MapReady event gets triggered when Map is completley loaded, and is ready for the User interaction.</td></tr><tr><td>Zoom Level Change</td><td>This event gets triggered when Zoom level of the Map is changed.</td></tr><tr><td>Center Position Change</td><td>This event gets triggered when Map is dragged and it's center position changes OR when default lat, lon are changed.</td></tr></tbody></table>
157+
158+
#### Methods <a href="#methods" id="methods"></a>
159+
160+
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.
161+
162+
**getMapCenterPosition() :**&#x20;
163+
164+
chartsGeoMap1.getMapCenterPosition() method returns an object that contains the center position of the Geo Map i.e, lat, long.
165+
166+
```javascript
167+
chartsGeoMap1.getMapCenterPosition();
168+
```
169+
170+
**getMapInstance() :**&#x20;
171+
172+
```javascript
173+
chartsGeoMap1.getMapInstance();
174+
```
175+
176+
**getMapZoomLevel() :**&#x20;
177+
178+
chartsGeoMap1.getMapZoomLevel() method returns the current Zoom level on the Geo Map.
179+
180+
```javascript
181+
chartsGeoMap1.getMapZoomLevel();
182+
```

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

Lines changed: 72 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,82 @@ Events give you the ability to trigger further actions (with Event-Handlers).
4545

4646
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.
4747

48-
<table><thead><tr><th width="172.3359375">Method Name</th><th width="479.24609375">Description</th></tr></thead><tbody><tr><td>setValue</td><td>Set the data/value of the Value property</td></tr><tr><td>setDefaultValue</td><td>Set the data/value of the Default Value property</td></tr><tr><td>setRangeText</td><td>Set the minimum and maximum length of the characters in input type component</td></tr><tr><td>setSelectionRange</td><td>Set the data/value of the Selection Range property</td></tr><tr><td>select</td><td>Set the Text type of the Input type component</td></tr><tr><td>clearValue</td><td>Clear the data/value of the Value property</td></tr><tr><td>clearDefaultValue</td><td>Clear the data/value of the Default Value property</td></tr><tr><td>resetDefaultValue</td><td>Reset the data/value of the Default Value property</td></tr><tr><td>resetValue</td><td>Reset the data/value of the Value property</td></tr><tr><td>click</td><td>Set what happens on Click event on the Input type component</td></tr></tbody></table>
48+
**setValue() :**&#x20;
4949

50+
input1.setValue() method sets the Input's Value property, which gets shown in the Input component.
5051

52+
```javascript
53+
input1.setValue("John Nick");
54+
```
5155

56+
**clearValue() :**&#x20;
5257

58+
input1.clearValue() clears the Input's Value property and empties the value from the Input component.
5359

60+
```javascript
61+
input1.clearValue();
62+
```
5463

64+
**resetValue() :**&#x20;
5565

66+
input1.resetValue() method resets the Input's value property to the default value of the Input component.
67+
68+
```javascript
69+
input1.resetValue();
70+
```
71+
72+
**setDefaultValue() :**&#x20;
73+
74+
input1.setDefaultValue() method sets the Input's Default value, which gets shown in the Input component as default.
75+
76+
```javascript
77+
input1.setDefaultValue("John Nick");
78+
```
79+
80+
**clearDefaultValue() :**&#x20;
81+
82+
input1.clearDefaultValue() clears the Input's Default value and empties the value from the Input component.
83+
84+
```javascript
85+
input1.clearDefaultValue();
86+
```
87+
88+
**resetDefaultValue() :**&#x20;
89+
90+
input1.resetDefaultValue() method resets the Input's Default value to the default value of the Input component.
91+
92+
```javascript
93+
input1.resetDefaultValue();
94+
```
95+
96+
**setRangeText() :**&#x20;
97+
98+
input1.setRangeText() method sets the minimum and maximum value of the inout component. Value of the Input component should lie between the minimum and maximum limits.
99+
100+
```javascript
101+
input1.setRangeText(3,6);
102+
```
103+
104+
**setSelectionRange() :**&#x20;
105+
106+
input1.setSelectionRange() sets the Selection Range of the Input component.
107+
108+
```javascript
109+
input1.setSelectionRange();
110+
```
111+
112+
**click() :**&#x20;
113+
114+
input1.click() method sets what happens when User clicks on the Input component.
115+
116+
```javascript
117+
input1.click();
118+
```
119+
120+
**select() :**&#x20;
121+
122+
input1.select() method selects the text type of the Input component.
123+
124+
```javascript
125+
input1.select();
126+
```

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

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,30 @@ 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>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>
44+
**setData() :**&#x20;
45+
46+
jsonSchemaForm1.setData() method sets the json Schema Form's data property, which fills up all the components that are present/added into the json Schema Form component. This method takes Object as an argument. For example, for a json Schema Form having an input field, a number input field and a Date component, following code will set the Data of the json Schema Form component.
47+
48+
```javascript
49+
jsonSchemaForm1.setData({
50+
name: "Alison",
51+
phone: "+44 20 7123 4567",
52+
birthday: "1999-09-09"
53+
});
54+
```
55+
56+
**clearData() :**&#x20;
57+
58+
jsonSchemaForm1.clearData() clears the json Schema Form's Data property and empties the values from the json Schema Form component.
59+
60+
```javascript
61+
jsonSchemaForm1.clearData();
62+
```
63+
64+
**resetData() :**&#x20;
65+
66+
jsonSchemaForm1.resetData() method resets the json Schema Form's Data property to the default data of the json Schema Form component.
67+
68+
```javascript
69+
jsonSchemaForm1.resetData();
70+
```

‎docs/build-applications/app-editor/visual-components/document-and-file-management/file-upload.md

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,6 @@ You can input an array of strings to restrict the types of the files to be uploa
1818

1919
For example, when the value of file type is `[".pdf", ".mp4", "image/*"]`, you can upload PDF files, MP4 files, and any type of image files.
2020

21-
22-
2321
### Upload type
2422

2523
You can decide whether to upload a single file, multiple files, or a directory.
@@ -123,5 +121,10 @@ Events give you the ability to trigger further actions (with Event-Handlers)
123121

124122
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
125123

126-
<table><thead><tr><th>Method Name</th><th width="414.25">Description</th></tr></thead><tbody><tr><td>clearValue</td><td>Clears all the currently uploaded files. It deletes all the uploaded files.</td></tr></tbody></table>
124+
**clearValue() :**&#x20;
127125

126+
file1.clearValue() clears the File component's value property and removes the uploaded file from the File component.
127+
128+
```javascript
129+
file1.clearValue();
130+
```

‎docs/build-applications/app-editor/visual-components/multimedia-and-animation/image.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,6 @@ Events give you the ability to trigger further actions (with Event-Handlers).
6060

6161
<table><thead><tr><th width="152.5625">Event Name</th><th width="495.39453125">Description</th></tr></thead><tbody><tr><td>Click</td><td>Triggers when a User "clicks" on the Image</td></tr></tbody></table>
6262

63-
#### Methods <a href="#methods" id="methods"></a>
64-
6563
## Insert/Retrieve an Image into/from Database
6664

6765
{% embed url="https://demos.lowcoder.cloud/demo/clzilkh8x1ozt9x77uabp0vfa" %}

‎docs/connect-your-data/data-source-basics/configure-ip-allowlists.md

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,3 @@ If your data source has firewall rules, it is vital to add IP addresses of Lowco
55
## Allow IP addresses of Lowcoder
66

77
Add the following IP addresses to your data source allowlist when needed:
8-
9-
```
10-
38.88.150.174
11-
38.88.150.173
12-
208.115.226.38
13-
208.115.226.34
14-
157.20.173.174
15-
157.20.173.173
16-
```

0 commit comments

Comments
 (0)