@@ -13,30 +17,115 @@ Datasources pull in and push data to any source including databases, external AP
-## Connecting datasources
+## Connecting global datasources
-1. After logging in to ToolJet, create a new app from the dashboard
+1. From the ToolJet dashboard, go to the **global datasources page** from the left sidebar.
+
-2. There are two ways for connecting a datasource. You can connect from:
- 1. **Left-sidebar**: On the left sidebar, click on the `datasource` icon and then click on the `+ add datasource` button
+
-
+
-
+2. Click on the **Add new datasource** button, a modal will pop-up with all the available global datasources.
+
-
+
- 2. **Query Panel**: Go to the query panel at the bottom, click on the `+Add` button and then click `Add datasource` button
+
-
+3. Select the datasource, enter the **Credentials** and **Save** the datasource.
+
-
+
-
+
-3. Follow the steps in the **[Datasource Library](/docs/data-sources/airtable)** specific to the desired datasource
+4. Now, go back to the dashboard, create a new app, and the datasource will be available on the query panel under **Global Datasources**. Added datasources will be available on any of the **existing** or the **new applications**.
+
+
+
+
+
+
+5. You can now create queries of the connected global datasource. From the queries, you'll be able to switch to **different connections** of the same datasource if there are more than one connections created.
+
+
+
+
+
+
+## Changing scope of datasources of an app created on older versions of ToolJet
+
+On ToolJet versions below 2.3.0, the datasource connection was made from within the individual apps. To make it backward compatible, we added an option to change the scope of the datasources and make it global datasource.
+
+1. If you open an app created on previos versions of ToolJet, you'll find the datasource manager on the left sidebar of the App Builder.
+
+
+
+
+
+
+2. Click on the kebab menu next to the connected datasource, select the **change scope** option.
+
+
+
+
+
+
+3. Once you change the scope of the datasource and make it global, you'll see that the **datasource manager** is removed from the left sidebar and now you'll find the datasource on the **query panel** under Global Datasources. You can now configure the datasource fromt the Global Datasource page on the **dashboard**.
+
+
+
+
+
+
+
+## Default datasources
+
+By default, 4 datasources will be available on every app on ToolJet:
+- **[ToolJet Database](/docs/tooljet-database/)**
+- **[RestAPI](/docs/data-sources/restapi/)**
+- **[Run JavaScript Query](/docs/data-sources/run-js/)**
+- **[Run Python Query](/docs/data-sources/run-py/)**
+
+
+
+
+
+
+
+## Permissions
+
+Only **Admins** and **[Super Admins](/docs/Enterprise/superadmin)** of the workspace can change the **[Permissions](/docs/tutorial/manage-users-groups#group-properties)** for Global Datasource.
+
+From **Workspace Settings** -> **Groups Settings**, Admins and Super Admins can set the permission for a user group to:
+
+- **Create** and **Delete** datasources onto that workspace. If **Create** permission is enabled then the users can add new global datasources and **edit** the datasources as well but cannot **delete** it, and if only **Delete** permission is set then the users of the group will only be able to delete the connected datasources on the workspace.
+
+
+
+
+
+
+ - If any of the permission(Create or Delete) is not enabled for a user group then the users of the group will get an error toast when they try to Add or Delete the global datasource.
+
+
+
+
+
+
+- **View** or **Edit** allowed global datasources from the **Datasources** tab. If only **View** permission is set then the users of the group will only be able to connect to the allowed datasource, and if only **Edit** permission is set then the users of the group will be able to update the credentials of the allowed datasources.
+
+
+
+
+
+
+ - If any of the permission(View or Edit) is not enabled for a user group then the users of the group will get an error toast when they try to Add or Delete the global datasource.
+
+
+
+
+
-:::info
-ToolJet allows you to transform the data returned by datasources using **[Transformations](/docs/tutorial/transformations)**
-:::
diff --git a/docs/docs/data-sources/smtp.md b/docs/docs/data-sources/smtp.md
index 120f2b1d08..9f09a14ac4 100644
--- a/docs/docs/data-sources/smtp.md
+++ b/docs/docs/data-sources/smtp.md
@@ -5,18 +5,24 @@ title: SMTP
# SMTP
-SMTP plugin can connect ToolJet applications to **SMTP servers** for sending emails.
+The SMTP datasource facilitates the connection between ToolJet applications and email servers, enabling the apps to send emails.
## Connection
-A SMTP server can be connected with the following credentails:
-- **Host**
-- **Port**
-- **User**
+To connect to an SMTP server, the following credentials are typically required:
+
+- **Host**
+- **Port**
+- **Username**
- **Password**
-:::info
-You can also test your connection before saving the configuration by clicking on `Test Connection` button.
+:::tip Finding configuration details:
+The SMTP configuration details like host and port can usually be obtained from your email service provider. Here are some general settings for the most commonly used email providers:
+- **Gmail**: `Host`: smtp.gmail.com; `Port`: 587 or 465 (SSL); `Username`: your full Gmail email address; `Password`: your Gmail password.
+- **Yahoo Mail**: `Host`: smtp.mail.yahoo.com; `Port`: 465 (SSL); `Username`: your Yahoo Mail email address; `Password`: your Yahoo Mail password.
+- **Outlook.com/Hotmail**: `Host`: smtp.office365.com; `Port`: 587 or 465 (SSL); `Username`: your Outlook.com/Hotmail email address; `Password`: your Outlook.com/Hotmail password.
+
+Before saving the configuration, it's possible to test the connection by clicking the "Test Connection" button.
:::
@@ -27,22 +33,25 @@ You can also test your connection before saving the configuration by clicking on
## Querying SMTP
-Go to the query manager at the bottom panel of the editor and click on the `+` button on the left to create a new query. Select `SMTP` from the datasource dropdown.
+To create a query for sending an email, follow these steps:
-To create a query for sending email, you will need to provide the following properties:
- - **From** `required` : Email address of the sender
- - **From Name** : Name of the sender
- - **To** `required` : Recipient's email address
- - **Subject** : Subject of the email
+1. Open the query panel located at the bottom panel of the editor.
+2. Click the `+Add` button on the left to create a new query.
+3. Select `SMTP` from the global datasource.
+4. Provide the following properties:
+ - **From** `required` : Email address of the sender
+ - **From Name** : Name of the sender
+ - **To** `required` : Recipient's email address
+ - **CC mail to** : Email address of the recipients that will receive a copy of the email, and their email addresses will be visible to other recipients.
+ - **BCC mail to** : Email address of the recipients that will receive a copy of the email but the email addressed will be hidden to other recipients.
+ - **Subject** : Subject of the email.
+ - **Body** : You can enter the body text of the email in either raw text or html format, in their respective fields.
+ - **Attachments** : You can add attachments to an SMTP query by referencing the file from the File Picker component in the attachments field.
+For instance, you can set the `Attachments` field value to `{{ components.filepicker1.file }}` or pass an array of `{{ name: 'filename.jpg', dataURL: '......' }}` objects to include attachments.
-
+
+
- - **Body** : You can enter the body text either in the form of `raw text` or `html` in their respective fields.
- - **Attachments** : Attachments can be added to a SMTP query by referencing the file from the `File Picker` component in the attachments field.
-
- For example, you can set the `Attachments` field value to `{{ components.filepicker1.file }}` or you can pass an array of `{{ name: 'filename.jpg', dataURL: '......' }}` object to accomplish this.
-
-
-
+
\ No newline at end of file
diff --git a/docs/docs/getting-started.md b/docs/docs/getting-started.md
index 3d944f62c9..4e83aaca55 100644
--- a/docs/docs/getting-started.md
+++ b/docs/docs/getting-started.md
@@ -107,7 +107,7 @@ Learn more about the **[ToolJet Database here](/docs/tooljet-database)**
### Create a new application
-1. To create a new ToolJet application, go to the **Dashboard** -> **New App from scratch**.
+1. To create a new ToolJet application, go to the **Dashboard** -> **Create new application**.
@@ -143,7 +143,7 @@ Learn more about the **[ToolJet Database here](/docs/tooljet-database)**
:::info
-ToolJet application's User interface is constructed using Components like Tables, Forms, Charts, or Buttons etc. Check **Components Catalog** to learn more.
+ToolJet application's User interface is constructed using Components like Tables, Forms, Charts, or Buttons etc. Check **[Components Catalog](/docs/widgets/overview)** to learn more.
:::
### Build queries and bind data to UI
@@ -156,7 +156,7 @@ ToolJet application's User interface is constructed using Components like Tables
:::info
- ToolJet can connect to several databases, APIs and external services to fetch and modify data. Check **Datasource Catalog** to learn more.
+ ToolJet can connect to several databases, APIs and external services to fetch and modify data. Check **[Datasource Catalog](/docs/data-sources/overview)** to learn more.
:::
2. Choose a **Table** from the dropdown, Select the **List rows** option from the **Operation** dropdown, You can leave other query parameters. Scroll down and enable **Run this query on application load** - this will trigger the query when the app is loaded.
@@ -199,8 +199,8 @@ ToolJet application's User interface is constructed using Components like Tables
:::info
-- You can manipulate the data returned by the queries using **Transformations**
-- You can also **Run JS query** or **Python query** to perform custom behavior inside ToolJet
+- You can manipulate the data returned by the queries using **[Transformations](/docs/tutorial/transformations)**
+- You can also **[Run JavaScript code](/docs/data-sources/run-js)** or **[Run Python code](/docs/data-sources/run-py)** to perform custom behavior inside ToolJet
:::
### Preview, Release and Share app
@@ -210,7 +210,7 @@ ToolJet application's User interface is constructed using Components like Tables
3. **Share** option allows you to share the **released version** of the application with other users or you can also make the app **public** and anyone with the URL will be able to use the app.
:::tip
-You can control how much access to users have to your ToolJet apps and resources using **Org Management**.
+You can control how much access to users have to your ToolJet apps and resources using **[Org Management](/docs/tutorial/manage-users-groups)**.
:::
## What Can I Do With ToolJet
diff --git a/docs/docs/how-to/intentionally-fail-js-query.md b/docs/docs/how-to/intentionally-fail-js-query.md
new file mode 100644
index 0000000000..bc7750ec4c
--- /dev/null
+++ b/docs/docs/how-to/intentionally-fail-js-query.md
@@ -0,0 +1,23 @@
+---
+id: intentionally-fail-js-query
+title: Intentionally fail a RunJS query
+---
+
+In this how-to guide, we will create a RunJS query that will throw an error.
+
+- Create a RunJS query and paste the code below. We will use the constructor `ReferenceError` since it is used to create a range error instance.
+ ```js
+ throw new ReferenceError('This is a reference error.');
+ ```
+
+- Now, add a event handler to show an alert when the query fails. **Save** the query and **Run** it.
+
+
+
+
+
+
+
+:::info
+Most common use-case for intentionally failing a query is **debugging**.
+:::
\ No newline at end of file
diff --git a/docs/docs/how-to/use-s3-presigned-url-to-upload-docs.md b/docs/docs/how-to/use-s3-presigned-url-to-upload-docs.md
new file mode 100644
index 0000000000..61dd6448d3
--- /dev/null
+++ b/docs/docs/how-to/use-s3-presigned-url-to-upload-docs.md
@@ -0,0 +1,173 @@
+---
+id: use-s3-signed-url-to-upload-docs
+title: Use S3 signed URL to upload documents
+---
+
+# Use S3 signed URL to upload documents
+
+In this how-to guide, you'll learn to upload documents to S3 buckets using the **S3 signed URL** from a ToolJet application.
+
+For this guide, We are going to use one of the existing templates on ToolJet: **S3 File explorer**
+
+:::info using Templates
+On ToolJet Dashboard, Click on the down arrow on the right of the **New App** button, from the dropdown choose the **Choose from template** option.
+:::
+
+
+
+
+
+
+
+- Once you've created a new app using the template, you'll be prompted to create a **new version** of the existing version. After creating a new version, you'll be able to make changes in the app.
+
+
+
+
+
+
+
+- Go to the **datasource manager** on the left-sidebar, you'll find that the **AWS S3 datasource** is already added. All you need to do is update the datasource **credentials**.
+
+ :::tip
+ Check the [AWS S3 datasource reference](/docs/data-sources/s3) to learn more about connnection and choosing your preferred authentication method.
+ :::
+
+
+
+
+
+
+
+- Once the datasource is connected successfully, go to the query manager and **Run** the **getBuckets** query. The operation selected in the getBuckets query is **List Buckets** which will fetch an array of all the buckets.
+
+
+
+
+
+
+
+- Running the **getBuckets** query will load all the buckets in the dropdown in the app.
+
+
+
+
+
+
+
+- Select a **bucket** from the dropdown and click on the **Fetch files** button to list all the files from the selected bucket on the table. The **Fetch files** button has the event handler added that triggers the **s32** query, the **s32** query uses the **List objects in a bucket** operation, and the bucket field in the query gets the value dynamically from the dropdown.
+
+
+
+
+
+
+
+- Let's go to the **uploadToS3** query and update the field values:
+ - **Operation**: Signed URL for upload
+ - **Bucket**: `{{components.dropdown1.value}}` this will fetch the dynamic value from the dropdown
+ - **Key**: `{{components.filepicker1.file[0].name}}` this will get the file name from the filepickers exposed variables
+ - **Expires in:** This sets an expiration time of URL, by default its `3600` seconds (1 hour)
+ - **Content Type**: `{{components.filepicker1.file[0].type}}` this will get the file type from the filepickers exposed variables
+
+
+
+
+
+
+
+- Create two **RunJS** queries:
+ - Create a **runjs1** query and copy-paste the code below. This query gets the **base64data** from the file picker and convert the file's `base64Data` to into `BLOB`, and returns the file object.
+ ```js
+ const base64String = components.filepicker1.file[0].base64Data
+ const decodedArray = new Uint8Array(atob(base64String).split('').map(c => c.charCodeAt(0)));
+ const file = new Blob([decodedArray], { type: components.filepicker1.file[0].type });
+ const fileName = components.filepicker1.file[0].name;
+ const fileObj = new File([file], fileName);
+
+ return fileObj
+ ```
+
+
+
+
+
+
+
+ - Create another **runjs2** query and copy-paste the code below. This query gets the data(file object) returned by the first runjs query, the url returned by the **uploadToS3** query, and then makes PUT request.
+ ```js
+ const file = queries.runjs2.data
+ const url = queries.s31.data.url
+
+ fetch(url, {
+ method: 'PUT',
+ body: file,
+ mode: 'cors',
+ headers: {
+ 'Access-Control-Allow-Origin': '*',
+ 'Content-Type': 'application/json'
+ }
+ })
+ .then(response => console.log('Upload successful!'))
+ .catch(error => console.error('Error uploading file:', error));
+ ```
+ :::warning Enable Cross Origin Resource Sharing(CORS)
+ - For the file to be uploaded successfully, you will need to add the CORS policies from the **Permissions** tab of your **Bucket** settings. Here's a sample CORS:
+ ```json
+ [
+ {
+ "AllowedHeaders": [
+ "*"
+ ],
+ "AllowedMethods": [
+ "GET",
+ "PUT",
+ "POST"
+ ],
+ "AllowedOrigins": [
+ "*"
+ ],
+ "ExposeHeaders": []
+ }
+ ]
+ ```
+ :::
+
+
+
+
+
+
+
+- Go to the **uploadToS3**, scroll down and add an event handler to the **uploadToS3** query. Select the **Query Success** event, **Run Query** as the action, and **runjs1** as the query to be triggered. **Save** the query.
+
+
+
+
+
+
+- Let's go to the **runjs1** query and add the event handler to run a query on query success event, similar to how we did in the previous step. In the event handler, choose **runjs2** query. **Save** the query.
+
+
+
+
+
+
+- Now, let's go the final query **copySignedURL** that is connected to the table's action button. This query copy's the generated **Signed URL for download** onto the **clipboard**.
+
+
+
+
+
+
+- Now that we have updated all the queries, and connected them through the event handlers. We can go ahead and pick a file from the file picker. Click on the file picker, select a file and then hit the **Upload file to S3** button.
+
+
+
+
+
+
+- Once the button is clicked, the **uploadToS3** will triggered along with the **runjs1** and **runjs2** queries in sequence since we added them in the event handlers.
+
+- You can go to the table and click on the **Copy signed URL** action button on the table, this will trigger the **copySignedURL** query and will copy the URL on the clipboard. You can go to another tab and paste the URL to open the file on the browser.
+
diff --git a/docs/docs/org-management/permissions.md b/docs/docs/org-management/permissions.md
index 5e33f5cb2c..b13433e0ef 100644
--- a/docs/docs/org-management/permissions.md
+++ b/docs/docs/org-management/permissions.md
@@ -8,7 +8,7 @@ Permissions allow you to create and share resources to easily ensure what level
Admins can invite **Users** to their workspaces and assign them to the **Groups** that have Permissions to access Apps, folders, or workspace variables.
:::info
-See **[Manage Users and Groups](/docs/tutorial/manage-users-groups)** to learn how to invite users to ToolJet.
+See **[Manage Users and Groups](/docs/tutorial/manage-users-groups)** to know more about managing users and groups on your workspace.
:::
## Role-Based Access Control (RBAC) Glossary
@@ -18,4 +18,4 @@ See **[Manage Users and Groups](/docs/tutorial/manage-users-groups)** to learn h
- **All Users** - Contains all the users in your workspace. When **New Users** are invited they are added to this group by default.
- **Admins** - Contains all Admins in your workspace. Everyone added to this group will Permission to access all the ToolJet resources.
- **Apps, Folder, Workspace Variables -** Resources that Admins can set permissions on.
-- **Permissions -** Create, Update and Delete.
+- **Permissions -** Create, Update and Delete.
\ No newline at end of file
diff --git a/docs/docs/setup/env-vars.md b/docs/docs/setup/env-vars.md
index ee546a8cbb..30782c3337 100644
--- a/docs/docs/setup/env-vars.md
+++ b/docs/docs/setup/env-vars.md
@@ -295,3 +295,9 @@ If this parameter is not specified then PostgREST refuses authentication request
:::info
Please make sure that DB_URI is given in the format `postgrest://[USERNAME]:[PASSWORD]@[HOST]:[PORT]/[DATABASE]`
:::
+
+## User Session Expiry Time (Optional)
+
+| variable | description |
+| ---------------- | ----------------------------------------------- |
+| USER_SESSION_EXPIRY | This variable controls the user session expiry time. By default, the session expires after 2 days. The variable expects the value in minutes. ex: USER_SESSION_EXPIRY = 120 which is 2 hours |
\ No newline at end of file
diff --git a/docs/docs/tutorial/manage-users-groups.md b/docs/docs/tutorial/manage-users-groups.md
index 95991fd7fa..185d078f60 100644
--- a/docs/docs/tutorial/manage-users-groups.md
+++ b/docs/docs/tutorial/manage-users-groups.md
@@ -77,7 +77,7 @@ Similar to archiving a user's access, you can enable it again by clicking on **U
## Managing Groups
-On ToolJet, Admins can create groups for users added in a workspace and grant them access to particular app(s) with specific permissions. To manage groups, just go to the **Workspace Settings** from the left-sidebar of the dashboard and click on the **Groups**.
+On ToolJet, Admins and Super Admins can create groups for users added in a workspace and grant them access to particular app(s) with specific permissions. To manage groups, just go to the **Workspace Settings** from the left-sidebar of the dashboard and click on the **Groups**.
@@ -87,11 +87,16 @@ On ToolJet, Admins can create groups for users added in a workspace and grant th
### Group properties
-Every group on ToolJet has three sections:
+Every group on ToolJet has **four** sections:
+
+- [Apps](#apps)
+- [Users](#users)
+- [Permissions](#permissions)
+- [Datasources](#datasources)
#### Apps:
-Admins can add or remove any number of apps for a group of users. To add an app to a group, select an app from the dropdown and click on `Add` button next to it. You can also set app permissions such as `View` or `Edit` for the group. You can set different permissions for different apps in a group.
+Admins and Super Admins can add or remove any number of apps for a group of users. To add an app to a group, select an app from the dropdown and click on `Add` button next to it. You can also set app permissions such as `View` or `Edit` for the group. You can set different permissions for different apps in a group.
@@ -101,7 +106,7 @@ Admins can add or remove any number of apps for a group of users. To add an app
#### Users:
-Admins can add or remove any numbers of users in a group. Just select a user from the dropdown and click on `Add` button to add it to a group. To delete a user from a group, click on `Delete` button next to it.
+Admins and Super Admins can add or remove any numbers of users in a group. Just select a user from the dropdown and click on `Add` button to add it to a group. To delete a user from a group, click on `Delete` button next to it.
@@ -111,16 +116,30 @@ Admins can add or remove any numbers of users in a group. Just select a user fro
#### Permissions:
-Admins can set granular permission like creating/deleting apps or creating folder for a group of users.
+Admins and Super Admins can set granular permission for the users added in that particular group, such as:
+- **Create** and **Delete** Apps
+- **Create**, **Update**, and **Delete** Folders
+- **Create**, **Update**, and **Delete** [Workspace Variables](/docs/tutorial/workspace-variables)
+- **Create** and **Delete** [Global Datasources](/docs/widgets/overview)
-
+
+
+
+
+#### Datasources:
+
+Only Admins and Super Admins can define what datasources can be **viewed** or **edited** by the users of that group.
+
+
+
+
:::tip
-All the activities performed by any Admin or any user in a workspace is logged in `Audit logs` - including any activity related with managing users and groups.
+All the activities performed by any Admin, Super Admin or any user in a workspace is logged in [Audit logs](/docs/Enterprise/audit_logs) - including any activity related with managing users and groups.
:::
### Predefined Groups
diff --git a/docs/docs/widgets/bounded-box.md b/docs/docs/widgets/bounded-box.md
index 4a7edb33be..855f65cb40 100644
--- a/docs/docs/widgets/bounded-box.md
+++ b/docs/docs/widgets/bounded-box.md
@@ -97,4 +97,23 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+| variable | Description |
+| ----------- | ----------- |
+| annotations | This variable is an array of objects, where each object represents an annotation added to an image. The object contains the following keys: type, x, y, width, height, text, and id |
+| annotations.`type` | There are two types of annotations: Rectangle and Point |
+| annotations.`x` | coordinates on x axis |
+| annotations.`y` | coordinates on y axis |
+| annotations.`width` | width of annotation |
+| annotations.`height` | height of annotation |
+| annotations.`text` | label selected for the annotation |
+| annotations.`id` | unique id of the annotation (system generated) |
+
+The values can be accessed dynamically using `{{components.boundedbox1.annotations[0].text}}` or `{{components.boundedbox1.annotations[1].width}}`
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the bounding box component.
diff --git a/docs/docs/widgets/button-group.md b/docs/docs/widgets/button-group.md
index f415e830c7..09c5821663 100644
--- a/docs/docs/widgets/button-group.md
+++ b/docs/docs/widgets/button-group.md
@@ -92,4 +92,15 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| selected | If the "enable multiple selection" option is turned off, then the variable is an array of objects, and the first object holds the value of the selected button. However, if the "enable multiple selection" option is turned on, the variable type changes from an array to an object, and the selected button values are stored as a string within that object. The value can be accessed using `{{components.buttongroup1.selected[0]}}` or `{{components.buttongroup1.selected}}` |
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the button-group component.
diff --git a/docs/docs/widgets/button.md b/docs/docs/widgets/button.md
index dd86c3b615..0d64c4bd6e 100644
--- a/docs/docs/widgets/button.md
+++ b/docs/docs/widgets/button.md
@@ -93,4 +93,20 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+Following actions of button component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| click | You can regulate the click of a button via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.button1.click()` |
+| setText | button's text can be controlled using component specific action from any of the event handler. You can also use RunJS query to execute component specific actions: `await components.button1.setText('New Button Text')` |
+| disable | button can be disabled using the component specific action from any of the event handler. You can also use RunJS query to execute this action: `await components.button1.disable(true)` or `await components.button1.disable(false)` |
+| visibility | button's visibility can be switched using the component specific action from any of the event handler. You can also use RunJS query to execute this action: `await components.button1.disable(true)` or `await components.button1.disable(false)` |
+| loading | The loading state of the button can be set dynamically using the component specific actions from any of the event handler. You can also use this action from RunJS: `await components.button1.loading(true)` or `await components.button1.loading(false)` |
\ No newline at end of file
diff --git a/docs/docs/widgets/calendar.md b/docs/docs/widgets/calendar.md
index 454a2393da..27791aea3f 100644
--- a/docs/docs/widgets/calendar.md
+++ b/docs/docs/widgets/calendar.md
@@ -197,3 +197,16 @@ This format determines how the column header for each day in week view will be d
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| selectedEvent | This variable stores information about the event that has been chosen on the calendar component. This object comprises keys like **title**, **start**, **end**, **allDay**, and **color**, and they can be accessed dynamically through JS using the following syntax: `{{components.calendar1.selectedEvent.title}}` or `{{components.calendar1.selectedEvent.start}}` |
+| selectedSlots | The variable selectedSlots contains the values of the slots chosen on the calendar component. This object comprises keys like **slots**, **start**, **end**, **resourceId**, and **action**, and they can be accessed dynamically through JS using the following syntax: {{components.calendar1.selectedSlots.slots[0]}} or {{components.calendar1.selectedSlots.end}}. |
+| currentView | The currentView variable holds the type of view currently set on the calendar. The value updates when the user changes the view from the calendar header. Types of views supported: `month`, `week`, and `day`. The value can be accessed using `{{components.calendar1.currentView}}` |
+| currentDate | The currentDate variable holds the current date data. The date returned by the variable is in the `MM-DD-YYYY HH:mm:ss A Z` format. The value can be accessed using `{{components.calendar1.currentDate}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the calendar component.
\ No newline at end of file
diff --git a/docs/docs/widgets/chart.md b/docs/docs/widgets/chart.md
index 9760de273f..c3e67fea1e 100644
--- a/docs/docs/widgets/chart.md
+++ b/docs/docs/widgets/chart.md
@@ -387,3 +387,12 @@ Toggle on or off to control the visibility of the widget. You can programmatical
### Disable
This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/docs/widgets/checkbox.md b/docs/docs/widgets/checkbox.md
index dbdc0f0650..9e6639d508 100644
--- a/docs/docs/widgets/checkbox.md
+++ b/docs/docs/widgets/checkbox.md
@@ -101,8 +101,16 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Actions
+## Exposed Variables
-| Action | Description | Properties |
-| ----------- | ----------- | ------------------ |
-| `setChecked` | Set checkbox state. | pass status as parameter. ex: `components.checkbox1.setChecked(true)` |
\ No newline at end of file
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the boolean value `true` if the checkbox is checked and `false` if unchecked. You can access the value dynamically using JS: `{{components.checkbox1.value}}`|
+
+## Component specific actions (CSA)
+
+Following actions of checkbox component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setChecked | You can change the status of the checkbox component using component specific action from within any event handler. Additionally, you have the option to trigger it from the RunJS query: `await components.checkbox1.setChecked(true)` or `await components.checkbox1.setChecked(false)` |
\ No newline at end of file
diff --git a/docs/docs/widgets/circular-progressbar.md b/docs/docs/widgets/circular-progressbar.md
index 47064de88e..1914c9f6f8 100644
--- a/docs/docs/widgets/circular-progressbar.md
+++ b/docs/docs/widgets/circular-progressbar.md
@@ -75,4 +75,13 @@ Under the General accordion, you can set the value in the string format.
:::info
Circular progress bar widget uses [react-circular-progress](https://github.com/kevinsqi/react-circular-progressbar) package. Check the repo for further more details about properties and styles.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/docs/widgets/code-editor.md b/docs/docs/widgets/code-editor.md
index 612593221e..6434cd0e3f 100644
--- a/docs/docs/widgets/code-editor.md
+++ b/docs/docs/widgets/code-editor.md
@@ -206,4 +206,14 @@ Under the General accordion, you can set the value in the string format.
| ----------- | ----------- |
| Visibility | Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`. |
| Disable | This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
-| Border radius | Use this property to modify the border radius of the editor. The field expects only numerical value from `1` to `100`, default is `0`. |
\ No newline at end of file
+| Border radius | Use this property to modify the border radius of the editor. The field expects only numerical value from `1` to `100`, default is `0`. |
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the value whenever the user inputs anything on the code-editor . You can access the value dynamically using JS: `{{components.codeeditor1.value}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/docs/widgets/color-picker.md b/docs/docs/widgets/color-picker.md
index 36a8fc6658..2c3260315c 100644
--- a/docs/docs/widgets/color-picker.md
+++ b/docs/docs/widgets/color-picker.md
@@ -81,4 +81,20 @@ Any property having `Fx` button next to its field can be **programmatically conf
-
\ No newline at end of file
+
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| selectedColorHex | This variable gets updated with HEX color code whenever a user selects a color from the color picker. You can access the value dynamically using JS: `{{components.colorpicker1.selectedColorHex}}`|
+| selectedColorRGB | This variable gets updated with RGB color code whenever a user selects a color from the color picker. You can access the value dynamically using JS: `{{components.colorpicker1.selectedColorRGB}}`|
+| selectedColorRGBA | This variable gets updated with RGBA color code whenever a user selects a color from the color picker. You can access the value dynamically using JS: `{{components.colorpicker1.selectedColorRGBA}}`|
+
+## Component specific actions (CSA)
+
+Following actions of color picker component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setColor | Set a color on the color component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.colorpicker1.setColor('#64A07A')` |
\ No newline at end of file
diff --git a/docs/docs/widgets/container.md b/docs/docs/widgets/container.md
index fc58141f51..b2c78a4f37 100644
--- a/docs/docs/widgets/container.md
+++ b/docs/docs/widgets/container.md
@@ -8,7 +8,17 @@ Containers are used to group widgets together. You can move the desired number o
-
+
+
+
+
+## Enabling vertical scroll on container
+
+To enable the vertical scroll on the container, drag and place any component to the bottom grid of the container and the container will automatically enable the scrolling.
+
+
+
+
@@ -57,4 +67,13 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/docs/widgets/custom-component.md b/docs/docs/widgets/custom-component.md
index 385252605d..953e8dcd83 100644
--- a/docs/docs/widgets/custom-component.md
+++ b/docs/docs/widgets/custom-component.md
@@ -103,3 +103,14 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| data | This variable will hold the variables assigned inside the `code` for custom component. You can access the value dynamically using JS: `{{components.customcomponent1.data.title}}`|
+
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/docs/widgets/date-range-picker.md b/docs/docs/widgets/date-range-picker.md
index 642c97b427..0b27cf4bca 100644
--- a/docs/docs/widgets/date-range-picker.md
+++ b/docs/docs/widgets/date-range-picker.md
@@ -78,4 +78,16 @@ This property only accepts boolean values. If set to `{{true}}`, the widget will
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| endDate | This variable will hold the date of the endDate selected in the component. You can access the value dynamically using JS: `{{components.customcomponent1.data.title}}`|
+| startDate | This variable will hold the value assigned inside the `code` for custom component. You can access the value dynamically using JS: `{{components.customcomponent1.data.title}}`|
+
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/docs/widgets/datepicker.md b/docs/docs/widgets/datepicker.md
index 19001e9fb6..22f19e4955 100644
--- a/docs/docs/widgets/datepicker.md
+++ b/docs/docs/widgets/datepicker.md
@@ -106,3 +106,13 @@ Use this property to modify the border radius of the date-picker. The field expe
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+## Exposed variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable will hold the date selected on the component, the date value will be returned according to the format set in the datepicker properties. You can access the value dynamically using JS: `{{components.datepicker1.value}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/docs/widgets/divider.md b/docs/docs/widgets/divider.md
index b027ae96d2..469b6626d0 100644
--- a/docs/docs/widgets/divider.md
+++ b/docs/docs/widgets/divider.md
@@ -53,4 +53,13 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/docs/widgets/dropdown.md b/docs/docs/widgets/dropdown.md
index e4cdca4a72..9bd7ee5a9b 100644
--- a/docs/docs/widgets/dropdown.md
+++ b/docs/docs/widgets/dropdown.md
@@ -137,4 +137,10 @@ Any property having `Fx` button next to its field can be **programmatically conf
| Value | This variable holds the value of the currently selected item on the dropdown. Value can be accesed using `{{components.dropdown1.value}}` |
| searchText | This variable is initially empty and will hold the value whenever the user searches on the dropdown. searchText's value can be accesed using`{{components.dropdown1.searchText}}` |
| label | The variable label holds the label name of the dropdown. label's value can be accesed using`{{components.dropdown1.searchText}}` |
-| optionLabels | The optionLabels holds the option labels for the values of the dropdown. optionLabels can be accesed using`{{components.dropdown1.optionLabels}}` for all the option labels in the array form or `{{components.dropdown1.optionLabels[0]}}` for particular option label |
\ No newline at end of file
+| optionLabels | The optionLabels holds the option labels for the values of the dropdown. optionLabels can be accesed using`{{components.dropdown1.optionLabels}}` for all the option labels in the array form or `{{components.dropdown1.optionLabels[0]}}` for particular option label |
+
+## Component specific actions (CSA)
+
+| Actions | Description |
+| -------- | ----------- |
+| selectOption | You can set an option on the dropdown component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.dropdown1.setOption(1)` |
\ No newline at end of file
diff --git a/docs/docs/widgets/file-picker.md b/docs/docs/widgets/file-picker.md
index 6d7efd4219..7805240bb3 100644
--- a/docs/docs/widgets/file-picker.md
+++ b/docs/docs/widgets/file-picker.md
@@ -165,8 +165,14 @@ Use this property to modify the border radius of the filepicker widget. The fiel
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Actions
+## Exposed Variables
-| Action | Description | Properties |
-| ----------- | ----------- | ------------ |
-| `clearFiles()` | It will clear the selected files | None |
+| Variables | Description |
+| ----------- | ----------- |
+| file | This variable holds the array of objects where each object represents the file loaded on the file picker component. Each object has the following keys: **name**, **type**, **content**, **dataURL**, **base64Data**, **parsedData**, **filePath**. The values can be accesed using `{{components.filepicker1.file[0].base64Data}}` |
+
+## Component specific actions (CSA)
+
+| Actions | Description |
+| -------- | ----------- |
+| clearFiles() | You can clear the selected files on the filepicker component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.filepicker1.clearFiles()` |
diff --git a/docs/docs/widgets/form.md b/docs/docs/widgets/form.md
index 8d368d65fd..ba5f9e5e70 100644
--- a/docs/docs/widgets/form.md
+++ b/docs/docs/widgets/form.md
@@ -73,4 +73,21 @@ A Tooltip is often used to specify extra information about something when the us
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| data | This variable holds the data of all the components that are nested inside the form components. You can access the value dynamically using JS: `{{components.form1.data.numberinput1.value}}`|
+
+## Component specific actions (CSA)
+
+Following actions of form component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| resetForm | You can submit the form data via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.form1.resetForm()` |
+| submitForm | You can reset the form data via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await await components.form1.submitForm()` |
+
diff --git a/docs/docs/widgets/html.md b/docs/docs/widgets/html.md
index cdb523f9d7..41908bef43 100644
--- a/docs/docs/widgets/html.md
+++ b/docs/docs/widgets/html.md
@@ -70,3 +70,11 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/docs/widgets/icon.md b/docs/docs/widgets/icon.md
index 9cd9fe3bd9..fd93553088 100644
--- a/docs/docs/widgets/icon.md
+++ b/docs/docs/widgets/icon.md
@@ -62,3 +62,16 @@ Check [Action Reference](/docs/category/actions-reference) docs to get the detai
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+Following actions of the component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setVisibility | You can toggle the visibility of the icon component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.icon1.setVisibility(false)` |
+| click | You can trigger the click action on icon component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.icon1.click()` |
\ No newline at end of file
diff --git a/docs/docs/widgets/iframe.md b/docs/docs/widgets/iframe.md
index 3157b9f979..d73ac37210 100644
--- a/docs/docs/widgets/iframe.md
+++ b/docs/docs/widgets/iframe.md
@@ -64,4 +64,12 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/docs/widgets/image.md b/docs/docs/widgets/image.md
index f84ee6f9c3..33a071bb82 100644
--- a/docs/docs/widgets/image.md
+++ b/docs/docs/widgets/image.md
@@ -104,4 +104,12 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/docs/widgets/kanban-board.md b/docs/docs/widgets/kanban-board.md
index 0dbb693192..a77239b9e0 100644
--- a/docs/docs/widgets/kanban-board.md
+++ b/docs/docs/widgets/kanban-board.md
@@ -134,4 +134,15 @@ Under the General accordion, you can set the value in the string format.
| lastCardMovement | The variable `lastCardMovement` holds the properties of the card that has been recently moved from its original position. It holds the following data - `originColumnId`, `destinationColumnId`, `originCardIndex`, `destinationCardIndex` and an object `cardDetails` which includes `id`, `title`, `description` and `columnId` of the moved card. You can get the values using `{{components.kanbanboard1.lastCardMovement.cardDetails.title}}` or `{{components.kanbanboard1.lastCardMovement.destinationCardIndex}}` |
| lastSelectedCard | The variable `lastSelectedCard` holds the `id`, `title`, `columnId`, and `description` of the last selected(clicked to view) card on the kanban. You can get the values using `{{components.kanban1.lastSelectedCard.columnId}}` |
| lastUpdatedCard | The variable `lastUpdatedCard` holds the `id`, `title`, `description`, and `columnId` of the last updated card(using componenet specific action). You can get the values using `{{components.kanban1.lastUpdatedCard.columnId}}` |
-| lastCardUpdate | The variable `lastCardUpdate` holds the old an new values of the property that has been changed in the card(using componenet specific action). You can get the values using `{{components.kanban1.lastCardUpdate[0].title.oldValue}}` |
\ No newline at end of file
+| lastCardUpdate | The variable `lastCardUpdate` holds the old an new values of the property that has been changed in the card(using componenet specific action). You can get the values using `{{components.kanban1.lastCardUpdate[0].title.oldValue}}` |
+
+## Component specific actions (CSA)
+
+Following actions of kanban component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| updateCardData | Update the card data of kanban component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `components.kanban1.updateCardData('c1', {title: 'New Title'})` |
+| moveCard | Move a card from one column to other column on the kanban via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.kanban1.moveCard('card id,'column id')` ex: `await components.kanban1.moveCard('c1','r2')` |
+| addCard | Add a card onto the kanban via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.kanban1.addCard('c1', {title: 'New Title'})` |
+| deleteCard | Delete a card from the kanban via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.kanban1.deleteCard('card id')` ex: `await components.kanban1.deleteCard('c2')` |
diff --git a/docs/docs/widgets/link.md b/docs/docs/widgets/link.md
index ca20002102..fffd89239a 100644
--- a/docs/docs/widgets/link.md
+++ b/docs/docs/widgets/link.md
@@ -65,4 +65,17 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+Following actions of link component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| click | You can trigger the click action of the link component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.link1.click()` |
\ No newline at end of file
diff --git a/docs/docs/widgets/listview.md b/docs/docs/widgets/listview.md
index 41a8d42385..4ab9ddd6b0 100644
--- a/docs/docs/widgets/listview.md
+++ b/docs/docs/widgets/listview.md
@@ -137,4 +137,14 @@ Any property having `Fx` button next to its field can be **programmatically conf
Use `{{listItem.key}}` to display data on the nested widgets. Example: For displaying the images we used `{{listItem.avatar}}` where **avatar** is one of the key in the objects from the query result.
-:::
\ No newline at end of file
+:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| data | This variable holds the data loaded onto the listview component. You can access the data of each row of the listview using `{{components.listview1.data["0"].text1.text}}` |
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/docs/widgets/map.md b/docs/docs/widgets/map.md
index 2469048e68..97b8764cc8 100644
--- a/docs/docs/widgets/map.md
+++ b/docs/docs/widgets/map.md
@@ -80,8 +80,21 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Actions
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| center | This variable will hold the latitude, longitude and the google map url value. |
+| center.`lat` | This variable holds the latitude value of the marker on the map component. You can access the value dynamically using JS: `{{components.map1.center.lat}}`|
+| centere.`lng` | This variable gets updated with RGB color code whenever a user selects a color from the color picker. You can access the value dynamically using JS: `{{components.map1.center.lng}}`|
+| center.`googleMapUrl` | This variable holds the URL of the location where the center marker is placed on the map component. You can access the value dynamically using JS: `{{components.map1.center.googleMapUrl}}`|
+| markers | The markers variable will hold the value only if `add new markers` is enabled from the map properties. Each marker is an object and will have `lat` and `lng` keys. Values can be accessed dynamically using `{{components.map1.markers[1].lat}}` |
+
+## Component specific actions (CSA)
+
+Following actions of map component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setLocation | Set the marker's location on map using latitude and longitude values as parameteres via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as: `component.map1.setLocation(40.7128, -73.935242)` |
-| Action | Description | Properties |
-| ----------- | ----------- | ------------------ |
-| `setLocation` | Set map's location. | Latitude and Longitude values as parameters. ex: `component.map1.setLocation(40.7128, -73.935242)` |
\ No newline at end of file
diff --git a/docs/docs/widgets/modal.md b/docs/docs/widgets/modal.md
index eb196123ac..02f645e79e 100644
--- a/docs/docs/widgets/modal.md
+++ b/docs/docs/widgets/modal.md
@@ -98,4 +98,18 @@ Toggle on or off to display the widget in mobile view. You can programmatically
:::info
Trigger Button styles are only visible when **Use default trigger button** under Options is toggled on.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+
+## Component specific actions (CSA)
+
+Following actions of modal component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| open | Control the opening and closing of the modal componennt via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.modal1.open()` |
+| close | Control the closing of the modal componennt via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.modal1.close()` |
\ No newline at end of file
diff --git a/docs/docs/widgets/multiselect.md b/docs/docs/widgets/multiselect.md
index cdc83f7ab9..8d3f15ee9f 100644
--- a/docs/docs/widgets/multiselect.md
+++ b/docs/docs/widgets/multiselect.md
@@ -87,3 +87,21 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| values | This variable holds the values of the multiselect component in an array of objects where the objects are the options in the multiselect. You can access the value dynamically using JS: `{{components.multiselect1.values[1]}}` |
+
+## Component specific actions (CSA)
+await components.multiselect1.clearSelections()
+await components.multiselect1.deselectOption(2)
+
+Following actions of multselect component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| selectOption | Select an option on the multiselect component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.multiselect1.selectOption(3)` |
+| deselectOption | Deselect a selected option on the multiselect component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.multiselect1.deselectOption(3)` |
+| clearOptions | Clear all the selected options from the multiselect component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.multiselect1.clearSelections(2,3)` |
\ No newline at end of file
diff --git a/docs/docs/widgets/number-input.md b/docs/docs/widgets/number-input.md
index f72242234c..115a1a37d1 100644
--- a/docs/docs/widgets/number-input.md
+++ b/docs/docs/widgets/number-input.md
@@ -94,4 +94,14 @@ Change the color of the number in number-input component by entering the Hex col
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable updates whenever a user selects a number on the number input. You can access the value dynamically using JS: `{{components.numberinput1.value}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/docs/widgets/pagination.md b/docs/docs/widgets/pagination.md
index 2ee0003cc5..182e4211f2 100644
--- a/docs/docs/widgets/pagination.md
+++ b/docs/docs/widgets/pagination.md
@@ -67,3 +67,13 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| totalPages | This variable holds the value of the `Number of Pages` set from the pagination component properties. You can access the value dynamically using JS: `{{components.pagination1.totalPages}}`|
+| currentPageIndex | This variable will hold the index of the currently selected option on the pagination component. You can access the value dynamically using JS: `{{components.pagination1.currentPageIndex}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/docs/widgets/password-input.md b/docs/docs/widgets/password-input.md
index 019ec8fae3..b3ec9f6ba6 100644
--- a/docs/docs/widgets/password-input.md
+++ b/docs/docs/widgets/password-input.md
@@ -79,4 +79,14 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the value entered by the user onto the password input component. You can access the value dynamically using JS: `{{components.passwordinput1.value}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/docs/widgets/pdf.md b/docs/docs/widgets/pdf.md
index bc665697fe..6af77f190f 100644
--- a/docs/docs/widgets/pdf.md
+++ b/docs/docs/widgets/pdf.md
@@ -54,3 +54,12 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/docs/widgets/qr-scanner.md b/docs/docs/widgets/qr-scanner.md
index edab5ade23..f031728575 100644
--- a/docs/docs/widgets/qr-scanner.md
+++ b/docs/docs/widgets/qr-scanner.md
@@ -69,3 +69,7 @@ Toggle on or off to control the visibility of the widget. You can programmatical
### Disable
This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/docs/widgets/radio-button.md b/docs/docs/widgets/radio-button.md
index 9de2d08c16..26c3c5c725 100644
--- a/docs/docs/widgets/radio-button.md
+++ b/docs/docs/widgets/radio-button.md
@@ -94,8 +94,14 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
-## Actions
+## Exposed variables
-| Action | Description | Properties |
-| ----------- | ----------- | ------------------ |
-| selectOption | Select an option from the radio buttons. | `option` eg: `component.radiobutton1.selectOption('one')` |
\ No newline at end of file
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+Following actions of color picker component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| selectOption | Select an option from the radio buttons via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as: `await components.radiobutton1.selectOption('one')` |
\ No newline at end of file
diff --git a/docs/docs/widgets/range-slider.md b/docs/docs/widgets/range-slider.md
index 5c58220496..604d9ee204 100644
--- a/docs/docs/widgets/range-slider.md
+++ b/docs/docs/widgets/range-slider.md
@@ -74,3 +74,13 @@ Set the visivlity of the slider programmatically. The default value is `{{true}}
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds an object when `two handles` option is disabled or an array when `two handles` is enabled from the component properties. The value can be accessed dynamically using JS: `{{components.rangeslider1.value}}` or `{{components.rangeslider1.value[1]}}` |
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/docs/widgets/rich-text-editor.md b/docs/docs/widgets/rich-text-editor.md
index 2267259807..7c5ba592d7 100644
--- a/docs/docs/widgets/rich-text-editor.md
+++ b/docs/docs/widgets/rich-text-editor.md
@@ -54,3 +54,13 @@ Toggle on or off to control the visibility of the widget. You can programmatical
### Disable
This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the value whenever a user enters a value in the rich text editor component. You can access the value dynamically using JS: `{{components.richtexteditor1.value}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/docs/widgets/spinner.md b/docs/docs/widgets/spinner.md
index 8557673342..7869b13be0 100644
--- a/docs/docs/widgets/spinner.md
+++ b/docs/docs/widgets/spinner.md
@@ -46,4 +46,12 @@ Change the color of the Spinner by entering the `Hex color code` or choosing a c
### Size
-Change the size of the Spinner by selecting options from the dropdown. It has small and large sizes available.
\ No newline at end of file
+Change the size of the Spinner by selecting options from the dropdown. It has small and large sizes available.
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/docs/widgets/star-rating.md b/docs/docs/widgets/star-rating.md
index d204438589..3b5d2cfe9e 100644
--- a/docs/docs/widgets/star-rating.md
+++ b/docs/docs/widgets/star-rating.md
@@ -83,3 +83,13 @@ Toggle on or off to control the visibility of the widget. You can programmatical
### Disable
This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the value whenever a rating is added on the component. The variable holds a numerical value. You can access the value dynamically using JS: `{{components.colorpicker1.selectedColorHex}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/docs/widgets/statistics.md b/docs/docs/widgets/statistics.md
index b2fa668f13..62cd3f8e2b 100644
--- a/docs/docs/widgets/statistics.md
+++ b/docs/docs/widgets/statistics.md
@@ -91,3 +91,11 @@ Toggle on or off to control the visibility of the widget. You can programmatical
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/docs/widgets/steps.md b/docs/docs/widgets/steps.md
index 5c486e0ecb..bdd757dce9 100644
--- a/docs/docs/widgets/steps.md
+++ b/docs/docs/widgets/steps.md
@@ -89,4 +89,15 @@ Toggle on or off to control the visibility of the widget. You can programmatical
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| currentStepId | This variable holds the id of the currently selected step on the step component. You can access the value dynamically using JS: `{{components.steps1.currentStepId}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/docs/widgets/svg-image.md b/docs/docs/widgets/svg-image.md
index 76500c1eb8..b3a7a5ac7f 100644
--- a/docs/docs/widgets/svg-image.md
+++ b/docs/docs/widgets/svg-image.md
@@ -56,4 +56,12 @@ Toggle on or off to display the widget in mobile view. You can programmatically
### Visibility
-Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`.
\ No newline at end of file
+Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`.
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/docs/widgets/table.md b/docs/docs/widgets/table.md
index 15b05f6fbd..cd2b9ccae6 100644
--- a/docs/docs/widgets/table.md
+++ b/docs/docs/widgets/table.md
@@ -8,11 +8,64 @@ Tables can be used for both displaying and editing data.
+## Table UI
+
+
+
+
+
+
+
+### Search
+
+At the top-left corner of the table component, there is a search box that allows users to input keywords and search for rows within the table data. You can also **[show/hide the search box](/docs/widgets/table#show-search-box)** from the table from the table properties.
+
+### Add new row
+
+When users click on this button, a popup modal appears which enables them to insert new rows. The modal will have a single row initially, and the columns will have the same column type as those on the table. If the user inputs data into the row, it will be stored on the **[`newRows` variable](/docs/widgets/table#exposed-variables)** of the table. If the user selects the **Discard** button, the data in the variable will be cleared. However, if the user closes the popup without taking any action (neither Save nor Discard), the data will still be retained, and a green indicator will appear on the **Add new row** button. The table has an **[Add new rows event handler](/docs//widgets/table#add-new-rows)** that can be utilized to execute queries that store the data into the datasource whenever the **Save** button is clicked.
+
+:::info
+At present, it is not possible to include columns of type Image when adding a new row to the table.
+:::
+
+### Filters
+
+The table data can be filtered by clicking on this button. You have the option to choose from various filters, such as:
+
+- **contains**
+- **does not contain**
+- **matches**
+- **does not match**
+- **equals**
+- **does not equal**
+- **is empty**
+- **is not empty**
+- **greater than**
+- **greater than or equal to**
+- **less than**
+- **less than or equal to**
+
+You have the option to **[hide the filter button](/docs/widgets/table#show-filter-button)** in the table properties.
+
+### Download
+
+The table data can be downloaded in various file formats, including:
+
+- **CSV**
+- **Excel**
+- **PDF**
+
+You have the option to **[hide the download button](/docs/widgets/table#show-download-button)** in the table properties.
+
+### Column selector button
+
+You can choose which columns to display or hide in the table by clicking on this button. You also have the option to **[hide the column selector button](/docs/widgets/table#show-column-selector-button)** in the table properties.
+
## Table data
-
+
@@ -197,28 +250,15 @@ If server-side search is enabled, `on search` event is fired after the content o
### Show download button
-Show or hide download button at the Table footer.
+The download button in the table header is visible by default. You can choose to hide it by disabling this option. You can dynamically set the value to {{true}} or {{false}} to show or hide the download button by clicking on the **Fx** button.
-### Hide/Show columns
+### Show column selector button
-Table header has an option(Eye icon) to show/hide one or many columns on the table.
+The column selector button on the table header is visible by default. You can choose to hide it by disabling this option. You can dynamically set the value to {{true}} or {{false}} to show or hide the column selector button by clicking on the **Fx** button.
### Show filter button
-Show or hide filter button at the Table header. The following filters are available:
-- **contains**
-- **does not contain**
-- **matches**
-- **does not match**
-- **equals**
-- **does not equal to**
-- **is empty**
-- **is not empty**
-- **greater than**
-- **greater than or equal to**
-- **less than**
-- **less than or equal to**
-
+The filter button in the table header is visible by default. You can choose to hide it by disabling this option. You can dynamically set the value to {{true}} or {{false}} to show or hide the filter button by clicking on the **Fx** button.
### Show update buttons
@@ -263,6 +303,7 @@ Loading state shows a loading skeleton for the table. This property can be used
- **[Sort applied](#sort-applied)**
- **[Cell value changed](#cell-value-changed)**
- **[Filter changed](#filter-changed)**
+- **[Add new rows](#add-new-rows)**
### Row hovered
@@ -300,6 +341,10 @@ If any cell of the table is edited, the `cell value changed` event is triggered.
This event is triggered when filter is added, removed, or updated from the filter section of the table. `filters` property of the table is updated to reflect the status of filters applied. The objects will have properties: `condition`, `value`, and `column`.
+### Add new rows
+
+This event is triggered when the **Save** button is clicked from the **Add new row** modal on the table.
+
## Exposed variables
| variable | description |
@@ -311,6 +356,7 @@ This event is triggered when filter is added, removed, or updated from the filte
| dataUpdates | Just like changeSet but includes the data of the entire row |
| selectedRow | The data of the row that was last clicked. `selectedRow` also changes when an action button is clicked |
| searchText | The value of the search field if server-side pagination is enabled |
+| newRows| The newRows variable stores an array of objects, each containing data for a row that was added to the table using the "Add new row" button. When the user clicks either the "Save" or "Discard" button in the modal, this data is cleared.|
## Styles
@@ -327,3 +373,15 @@ This event is triggered when filter is added, removed, or updated from the filte
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+## Component specific actions (CSA)
+
+Following actions of color picker component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setPage | Set the page on the table via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.setPage(2)` |
+| selectRow | Select the row on the table using via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.selectRow('id','11')` |
+| deselectRow | Deselect the row on the table via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.deselectRow()` |
+| discardChanges | Discard the changes from the table when a cell is edited via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.discardChanges()` |
+| discardNewlyAddedRows | Discard the newly added rows from the add new row popup on the table via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.discardNewlyAddedRows()` |
\ No newline at end of file
diff --git a/docs/docs/widgets/tabs.md b/docs/docs/widgets/tabs.md
index 0bfa2a8a2a..60930903ce 100644
--- a/docs/docs/widgets/tabs.md
+++ b/docs/docs/widgets/tabs.md
@@ -113,4 +113,18 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| currentTab | This variable holds the id of the current tab selected on the tabs component. You can access the value dynamically using JS: `{{components.tabs1.currentTab}}`|
+
+## Component specific actions (CSA)
+
+Following actions of Tabs component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setTab | Set the current tab of the tabs component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.tabs1.setTab(1)` |
\ No newline at end of file
diff --git a/docs/docs/widgets/tags.md b/docs/docs/widgets/tags.md
index ea01906c69..8d86319d07 100644
--- a/docs/docs/widgets/tags.md
+++ b/docs/docs/widgets/tags.md
@@ -57,4 +57,13 @@ Toggle on or off to display the widget in mobile view. You can programmatically
### Visibility
-Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`.
\ No newline at end of file
+Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`.
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/docs/widgets/text-input.md b/docs/docs/widgets/text-input.md
index 17bf8d9003..751d5575f2 100644
--- a/docs/docs/widgets/text-input.md
+++ b/docs/docs/widgets/text-input.md
@@ -109,3 +109,23 @@ This property only accepts boolean values. If set to `{{true}}`, the widget will
:::info
Check the **component specific actions** available for this component **[here](/docs/actions/control-component)**.
:::
+
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the value whenever user a user inputs a value in the component. You can access the value dynamically using JS: `{{components.textinput1.value}}`|
+
+## Component specific actions (CSA)
+
+Following actions of text input component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setFocus | Set the focus of the cursor on the text input via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textinput1.setFocus()` |
+| setBlur | Removes the focus of the cursor on the text input via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textinput1.setBlur()` |
+| disable | disable the component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textinput1.disable(true)` |
+| visibility | Set a visibility of the text input via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textinput1.visibility(false)` |
+| setText | Set a text value on the text input component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textinput1.setText('this is input text')` |
+| clear | Clear the entered text from the text input via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textinput1.clear()` |
\ No newline at end of file
diff --git a/docs/docs/widgets/text.md b/docs/docs/widgets/text.md
index 8b526f6269..5f0bc81be9 100644
--- a/docs/docs/widgets/text.md
+++ b/docs/docs/widgets/text.md
@@ -74,4 +74,20 @@ This property only accepts boolean values. If set to `{{true}}`, the widget will
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| text | This variable gets updated with HEX color code whenever a user selects a color from the color picker. You can access the value dynamically using JS: `{{components.colorpicker1.selectedColorHex}}`|
+
+## Component specific actions (CSA)
+
+Following actions of color picker component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| visibility | Set a visibility of the text via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.text1.visibility(false)` |
+| setText | Set a text value on the text component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.text1.setText('this is a text')` |
\ No newline at end of file
diff --git a/docs/docs/widgets/textarea.md b/docs/docs/widgets/textarea.md
index 8ff2513929..e670443407 100644
--- a/docs/docs/widgets/textarea.md
+++ b/docs/docs/widgets/textarea.md
@@ -58,12 +58,20 @@ This is to control the visibility of the widget. If `{{false}}` the widget will
This property only accepts boolean values. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
-## Actions
+## Exposed Variables
-| Action | Description | Properties |
-| ----------- | ----------- | ------------------ |
-| setText | Set the text. | `text` |
-| clear | Clear the text. | |
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the value of the text area component. You can access the value dynamically using JS: `{{components.textarea1.value}}`|
+
+## Component specific actions (CSA)
+
+Following actions of color picker component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setText | Set the text on the text area component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textarea1.setText('this is a text')` |
+| clear | clear the value from the text area component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.text1.clear()` |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
diff --git a/docs/docs/widgets/timeline.md b/docs/docs/widgets/timeline.md
index f2d2bdd7e2..ee6cc8b819 100644
--- a/docs/docs/widgets/timeline.md
+++ b/docs/docs/widgets/timeline.md
@@ -61,3 +61,12 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/docs/widgets/timer.md b/docs/docs/widgets/timer.md
index 18ba85b865..ec7c14a23d 100644
--- a/docs/docs/widgets/timer.md
+++ b/docs/docs/widgets/timer.md
@@ -77,4 +77,13 @@ This property only accepts boolean values. If set to `{{true}}`, the widget will
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the value of the timer in the following keys: **hour**, **minute**, **second**, and **mSecond**. You can access the value dynamically using JS: `{{components.timer1.value.second}}`|
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/docs/widgets/toggle-switch.md b/docs/docs/widgets/toggle-switch.md
index 56e2ed715d..4d11ed9ecf 100644
--- a/docs/docs/widgets/toggle-switch.md
+++ b/docs/docs/widgets/toggle-switch.md
@@ -73,4 +73,14 @@ This property only accepts boolean values. If set to `{{true}}`, the widget will
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the boolean value i.e `true` or `false` when the toggle is on or off respectively. You can access the value dynamically using JS: `{{components.toggleswitch1.value}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/docs/widgets/tree-select.md b/docs/docs/widgets/tree-select.md
index 64b72798a1..5bccb5c366 100644
--- a/docs/docs/widgets/tree-select.md
+++ b/docs/docs/widgets/tree-select.md
@@ -155,3 +155,16 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| checked | This variable holds the value of all the checked items on the tree select component. You can access the value dynamically using JS: `{{components.treeselect1.checked[1]}}`|
+| expanded | This variable holds the value of expanded items on the tree select component. You can access the value dynamically using JS: `{{components.treeselect1.expanded[0]}}`|
+| checkedPathArray | This variable holds the path of the checked items in differet arrays. You can access the value dynamically using JS: `{{components.treeselect1.checkedPathArray[1][1]}}`|
+| checkedPathStrings | This variable holds the path of the checked items in strings separated by a dash(-). You can access the value dynamically using JS: `{{components.treeselect1.checkedPathStrings[2]}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/docs/widgets/vertical-divider.md b/docs/docs/widgets/vertical-divider.md
index 8cf2894a1c..769920cd73 100644
--- a/docs/docs/widgets/vertical-divider.md
+++ b/docs/docs/widgets/vertical-divider.md
@@ -54,4 +54,12 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/sidebars.js b/docs/sidebars.js
index 7f2ae33f30..73f65d0182 100644
--- a/docs/sidebars.js
+++ b/docs/sidebars.js
@@ -303,8 +303,10 @@ const sidebars = {
'how-to/import-external-libraries-using-runpy',
'how-to/import-external-libraries-using-runjs',
'how-to/run-actions-from-runjs',
+ 'how-to/intentionally-fail-js-query',
'how-to/run-query-at-specified-intervals',
'how-to/access-users-location',
+ 'how-to/use-s3-signed-url-to-upload-docs',
'how-to/s3-custom-endpoints',
'how-to/oauth2-authorization',
'how-to/upload-files-aws',
diff --git a/docs/static/img/datasource-reference/overview/changescope.png b/docs/static/img/datasource-reference/overview/changescope.png
new file mode 100644
index 0000000000..95f0df6dbd
Binary files /dev/null and b/docs/static/img/datasource-reference/overview/changescope.png differ
diff --git a/docs/static/img/datasource-reference/overview/connection.png b/docs/static/img/datasource-reference/overview/connection.png
new file mode 100644
index 0000000000..46f77abcdb
Binary files /dev/null and b/docs/static/img/datasource-reference/overview/connection.png differ
diff --git a/docs/static/img/datasource-reference/overview/create.png b/docs/static/img/datasource-reference/overview/create.png
new file mode 100644
index 0000000000..093892dd6b
Binary files /dev/null and b/docs/static/img/datasource-reference/overview/create.png differ
diff --git a/docs/static/img/datasource-reference/overview/default.png b/docs/static/img/datasource-reference/overview/default.png
new file mode 100644
index 0000000000..bb86b2c259
Binary files /dev/null and b/docs/static/img/datasource-reference/overview/default.png differ
diff --git a/docs/static/img/datasource-reference/overview/edit.png b/docs/static/img/datasource-reference/overview/edit.png
new file mode 100644
index 0000000000..ed5a82134a
Binary files /dev/null and b/docs/static/img/datasource-reference/overview/edit.png differ
diff --git a/docs/static/img/datasource-reference/overview/error.png b/docs/static/img/datasource-reference/overview/error.png
new file mode 100644
index 0000000000..eafe42cef0
Binary files /dev/null and b/docs/static/img/datasource-reference/overview/error.png differ
diff --git a/docs/static/img/datasource-reference/overview/global.png b/docs/static/img/datasource-reference/overview/global.png
new file mode 100644
index 0000000000..746eacba93
Binary files /dev/null and b/docs/static/img/datasource-reference/overview/global.png differ
diff --git a/docs/static/img/datasource-reference/overview/globalquery.png b/docs/static/img/datasource-reference/overview/globalquery.png
new file mode 100644
index 0000000000..f2273650fc
Binary files /dev/null and b/docs/static/img/datasource-reference/overview/globalquery.png differ
diff --git a/docs/static/img/datasource-reference/overview/leftsidebar.png b/docs/static/img/datasource-reference/overview/leftsidebar.png
new file mode 100644
index 0000000000..1d6f717eab
Binary files /dev/null and b/docs/static/img/datasource-reference/overview/leftsidebar.png differ
diff --git a/docs/static/img/datasource-reference/overview/popup.png b/docs/static/img/datasource-reference/overview/popup.png
new file mode 100644
index 0000000000..a3d945b374
Binary files /dev/null and b/docs/static/img/datasource-reference/overview/popup.png differ
diff --git a/docs/static/img/datasource-reference/overview/queryadd.png b/docs/static/img/datasource-reference/overview/queryadd.png
new file mode 100644
index 0000000000..8caf9ff3dd
Binary files /dev/null and b/docs/static/img/datasource-reference/overview/queryadd.png differ
diff --git a/docs/static/img/datasource-reference/overview/switch.png b/docs/static/img/datasource-reference/overview/switch.png
new file mode 100644
index 0000000000..817fe042d7
Binary files /dev/null and b/docs/static/img/datasource-reference/overview/switch.png differ
diff --git a/docs/static/img/datasource-reference/overview/view.png b/docs/static/img/datasource-reference/overview/view.png
new file mode 100644
index 0000000000..f811c45dd9
Binary files /dev/null and b/docs/static/img/datasource-reference/overview/view.png differ
diff --git a/docs/static/img/datasource-reference/smtp/querysmtp.png b/docs/static/img/datasource-reference/smtp/querysmtp.png
new file mode 100644
index 0000000000..75a7a8ca82
Binary files /dev/null and b/docs/static/img/datasource-reference/smtp/querysmtp.png differ
diff --git a/docs/static/img/how-to/failjs/failjs.gif b/docs/static/img/how-to/failjs/failjs.gif
new file mode 100644
index 0000000000..c042f682d4
Binary files /dev/null and b/docs/static/img/how-to/failjs/failjs.gif differ
diff --git a/docs/static/img/how-to/uses3presignedurl/copysigned.png b/docs/static/img/how-to/uses3presignedurl/copysigned.png
new file mode 100644
index 0000000000..ffdd0793c0
Binary files /dev/null and b/docs/static/img/how-to/uses3presignedurl/copysigned.png differ
diff --git a/docs/static/img/how-to/uses3presignedurl/dropdown.png b/docs/static/img/how-to/uses3presignedurl/dropdown.png
new file mode 100644
index 0000000000..0c97c1c9a8
Binary files /dev/null and b/docs/static/img/how-to/uses3presignedurl/dropdown.png differ
diff --git a/docs/static/img/how-to/uses3presignedurl/eventhandlerrunjs2.png b/docs/static/img/how-to/uses3presignedurl/eventhandlerrunjs2.png
new file mode 100644
index 0000000000..21ebd55481
Binary files /dev/null and b/docs/static/img/how-to/uses3presignedurl/eventhandlerrunjs2.png differ
diff --git a/docs/static/img/how-to/uses3presignedurl/eventhandlerupload.png b/docs/static/img/how-to/uses3presignedurl/eventhandlerupload.png
new file mode 100644
index 0000000000..5670721423
Binary files /dev/null and b/docs/static/img/how-to/uses3presignedurl/eventhandlerupload.png differ
diff --git a/docs/static/img/how-to/uses3presignedurl/fetchfiles.png b/docs/static/img/how-to/uses3presignedurl/fetchfiles.png
new file mode 100644
index 0000000000..21e548b7af
Binary files /dev/null and b/docs/static/img/how-to/uses3presignedurl/fetchfiles.png differ
diff --git a/docs/static/img/how-to/uses3presignedurl/getbuckets.png b/docs/static/img/how-to/uses3presignedurl/getbuckets.png
new file mode 100644
index 0000000000..ba62cc882d
Binary files /dev/null and b/docs/static/img/how-to/uses3presignedurl/getbuckets.png differ
diff --git a/docs/static/img/how-to/uses3presignedurl/newversion.png b/docs/static/img/how-to/uses3presignedurl/newversion.png
new file mode 100644
index 0000000000..aac030e909
Binary files /dev/null and b/docs/static/img/how-to/uses3presignedurl/newversion.png differ
diff --git a/docs/static/img/how-to/uses3presignedurl/runjs1.png b/docs/static/img/how-to/uses3presignedurl/runjs1.png
new file mode 100644
index 0000000000..0313e21b49
Binary files /dev/null and b/docs/static/img/how-to/uses3presignedurl/runjs1.png differ
diff --git a/docs/static/img/how-to/uses3presignedurl/runjs2.png b/docs/static/img/how-to/uses3presignedurl/runjs2.png
new file mode 100644
index 0000000000..17a13c6d06
Binary files /dev/null and b/docs/static/img/how-to/uses3presignedurl/runjs2.png differ
diff --git a/docs/static/img/how-to/uses3presignedurl/s3connect.png b/docs/static/img/how-to/uses3presignedurl/s3connect.png
new file mode 100644
index 0000000000..7ade00fada
Binary files /dev/null and b/docs/static/img/how-to/uses3presignedurl/s3connect.png differ
diff --git a/docs/static/img/how-to/uses3presignedurl/template.png b/docs/static/img/how-to/uses3presignedurl/template.png
new file mode 100644
index 0000000000..761705dee4
Binary files /dev/null and b/docs/static/img/how-to/uses3presignedurl/template.png differ
diff --git a/docs/static/img/how-to/uses3presignedurl/upload.png b/docs/static/img/how-to/uses3presignedurl/upload.png
new file mode 100644
index 0000000000..93f1924c14
Binary files /dev/null and b/docs/static/img/how-to/uses3presignedurl/upload.png differ
diff --git a/docs/static/img/how-to/uses3presignedurl/uploadbutton.png b/docs/static/img/how-to/uses3presignedurl/uploadbutton.png
new file mode 100644
index 0000000000..f580239948
Binary files /dev/null and b/docs/static/img/how-to/uses3presignedurl/uploadbutton.png differ
diff --git a/docs/static/img/tutorial/manage-users-groups/dspermission.png b/docs/static/img/tutorial/manage-users-groups/dspermission.png
new file mode 100644
index 0000000000..69e1c57a2d
Binary files /dev/null and b/docs/static/img/tutorial/manage-users-groups/dspermission.png differ
diff --git a/docs/static/img/tutorial/manage-users-groups/gdspermission.png b/docs/static/img/tutorial/manage-users-groups/gdspermission.png
new file mode 100644
index 0000000000..35b8423a69
Binary files /dev/null and b/docs/static/img/tutorial/manage-users-groups/gdspermission.png differ
diff --git a/docs/static/img/widgets/container/container.png b/docs/static/img/widgets/container/container.png
new file mode 100644
index 0000000000..d98e9f9a5d
Binary files /dev/null and b/docs/static/img/widgets/container/container.png differ
diff --git a/docs/static/img/widgets/container/scrollcontainer.png b/docs/static/img/widgets/container/scrollcontainer.png
new file mode 100644
index 0000000000..9d77d8eea8
Binary files /dev/null and b/docs/static/img/widgets/container/scrollcontainer.png differ
diff --git a/docs/static/img/widgets/table/ui.png b/docs/static/img/widgets/table/ui.png
new file mode 100644
index 0000000000..7a42690459
Binary files /dev/null and b/docs/static/img/widgets/table/ui.png differ
diff --git a/docs/versioned_docs/version-1.x.x/how-to/intentionally-fail-js-query.md b/docs/versioned_docs/version-1.x.x/how-to/intentionally-fail-js-query.md
new file mode 100644
index 0000000000..bc7750ec4c
--- /dev/null
+++ b/docs/versioned_docs/version-1.x.x/how-to/intentionally-fail-js-query.md
@@ -0,0 +1,23 @@
+---
+id: intentionally-fail-js-query
+title: Intentionally fail a RunJS query
+---
+
+In this how-to guide, we will create a RunJS query that will throw an error.
+
+- Create a RunJS query and paste the code below. We will use the constructor `ReferenceError` since it is used to create a range error instance.
+ ```js
+ throw new ReferenceError('This is a reference error.');
+ ```
+
+- Now, add a event handler to show an alert when the query fails. **Save** the query and **Run** it.
+
+
+
+
+
+
+
+:::info
+Most common use-case for intentionally failing a query is **debugging**.
+:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-1.x.x/how-to/use-s3-presigned-url-to-upload-docs.md b/docs/versioned_docs/version-1.x.x/how-to/use-s3-presigned-url-to-upload-docs.md
new file mode 100644
index 0000000000..61dd6448d3
--- /dev/null
+++ b/docs/versioned_docs/version-1.x.x/how-to/use-s3-presigned-url-to-upload-docs.md
@@ -0,0 +1,173 @@
+---
+id: use-s3-signed-url-to-upload-docs
+title: Use S3 signed URL to upload documents
+---
+
+# Use S3 signed URL to upload documents
+
+In this how-to guide, you'll learn to upload documents to S3 buckets using the **S3 signed URL** from a ToolJet application.
+
+For this guide, We are going to use one of the existing templates on ToolJet: **S3 File explorer**
+
+:::info using Templates
+On ToolJet Dashboard, Click on the down arrow on the right of the **New App** button, from the dropdown choose the **Choose from template** option.
+:::
+
+
+
+
+
+
+
+- Once you've created a new app using the template, you'll be prompted to create a **new version** of the existing version. After creating a new version, you'll be able to make changes in the app.
+
+
+
+
+
+
+
+- Go to the **datasource manager** on the left-sidebar, you'll find that the **AWS S3 datasource** is already added. All you need to do is update the datasource **credentials**.
+
+ :::tip
+ Check the [AWS S3 datasource reference](/docs/data-sources/s3) to learn more about connnection and choosing your preferred authentication method.
+ :::
+
+
+
+
+
+
+
+- Once the datasource is connected successfully, go to the query manager and **Run** the **getBuckets** query. The operation selected in the getBuckets query is **List Buckets** which will fetch an array of all the buckets.
+
+
+
+
+
+
+
+- Running the **getBuckets** query will load all the buckets in the dropdown in the app.
+
+
+
+
+
+
+
+- Select a **bucket** from the dropdown and click on the **Fetch files** button to list all the files from the selected bucket on the table. The **Fetch files** button has the event handler added that triggers the **s32** query, the **s32** query uses the **List objects in a bucket** operation, and the bucket field in the query gets the value dynamically from the dropdown.
+
+
+
+
+
+
+
+- Let's go to the **uploadToS3** query and update the field values:
+ - **Operation**: Signed URL for upload
+ - **Bucket**: `{{components.dropdown1.value}}` this will fetch the dynamic value from the dropdown
+ - **Key**: `{{components.filepicker1.file[0].name}}` this will get the file name from the filepickers exposed variables
+ - **Expires in:** This sets an expiration time of URL, by default its `3600` seconds (1 hour)
+ - **Content Type**: `{{components.filepicker1.file[0].type}}` this will get the file type from the filepickers exposed variables
+
+
+
+
+
+
+
+- Create two **RunJS** queries:
+ - Create a **runjs1** query and copy-paste the code below. This query gets the **base64data** from the file picker and convert the file's `base64Data` to into `BLOB`, and returns the file object.
+ ```js
+ const base64String = components.filepicker1.file[0].base64Data
+ const decodedArray = new Uint8Array(atob(base64String).split('').map(c => c.charCodeAt(0)));
+ const file = new Blob([decodedArray], { type: components.filepicker1.file[0].type });
+ const fileName = components.filepicker1.file[0].name;
+ const fileObj = new File([file], fileName);
+
+ return fileObj
+ ```
+
+
+
+
+
+
+
+ - Create another **runjs2** query and copy-paste the code below. This query gets the data(file object) returned by the first runjs query, the url returned by the **uploadToS3** query, and then makes PUT request.
+ ```js
+ const file = queries.runjs2.data
+ const url = queries.s31.data.url
+
+ fetch(url, {
+ method: 'PUT',
+ body: file,
+ mode: 'cors',
+ headers: {
+ 'Access-Control-Allow-Origin': '*',
+ 'Content-Type': 'application/json'
+ }
+ })
+ .then(response => console.log('Upload successful!'))
+ .catch(error => console.error('Error uploading file:', error));
+ ```
+ :::warning Enable Cross Origin Resource Sharing(CORS)
+ - For the file to be uploaded successfully, you will need to add the CORS policies from the **Permissions** tab of your **Bucket** settings. Here's a sample CORS:
+ ```json
+ [
+ {
+ "AllowedHeaders": [
+ "*"
+ ],
+ "AllowedMethods": [
+ "GET",
+ "PUT",
+ "POST"
+ ],
+ "AllowedOrigins": [
+ "*"
+ ],
+ "ExposeHeaders": []
+ }
+ ]
+ ```
+ :::
+
+
+
+
+
+
+
+- Go to the **uploadToS3**, scroll down and add an event handler to the **uploadToS3** query. Select the **Query Success** event, **Run Query** as the action, and **runjs1** as the query to be triggered. **Save** the query.
+
+
+
+
+
+
+- Let's go to the **runjs1** query and add the event handler to run a query on query success event, similar to how we did in the previous step. In the event handler, choose **runjs2** query. **Save** the query.
+
+
+
+
+
+
+- Now, let's go the final query **copySignedURL** that is connected to the table's action button. This query copy's the generated **Signed URL for download** onto the **clipboard**.
+
+
+
+
+
+
+- Now that we have updated all the queries, and connected them through the event handlers. We can go ahead and pick a file from the file picker. Click on the file picker, select a file and then hit the **Upload file to S3** button.
+
+
+
+
+
+
+- Once the button is clicked, the **uploadToS3** will triggered along with the **runjs1** and **runjs2** queries in sequence since we added them in the event handlers.
+
+- You can go to the table and click on the **Copy signed URL** action button on the table, this will trigger the **copySignedURL** query and will copy the URL on the clipboard. You can go to another tab and paste the URL to open the file on the browser.
+
diff --git a/docs/versioned_docs/version-2.0.0/getting-started.md b/docs/versioned_docs/version-2.0.0/getting-started.md
index 3d944f62c9..4e83aaca55 100644
--- a/docs/versioned_docs/version-2.0.0/getting-started.md
+++ b/docs/versioned_docs/version-2.0.0/getting-started.md
@@ -107,7 +107,7 @@ Learn more about the **[ToolJet Database here](/docs/tooljet-database)**
### Create a new application
-1. To create a new ToolJet application, go to the **Dashboard** -> **New App from scratch**.
+1. To create a new ToolJet application, go to the **Dashboard** -> **Create new application**.
@@ -143,7 +143,7 @@ Learn more about the **[ToolJet Database here](/docs/tooljet-database)**
:::info
-ToolJet application's User interface is constructed using Components like Tables, Forms, Charts, or Buttons etc. Check **Components Catalog** to learn more.
+ToolJet application's User interface is constructed using Components like Tables, Forms, Charts, or Buttons etc. Check **[Components Catalog](/docs/widgets/overview)** to learn more.
:::
### Build queries and bind data to UI
@@ -156,7 +156,7 @@ ToolJet application's User interface is constructed using Components like Tables
:::info
- ToolJet can connect to several databases, APIs and external services to fetch and modify data. Check **Datasource Catalog** to learn more.
+ ToolJet can connect to several databases, APIs and external services to fetch and modify data. Check **[Datasource Catalog](/docs/data-sources/overview)** to learn more.
:::
2. Choose a **Table** from the dropdown, Select the **List rows** option from the **Operation** dropdown, You can leave other query parameters. Scroll down and enable **Run this query on application load** - this will trigger the query when the app is loaded.
@@ -199,8 +199,8 @@ ToolJet application's User interface is constructed using Components like Tables
:::info
-- You can manipulate the data returned by the queries using **Transformations**
-- You can also **Run JS query** or **Python query** to perform custom behavior inside ToolJet
+- You can manipulate the data returned by the queries using **[Transformations](/docs/tutorial/transformations)**
+- You can also **[Run JavaScript code](/docs/data-sources/run-js)** or **[Run Python code](/docs/data-sources/run-py)** to perform custom behavior inside ToolJet
:::
### Preview, Release and Share app
@@ -210,7 +210,7 @@ ToolJet application's User interface is constructed using Components like Tables
3. **Share** option allows you to share the **released version** of the application with other users or you can also make the app **public** and anyone with the URL will be able to use the app.
:::tip
-You can control how much access to users have to your ToolJet apps and resources using **Org Management**.
+You can control how much access to users have to your ToolJet apps and resources using **[Org Management](/docs/tutorial/manage-users-groups)**.
:::
## What Can I Do With ToolJet
diff --git a/docs/versioned_docs/version-2.0.0/how-to/intentionally-fail-js-query.md b/docs/versioned_docs/version-2.0.0/how-to/intentionally-fail-js-query.md
new file mode 100644
index 0000000000..bc7750ec4c
--- /dev/null
+++ b/docs/versioned_docs/version-2.0.0/how-to/intentionally-fail-js-query.md
@@ -0,0 +1,23 @@
+---
+id: intentionally-fail-js-query
+title: Intentionally fail a RunJS query
+---
+
+In this how-to guide, we will create a RunJS query that will throw an error.
+
+- Create a RunJS query and paste the code below. We will use the constructor `ReferenceError` since it is used to create a range error instance.
+ ```js
+ throw new ReferenceError('This is a reference error.');
+ ```
+
+- Now, add a event handler to show an alert when the query fails. **Save** the query and **Run** it.
+
+
+
+
+
+
+
+:::info
+Most common use-case for intentionally failing a query is **debugging**.
+:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.0.0/how-to/use-s3-presigned-url-to-upload-docs.md b/docs/versioned_docs/version-2.0.0/how-to/use-s3-presigned-url-to-upload-docs.md
new file mode 100644
index 0000000000..61dd6448d3
--- /dev/null
+++ b/docs/versioned_docs/version-2.0.0/how-to/use-s3-presigned-url-to-upload-docs.md
@@ -0,0 +1,173 @@
+---
+id: use-s3-signed-url-to-upload-docs
+title: Use S3 signed URL to upload documents
+---
+
+# Use S3 signed URL to upload documents
+
+In this how-to guide, you'll learn to upload documents to S3 buckets using the **S3 signed URL** from a ToolJet application.
+
+For this guide, We are going to use one of the existing templates on ToolJet: **S3 File explorer**
+
+:::info using Templates
+On ToolJet Dashboard, Click on the down arrow on the right of the **New App** button, from the dropdown choose the **Choose from template** option.
+:::
+
+
+
+
+
+
+
+- Once you've created a new app using the template, you'll be prompted to create a **new version** of the existing version. After creating a new version, you'll be able to make changes in the app.
+
+
+
+
+
+
+
+- Go to the **datasource manager** on the left-sidebar, you'll find that the **AWS S3 datasource** is already added. All you need to do is update the datasource **credentials**.
+
+ :::tip
+ Check the [AWS S3 datasource reference](/docs/data-sources/s3) to learn more about connnection and choosing your preferred authentication method.
+ :::
+
+
+
+
+
+
+
+- Once the datasource is connected successfully, go to the query manager and **Run** the **getBuckets** query. The operation selected in the getBuckets query is **List Buckets** which will fetch an array of all the buckets.
+
+
+
+
+
+
+
+- Running the **getBuckets** query will load all the buckets in the dropdown in the app.
+
+
+
+
+
+
+
+- Select a **bucket** from the dropdown and click on the **Fetch files** button to list all the files from the selected bucket on the table. The **Fetch files** button has the event handler added that triggers the **s32** query, the **s32** query uses the **List objects in a bucket** operation, and the bucket field in the query gets the value dynamically from the dropdown.
+
+
+
+
+
+
+
+- Let's go to the **uploadToS3** query and update the field values:
+ - **Operation**: Signed URL for upload
+ - **Bucket**: `{{components.dropdown1.value}}` this will fetch the dynamic value from the dropdown
+ - **Key**: `{{components.filepicker1.file[0].name}}` this will get the file name from the filepickers exposed variables
+ - **Expires in:** This sets an expiration time of URL, by default its `3600` seconds (1 hour)
+ - **Content Type**: `{{components.filepicker1.file[0].type}}` this will get the file type from the filepickers exposed variables
+
+
+
+
+
+
+
+- Create two **RunJS** queries:
+ - Create a **runjs1** query and copy-paste the code below. This query gets the **base64data** from the file picker and convert the file's `base64Data` to into `BLOB`, and returns the file object.
+ ```js
+ const base64String = components.filepicker1.file[0].base64Data
+ const decodedArray = new Uint8Array(atob(base64String).split('').map(c => c.charCodeAt(0)));
+ const file = new Blob([decodedArray], { type: components.filepicker1.file[0].type });
+ const fileName = components.filepicker1.file[0].name;
+ const fileObj = new File([file], fileName);
+
+ return fileObj
+ ```
+
+
+
+
+
+
+
+ - Create another **runjs2** query and copy-paste the code below. This query gets the data(file object) returned by the first runjs query, the url returned by the **uploadToS3** query, and then makes PUT request.
+ ```js
+ const file = queries.runjs2.data
+ const url = queries.s31.data.url
+
+ fetch(url, {
+ method: 'PUT',
+ body: file,
+ mode: 'cors',
+ headers: {
+ 'Access-Control-Allow-Origin': '*',
+ 'Content-Type': 'application/json'
+ }
+ })
+ .then(response => console.log('Upload successful!'))
+ .catch(error => console.error('Error uploading file:', error));
+ ```
+ :::warning Enable Cross Origin Resource Sharing(CORS)
+ - For the file to be uploaded successfully, you will need to add the CORS policies from the **Permissions** tab of your **Bucket** settings. Here's a sample CORS:
+ ```json
+ [
+ {
+ "AllowedHeaders": [
+ "*"
+ ],
+ "AllowedMethods": [
+ "GET",
+ "PUT",
+ "POST"
+ ],
+ "AllowedOrigins": [
+ "*"
+ ],
+ "ExposeHeaders": []
+ }
+ ]
+ ```
+ :::
+
+
+
+
+
+
+
+- Go to the **uploadToS3**, scroll down and add an event handler to the **uploadToS3** query. Select the **Query Success** event, **Run Query** as the action, and **runjs1** as the query to be triggered. **Save** the query.
+
+
+
+
+
+
+- Let's go to the **runjs1** query and add the event handler to run a query on query success event, similar to how we did in the previous step. In the event handler, choose **runjs2** query. **Save** the query.
+
+
+
+
+
+
+- Now, let's go the final query **copySignedURL** that is connected to the table's action button. This query copy's the generated **Signed URL for download** onto the **clipboard**.
+
+
+
+
+
+
+- Now that we have updated all the queries, and connected them through the event handlers. We can go ahead and pick a file from the file picker. Click on the file picker, select a file and then hit the **Upload file to S3** button.
+
+
+
+
+
+
+- Once the button is clicked, the **uploadToS3** will triggered along with the **runjs1** and **runjs2** queries in sequence since we added them in the event handlers.
+
+- You can go to the table and click on the **Copy signed URL** action button on the table, this will trigger the **copySignedURL** query and will copy the URL on the clipboard. You can go to another tab and paste the URL to open the file on the browser.
+
diff --git a/docs/versioned_docs/version-2.1.0/getting-started.md b/docs/versioned_docs/version-2.1.0/getting-started.md
index 3d944f62c9..4e83aaca55 100644
--- a/docs/versioned_docs/version-2.1.0/getting-started.md
+++ b/docs/versioned_docs/version-2.1.0/getting-started.md
@@ -107,7 +107,7 @@ Learn more about the **[ToolJet Database here](/docs/tooljet-database)**
### Create a new application
-1. To create a new ToolJet application, go to the **Dashboard** -> **New App from scratch**.
+1. To create a new ToolJet application, go to the **Dashboard** -> **Create new application**.
@@ -143,7 +143,7 @@ Learn more about the **[ToolJet Database here](/docs/tooljet-database)**
:::info
-ToolJet application's User interface is constructed using Components like Tables, Forms, Charts, or Buttons etc. Check **Components Catalog** to learn more.
+ToolJet application's User interface is constructed using Components like Tables, Forms, Charts, or Buttons etc. Check **[Components Catalog](/docs/widgets/overview)** to learn more.
:::
### Build queries and bind data to UI
@@ -156,7 +156,7 @@ ToolJet application's User interface is constructed using Components like Tables
:::info
- ToolJet can connect to several databases, APIs and external services to fetch and modify data. Check **Datasource Catalog** to learn more.
+ ToolJet can connect to several databases, APIs and external services to fetch and modify data. Check **[Datasource Catalog](/docs/data-sources/overview)** to learn more.
:::
2. Choose a **Table** from the dropdown, Select the **List rows** option from the **Operation** dropdown, You can leave other query parameters. Scroll down and enable **Run this query on application load** - this will trigger the query when the app is loaded.
@@ -199,8 +199,8 @@ ToolJet application's User interface is constructed using Components like Tables
:::info
-- You can manipulate the data returned by the queries using **Transformations**
-- You can also **Run JS query** or **Python query** to perform custom behavior inside ToolJet
+- You can manipulate the data returned by the queries using **[Transformations](/docs/tutorial/transformations)**
+- You can also **[Run JavaScript code](/docs/data-sources/run-js)** or **[Run Python code](/docs/data-sources/run-py)** to perform custom behavior inside ToolJet
:::
### Preview, Release and Share app
@@ -210,7 +210,7 @@ ToolJet application's User interface is constructed using Components like Tables
3. **Share** option allows you to share the **released version** of the application with other users or you can also make the app **public** and anyone with the URL will be able to use the app.
:::tip
-You can control how much access to users have to your ToolJet apps and resources using **Org Management**.
+You can control how much access to users have to your ToolJet apps and resources using **[Org Management](/docs/tutorial/manage-users-groups)**.
:::
## What Can I Do With ToolJet
diff --git a/docs/versioned_docs/version-2.1.0/how-to/intentionally-fail-js-query.md b/docs/versioned_docs/version-2.1.0/how-to/intentionally-fail-js-query.md
new file mode 100644
index 0000000000..bc7750ec4c
--- /dev/null
+++ b/docs/versioned_docs/version-2.1.0/how-to/intentionally-fail-js-query.md
@@ -0,0 +1,23 @@
+---
+id: intentionally-fail-js-query
+title: Intentionally fail a RunJS query
+---
+
+In this how-to guide, we will create a RunJS query that will throw an error.
+
+- Create a RunJS query and paste the code below. We will use the constructor `ReferenceError` since it is used to create a range error instance.
+ ```js
+ throw new ReferenceError('This is a reference error.');
+ ```
+
+- Now, add a event handler to show an alert when the query fails. **Save** the query and **Run** it.
+
+
+
+
+
+
+
+:::info
+Most common use-case for intentionally failing a query is **debugging**.
+:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.1.0/how-to/use-s3-presigned-url-to-upload-docs.md b/docs/versioned_docs/version-2.1.0/how-to/use-s3-presigned-url-to-upload-docs.md
new file mode 100644
index 0000000000..61dd6448d3
--- /dev/null
+++ b/docs/versioned_docs/version-2.1.0/how-to/use-s3-presigned-url-to-upload-docs.md
@@ -0,0 +1,173 @@
+---
+id: use-s3-signed-url-to-upload-docs
+title: Use S3 signed URL to upload documents
+---
+
+# Use S3 signed URL to upload documents
+
+In this how-to guide, you'll learn to upload documents to S3 buckets using the **S3 signed URL** from a ToolJet application.
+
+For this guide, We are going to use one of the existing templates on ToolJet: **S3 File explorer**
+
+:::info using Templates
+On ToolJet Dashboard, Click on the down arrow on the right of the **New App** button, from the dropdown choose the **Choose from template** option.
+:::
+
+
+
+
+
+
+
+- Once you've created a new app using the template, you'll be prompted to create a **new version** of the existing version. After creating a new version, you'll be able to make changes in the app.
+
+
+
+
+
+
+
+- Go to the **datasource manager** on the left-sidebar, you'll find that the **AWS S3 datasource** is already added. All you need to do is update the datasource **credentials**.
+
+ :::tip
+ Check the [AWS S3 datasource reference](/docs/data-sources/s3) to learn more about connnection and choosing your preferred authentication method.
+ :::
+
+
+
+
+
+
+
+- Once the datasource is connected successfully, go to the query manager and **Run** the **getBuckets** query. The operation selected in the getBuckets query is **List Buckets** which will fetch an array of all the buckets.
+
+
+
+
+
+
+
+- Running the **getBuckets** query will load all the buckets in the dropdown in the app.
+
+
+
+
+
+
+
+- Select a **bucket** from the dropdown and click on the **Fetch files** button to list all the files from the selected bucket on the table. The **Fetch files** button has the event handler added that triggers the **s32** query, the **s32** query uses the **List objects in a bucket** operation, and the bucket field in the query gets the value dynamically from the dropdown.
+
+
+
+
+
+
+
+- Let's go to the **uploadToS3** query and update the field values:
+ - **Operation**: Signed URL for upload
+ - **Bucket**: `{{components.dropdown1.value}}` this will fetch the dynamic value from the dropdown
+ - **Key**: `{{components.filepicker1.file[0].name}}` this will get the file name from the filepickers exposed variables
+ - **Expires in:** This sets an expiration time of URL, by default its `3600` seconds (1 hour)
+ - **Content Type**: `{{components.filepicker1.file[0].type}}` this will get the file type from the filepickers exposed variables
+
+
+
+
+
+
+
+- Create two **RunJS** queries:
+ - Create a **runjs1** query and copy-paste the code below. This query gets the **base64data** from the file picker and convert the file's `base64Data` to into `BLOB`, and returns the file object.
+ ```js
+ const base64String = components.filepicker1.file[0].base64Data
+ const decodedArray = new Uint8Array(atob(base64String).split('').map(c => c.charCodeAt(0)));
+ const file = new Blob([decodedArray], { type: components.filepicker1.file[0].type });
+ const fileName = components.filepicker1.file[0].name;
+ const fileObj = new File([file], fileName);
+
+ return fileObj
+ ```
+
+
+
+
+
+
+
+ - Create another **runjs2** query and copy-paste the code below. This query gets the data(file object) returned by the first runjs query, the url returned by the **uploadToS3** query, and then makes PUT request.
+ ```js
+ const file = queries.runjs2.data
+ const url = queries.s31.data.url
+
+ fetch(url, {
+ method: 'PUT',
+ body: file,
+ mode: 'cors',
+ headers: {
+ 'Access-Control-Allow-Origin': '*',
+ 'Content-Type': 'application/json'
+ }
+ })
+ .then(response => console.log('Upload successful!'))
+ .catch(error => console.error('Error uploading file:', error));
+ ```
+ :::warning Enable Cross Origin Resource Sharing(CORS)
+ - For the file to be uploaded successfully, you will need to add the CORS policies from the **Permissions** tab of your **Bucket** settings. Here's a sample CORS:
+ ```json
+ [
+ {
+ "AllowedHeaders": [
+ "*"
+ ],
+ "AllowedMethods": [
+ "GET",
+ "PUT",
+ "POST"
+ ],
+ "AllowedOrigins": [
+ "*"
+ ],
+ "ExposeHeaders": []
+ }
+ ]
+ ```
+ :::
+
+
+
+
+
+
+
+- Go to the **uploadToS3**, scroll down and add an event handler to the **uploadToS3** query. Select the **Query Success** event, **Run Query** as the action, and **runjs1** as the query to be triggered. **Save** the query.
+
+
+
+
+
+
+- Let's go to the **runjs1** query and add the event handler to run a query on query success event, similar to how we did in the previous step. In the event handler, choose **runjs2** query. **Save** the query.
+
+
+
+
+
+
+- Now, let's go the final query **copySignedURL** that is connected to the table's action button. This query copy's the generated **Signed URL for download** onto the **clipboard**.
+
+
+
+
+
+
+- Now that we have updated all the queries, and connected them through the event handlers. We can go ahead and pick a file from the file picker. Click on the file picker, select a file and then hit the **Upload file to S3** button.
+
+
+
+
+
+
+- Once the button is clicked, the **uploadToS3** will triggered along with the **runjs1** and **runjs2** queries in sequence since we added them in the event handlers.
+
+- You can go to the table and click on the **Copy signed URL** action button on the table, this will trigger the **copySignedURL** query and will copy the URL on the clipboard. You can go to another tab and paste the URL to open the file on the browser.
+
diff --git a/docs/versioned_docs/version-2.2.0/getting-started.md b/docs/versioned_docs/version-2.2.0/getting-started.md
index 3d944f62c9..4e83aaca55 100644
--- a/docs/versioned_docs/version-2.2.0/getting-started.md
+++ b/docs/versioned_docs/version-2.2.0/getting-started.md
@@ -107,7 +107,7 @@ Learn more about the **[ToolJet Database here](/docs/tooljet-database)**
### Create a new application
-1. To create a new ToolJet application, go to the **Dashboard** -> **New App from scratch**.
+1. To create a new ToolJet application, go to the **Dashboard** -> **Create new application**.
@@ -143,7 +143,7 @@ Learn more about the **[ToolJet Database here](/docs/tooljet-database)**
:::info
-ToolJet application's User interface is constructed using Components like Tables, Forms, Charts, or Buttons etc. Check **Components Catalog** to learn more.
+ToolJet application's User interface is constructed using Components like Tables, Forms, Charts, or Buttons etc. Check **[Components Catalog](/docs/widgets/overview)** to learn more.
:::
### Build queries and bind data to UI
@@ -156,7 +156,7 @@ ToolJet application's User interface is constructed using Components like Tables
:::info
- ToolJet can connect to several databases, APIs and external services to fetch and modify data. Check **Datasource Catalog** to learn more.
+ ToolJet can connect to several databases, APIs and external services to fetch and modify data. Check **[Datasource Catalog](/docs/data-sources/overview)** to learn more.
:::
2. Choose a **Table** from the dropdown, Select the **List rows** option from the **Operation** dropdown, You can leave other query parameters. Scroll down and enable **Run this query on application load** - this will trigger the query when the app is loaded.
@@ -199,8 +199,8 @@ ToolJet application's User interface is constructed using Components like Tables
:::info
-- You can manipulate the data returned by the queries using **Transformations**
-- You can also **Run JS query** or **Python query** to perform custom behavior inside ToolJet
+- You can manipulate the data returned by the queries using **[Transformations](/docs/tutorial/transformations)**
+- You can also **[Run JavaScript code](/docs/data-sources/run-js)** or **[Run Python code](/docs/data-sources/run-py)** to perform custom behavior inside ToolJet
:::
### Preview, Release and Share app
@@ -210,7 +210,7 @@ ToolJet application's User interface is constructed using Components like Tables
3. **Share** option allows you to share the **released version** of the application with other users or you can also make the app **public** and anyone with the URL will be able to use the app.
:::tip
-You can control how much access to users have to your ToolJet apps and resources using **Org Management**.
+You can control how much access to users have to your ToolJet apps and resources using **[Org Management](/docs/tutorial/manage-users-groups)**.
:::
## What Can I Do With ToolJet
diff --git a/docs/versioned_docs/version-2.2.0/how-to/intentionally-fail-js-query.md b/docs/versioned_docs/version-2.2.0/how-to/intentionally-fail-js-query.md
new file mode 100644
index 0000000000..bc7750ec4c
--- /dev/null
+++ b/docs/versioned_docs/version-2.2.0/how-to/intentionally-fail-js-query.md
@@ -0,0 +1,23 @@
+---
+id: intentionally-fail-js-query
+title: Intentionally fail a RunJS query
+---
+
+In this how-to guide, we will create a RunJS query that will throw an error.
+
+- Create a RunJS query and paste the code below. We will use the constructor `ReferenceError` since it is used to create a range error instance.
+ ```js
+ throw new ReferenceError('This is a reference error.');
+ ```
+
+- Now, add a event handler to show an alert when the query fails. **Save** the query and **Run** it.
+
+
+
+
+
+
+
+:::info
+Most common use-case for intentionally failing a query is **debugging**.
+:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.2.0/how-to/use-s3-presigned-url-to-upload-docs.md b/docs/versioned_docs/version-2.2.0/how-to/use-s3-presigned-url-to-upload-docs.md
new file mode 100644
index 0000000000..61dd6448d3
--- /dev/null
+++ b/docs/versioned_docs/version-2.2.0/how-to/use-s3-presigned-url-to-upload-docs.md
@@ -0,0 +1,173 @@
+---
+id: use-s3-signed-url-to-upload-docs
+title: Use S3 signed URL to upload documents
+---
+
+# Use S3 signed URL to upload documents
+
+In this how-to guide, you'll learn to upload documents to S3 buckets using the **S3 signed URL** from a ToolJet application.
+
+For this guide, We are going to use one of the existing templates on ToolJet: **S3 File explorer**
+
+:::info using Templates
+On ToolJet Dashboard, Click on the down arrow on the right of the **New App** button, from the dropdown choose the **Choose from template** option.
+:::
+
+
+
+
+
+
+
+- Once you've created a new app using the template, you'll be prompted to create a **new version** of the existing version. After creating a new version, you'll be able to make changes in the app.
+
+
+
+
+
+
+
+- Go to the **datasource manager** on the left-sidebar, you'll find that the **AWS S3 datasource** is already added. All you need to do is update the datasource **credentials**.
+
+ :::tip
+ Check the [AWS S3 datasource reference](/docs/data-sources/s3) to learn more about connnection and choosing your preferred authentication method.
+ :::
+
+
+
+
+
+
+
+- Once the datasource is connected successfully, go to the query manager and **Run** the **getBuckets** query. The operation selected in the getBuckets query is **List Buckets** which will fetch an array of all the buckets.
+
+
+
+
+
+
+
+- Running the **getBuckets** query will load all the buckets in the dropdown in the app.
+
+
+
+
+
+
+
+- Select a **bucket** from the dropdown and click on the **Fetch files** button to list all the files from the selected bucket on the table. The **Fetch files** button has the event handler added that triggers the **s32** query, the **s32** query uses the **List objects in a bucket** operation, and the bucket field in the query gets the value dynamically from the dropdown.
+
+
+
+
+
+
+
+- Let's go to the **uploadToS3** query and update the field values:
+ - **Operation**: Signed URL for upload
+ - **Bucket**: `{{components.dropdown1.value}}` this will fetch the dynamic value from the dropdown
+ - **Key**: `{{components.filepicker1.file[0].name}}` this will get the file name from the filepickers exposed variables
+ - **Expires in:** This sets an expiration time of URL, by default its `3600` seconds (1 hour)
+ - **Content Type**: `{{components.filepicker1.file[0].type}}` this will get the file type from the filepickers exposed variables
+
+
+
+
+
+
+
+- Create two **RunJS** queries:
+ - Create a **runjs1** query and copy-paste the code below. This query gets the **base64data** from the file picker and convert the file's `base64Data` to into `BLOB`, and returns the file object.
+ ```js
+ const base64String = components.filepicker1.file[0].base64Data
+ const decodedArray = new Uint8Array(atob(base64String).split('').map(c => c.charCodeAt(0)));
+ const file = new Blob([decodedArray], { type: components.filepicker1.file[0].type });
+ const fileName = components.filepicker1.file[0].name;
+ const fileObj = new File([file], fileName);
+
+ return fileObj
+ ```
+
+
+
+
+
+
+
+ - Create another **runjs2** query and copy-paste the code below. This query gets the data(file object) returned by the first runjs query, the url returned by the **uploadToS3** query, and then makes PUT request.
+ ```js
+ const file = queries.runjs2.data
+ const url = queries.s31.data.url
+
+ fetch(url, {
+ method: 'PUT',
+ body: file,
+ mode: 'cors',
+ headers: {
+ 'Access-Control-Allow-Origin': '*',
+ 'Content-Type': 'application/json'
+ }
+ })
+ .then(response => console.log('Upload successful!'))
+ .catch(error => console.error('Error uploading file:', error));
+ ```
+ :::warning Enable Cross Origin Resource Sharing(CORS)
+ - For the file to be uploaded successfully, you will need to add the CORS policies from the **Permissions** tab of your **Bucket** settings. Here's a sample CORS:
+ ```json
+ [
+ {
+ "AllowedHeaders": [
+ "*"
+ ],
+ "AllowedMethods": [
+ "GET",
+ "PUT",
+ "POST"
+ ],
+ "AllowedOrigins": [
+ "*"
+ ],
+ "ExposeHeaders": []
+ }
+ ]
+ ```
+ :::
+
+
+
+
+
+
+
+- Go to the **uploadToS3**, scroll down and add an event handler to the **uploadToS3** query. Select the **Query Success** event, **Run Query** as the action, and **runjs1** as the query to be triggered. **Save** the query.
+
+
+
+
+
+
+- Let's go to the **runjs1** query and add the event handler to run a query on query success event, similar to how we did in the previous step. In the event handler, choose **runjs2** query. **Save** the query.
+
+
+
+
+
+
+- Now, let's go the final query **copySignedURL** that is connected to the table's action button. This query copy's the generated **Signed URL for download** onto the **clipboard**.
+
+
+
+
+
+
+- Now that we have updated all the queries, and connected them through the event handlers. We can go ahead and pick a file from the file picker. Click on the file picker, select a file and then hit the **Upload file to S3** button.
+
+
+
+
+
+
+- Once the button is clicked, the **uploadToS3** will triggered along with the **runjs1** and **runjs2** queries in sequence since we added them in the event handlers.
+
+- You can go to the table and click on the **Copy signed URL** action button on the table, this will trigger the **copySignedURL** query and will copy the URL on the clipboard. You can go to another tab and paste the URL to open the file on the browser.
+
diff --git a/docs/versioned_docs/version-2.3.0/Enterprise/superadmin.md b/docs/versioned_docs/version-2.3.0/Enterprise/superadmin.md
index 10ebe5551b..43332fd236 100644
--- a/docs/versioned_docs/version-2.3.0/Enterprise/superadmin.md
+++ b/docs/versioned_docs/version-2.3.0/Enterprise/superadmin.md
@@ -17,13 +17,14 @@ The user details entered while setting up ToolJet will have Super Admin privileg
| Manage Groups in their workspace (Create Group/Add or Delete Users from groups/ Modify Group Permissions) | ✅ | ✅ |
| Manage SSO in their workspace | ✅ | ✅ |
| Manage Workspace Variables in their workspace | ✅ | ✅ |
+| [Manage Global datasources for the user group in their workspace](/docs/data-sources/overview#permissions) | ✅ | ✅ |
| [Access any user's personal workspace (create, edit or delete apps)](#access-any-workspace) | ❌ | ✅ |
| [Archive Admin or any user of any workspace](#archiveunarchive-users) | ❌ | ✅ |
| [Access any user's ToolJet database (create, edit or delete database)](#access-tooljet-db-in-any-workspace) | ❌ | ✅ |
| [Manage any workspace's setting (Groups/SSO/Workspace Variables)](#manage-workspace-setting-groupsssoworkspace-variables) | ❌ | ✅ |
| [Manage all users from all the workspaces in the instance](#checking-all-the-users-in-the-instance) | ❌ | ✅ |
| [Make any user Super Admin](#make-the-user-super-admin) | ❌ | ✅ |
-| [Restrict personal workspace of invited users](#allow-users-to-create-personal-workspace) | ❌ | ✅ |
+| [Restrict creation of personal workspace of users](#restrict-creation-of-personal-workspace-of-users) | ❌ | ✅ |
@@ -117,11 +118,11 @@ The user will become Super Admin and the Type column will update from **`workspa
-### Allow users to create personal workspace
+### Restrict creation of personal workspace of users
When a user joins a workspace, they are provided with their own personal workspace and option to create new workspaces.
-Super Admins can control this behavior from the Manage Instance Settings page, they can **toggle off** the option to **Allow personal workspace**. Now whenever a user joins a workspace they won't be provided a personal workspace nor they will be able to create a new workspace in the instance.
+Super Admins can **control** this behavior from the Manage Instance Settings page, they can **toggle off** the option to **Allow personal workspace**. Now whenever a user joins a workspace they won't be provided a personal workspace nor they will be able to create a new workspace in the instance.
diff --git a/docs/versioned_docs/version-2.3.0/data-sources/overview.md b/docs/versioned_docs/version-2.3.0/data-sources/overview.md
index ec7527f8af..7e72107e61 100644
--- a/docs/versioned_docs/version-2.3.0/data-sources/overview.md
+++ b/docs/versioned_docs/version-2.3.0/data-sources/overview.md
@@ -3,9 +3,13 @@ id: overview
title: Overview
---
-# Datasources : Overview
+# Global Datasources : Overview
-Datasources pull in and push data to any source including databases, external APIs, or services.
+Global datasources pull in and push data to any source including databases, external APIs, or services. Once a global datasource is connected to a workspace, the connection can be shared with any app of that workspace.
+
+:::caution
+Global datasources are available only on **ToolJet version 2.3.0 and above**.
+:::
@@ -13,30 +17,115 @@ Datasources pull in and push data to any source including databases, external AP
-## Connecting datasources
+## Connecting global datasources
-1. After logging in to ToolJet, create a new app from the dashboard
+1. From the ToolJet dashboard, go to the **global datasources page** from the left sidebar.
+
-2. There are two ways for connecting a datasource. You can connect from:
- 1. **Left-sidebar**: On the left sidebar, click on the `datasource` icon and then click on the `+ add datasource` button
+
-
+
-
+2. Click on the **Add new datasource** button, a modal will pop-up with all the available global datasources.
+
-
+
- 2. **Query Panel**: Go to the query panel at the bottom, click on the `+Add` button and then click `Add datasource` button
+
-
+3. Select the datasource, enter the **Credentials** and **Save** the datasource.
+
-
+
-
+
-3. Follow the steps in the **[Datasource Library](/docs/data-sources/airtable)** specific to the desired datasource
+4. Now, go back to the dashboard, create a new app, and the datasource will be available on the query panel under **Global Datasources**. Added datasources will be available on any of the **existing** or the **new applications**.
+
+
+
+
+
+
+5. You can now create queries of the connected global datasource. From the queries, you'll be able to switch to **different connections** of the same datasource if there are more than one connections created.
+
+
+
+
+
+
+## Changing scope of datasources of an app created on older versions of ToolJet
+
+On ToolJet versions below 2.3.0, the datasource connection was made from within the individual apps. To make it backward compatible, we added an option to change the scope of the datasources and make it global datasource.
+
+1. If you open an app created on previos versions of ToolJet, you'll find the datasource manager on the left sidebar of the App Builder.
+
+
+
+
+
+
+2. Click on the kebab menu next to the connected datasource, select the **change scope** option.
+
+
+
+
+
+
+3. Once you change the scope of the datasource and make it global, you'll see that the **datasource manager** is removed from the left sidebar and now you'll find the datasource on the **query panel** under Global Datasources. You can now configure the datasource fromt the Global Datasource page on the **dashboard**.
+
+
+
+
+
+
+
+## Default datasources
+
+By default, 4 datasources will be available on every app on ToolJet:
+- **[ToolJet Database](/docs/tooljet-database/)**
+- **[RestAPI](/docs/data-sources/restapi/)**
+- **[Run JavaScript Query](/docs/data-sources/run-js/)**
+- **[Run Python Query](/docs/data-sources/run-py/)**
+
+
+
+
+
+
+
+## Permissions
+
+Only **Admins** and **[Super Admins](/docs/Enterprise/superadmin)** of the workspace can change the **[Permissions](/docs/tutorial/manage-users-groups#group-properties)** for Global Datasource.
+
+From **Workspace Settings** -> **Groups Settings**, Admins and Super Admins can set the permission for a user group to:
+
+- **Create** and **Delete** datasources onto that workspace. If only **Create** permission is set then the users of the group will only be able to add new datasources on the workspace, and if only **Delete** permission is set then the users of the group will only be able to delete the connected datasources on the workspace.
+
+
+
+
+
+
+ - If any of the permission(Create or Delete) is not enabled for a user group then the users of the group will get an error toast when they try to Add or Delete the global datasource.
+
+
+
+
+
+
+- **View** or **Edit** allowed global datasources from the **Datasources** tab. If only **View** permission is set then the users of the group will only be able to connect to the allowed datasource, and if only **Edit** permission is set then the users of the group will be able to update the credentials of the allowed datasources.
+
+
+
+
+
+
+ - If any of the permission(View or Edit) is not enabled for a user group then the users of the group will get an error toast when they try to Add or Delete the global datasource.
+
+
+
+
+
-:::info
-ToolJet allows you to transform the data returned by datasources using **[Transformations](/docs/tutorial/transformations)**
-:::
diff --git a/docs/versioned_docs/version-2.3.0/getting-started.md b/docs/versioned_docs/version-2.3.0/getting-started.md
index 3d944f62c9..71f3aa3166 100644
--- a/docs/versioned_docs/version-2.3.0/getting-started.md
+++ b/docs/versioned_docs/version-2.3.0/getting-started.md
@@ -107,7 +107,7 @@ Learn more about the **[ToolJet Database here](/docs/tooljet-database)**
### Create a new application
-1. To create a new ToolJet application, go to the **Dashboard** -> **New App from scratch**.
+1. To create a new ToolJet application, go to the **Dashboard** -> **Create new application**.
diff --git a/docs/versioned_docs/version-2.3.0/how-to/intentionally-fail-js-query.md b/docs/versioned_docs/version-2.3.0/how-to/intentionally-fail-js-query.md
new file mode 100644
index 0000000000..bc7750ec4c
--- /dev/null
+++ b/docs/versioned_docs/version-2.3.0/how-to/intentionally-fail-js-query.md
@@ -0,0 +1,23 @@
+---
+id: intentionally-fail-js-query
+title: Intentionally fail a RunJS query
+---
+
+In this how-to guide, we will create a RunJS query that will throw an error.
+
+- Create a RunJS query and paste the code below. We will use the constructor `ReferenceError` since it is used to create a range error instance.
+ ```js
+ throw new ReferenceError('This is a reference error.');
+ ```
+
+- Now, add a event handler to show an alert when the query fails. **Save** the query and **Run** it.
+
+
+
+
+
+
+
+:::info
+Most common use-case for intentionally failing a query is **debugging**.
+:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/how-to/use-s3-presigned-url-to-upload-docs.md b/docs/versioned_docs/version-2.3.0/how-to/use-s3-presigned-url-to-upload-docs.md
new file mode 100644
index 0000000000..61dd6448d3
--- /dev/null
+++ b/docs/versioned_docs/version-2.3.0/how-to/use-s3-presigned-url-to-upload-docs.md
@@ -0,0 +1,173 @@
+---
+id: use-s3-signed-url-to-upload-docs
+title: Use S3 signed URL to upload documents
+---
+
+# Use S3 signed URL to upload documents
+
+In this how-to guide, you'll learn to upload documents to S3 buckets using the **S3 signed URL** from a ToolJet application.
+
+For this guide, We are going to use one of the existing templates on ToolJet: **S3 File explorer**
+
+:::info using Templates
+On ToolJet Dashboard, Click on the down arrow on the right of the **New App** button, from the dropdown choose the **Choose from template** option.
+:::
+
+
+
+
+
+
+
+- Once you've created a new app using the template, you'll be prompted to create a **new version** of the existing version. After creating a new version, you'll be able to make changes in the app.
+
+
+
+
+
+
+
+- Go to the **datasource manager** on the left-sidebar, you'll find that the **AWS S3 datasource** is already added. All you need to do is update the datasource **credentials**.
+
+ :::tip
+ Check the [AWS S3 datasource reference](/docs/data-sources/s3) to learn more about connnection and choosing your preferred authentication method.
+ :::
+
+
+
+
+
+
+
+- Once the datasource is connected successfully, go to the query manager and **Run** the **getBuckets** query. The operation selected in the getBuckets query is **List Buckets** which will fetch an array of all the buckets.
+
+
+
+
+
+
+
+- Running the **getBuckets** query will load all the buckets in the dropdown in the app.
+
+
+
+
+
+
+
+- Select a **bucket** from the dropdown and click on the **Fetch files** button to list all the files from the selected bucket on the table. The **Fetch files** button has the event handler added that triggers the **s32** query, the **s32** query uses the **List objects in a bucket** operation, and the bucket field in the query gets the value dynamically from the dropdown.
+
+
+
+
+
+
+
+- Let's go to the **uploadToS3** query and update the field values:
+ - **Operation**: Signed URL for upload
+ - **Bucket**: `{{components.dropdown1.value}}` this will fetch the dynamic value from the dropdown
+ - **Key**: `{{components.filepicker1.file[0].name}}` this will get the file name from the filepickers exposed variables
+ - **Expires in:** This sets an expiration time of URL, by default its `3600` seconds (1 hour)
+ - **Content Type**: `{{components.filepicker1.file[0].type}}` this will get the file type from the filepickers exposed variables
+
+
+
+
+
+
+
+- Create two **RunJS** queries:
+ - Create a **runjs1** query and copy-paste the code below. This query gets the **base64data** from the file picker and convert the file's `base64Data` to into `BLOB`, and returns the file object.
+ ```js
+ const base64String = components.filepicker1.file[0].base64Data
+ const decodedArray = new Uint8Array(atob(base64String).split('').map(c => c.charCodeAt(0)));
+ const file = new Blob([decodedArray], { type: components.filepicker1.file[0].type });
+ const fileName = components.filepicker1.file[0].name;
+ const fileObj = new File([file], fileName);
+
+ return fileObj
+ ```
+
+
+
+
+
+
+
+ - Create another **runjs2** query and copy-paste the code below. This query gets the data(file object) returned by the first runjs query, the url returned by the **uploadToS3** query, and then makes PUT request.
+ ```js
+ const file = queries.runjs2.data
+ const url = queries.s31.data.url
+
+ fetch(url, {
+ method: 'PUT',
+ body: file,
+ mode: 'cors',
+ headers: {
+ 'Access-Control-Allow-Origin': '*',
+ 'Content-Type': 'application/json'
+ }
+ })
+ .then(response => console.log('Upload successful!'))
+ .catch(error => console.error('Error uploading file:', error));
+ ```
+ :::warning Enable Cross Origin Resource Sharing(CORS)
+ - For the file to be uploaded successfully, you will need to add the CORS policies from the **Permissions** tab of your **Bucket** settings. Here's a sample CORS:
+ ```json
+ [
+ {
+ "AllowedHeaders": [
+ "*"
+ ],
+ "AllowedMethods": [
+ "GET",
+ "PUT",
+ "POST"
+ ],
+ "AllowedOrigins": [
+ "*"
+ ],
+ "ExposeHeaders": []
+ }
+ ]
+ ```
+ :::
+
+
+
+
+
+
+
+- Go to the **uploadToS3**, scroll down and add an event handler to the **uploadToS3** query. Select the **Query Success** event, **Run Query** as the action, and **runjs1** as the query to be triggered. **Save** the query.
+
+
+
+
+
+
+- Let's go to the **runjs1** query and add the event handler to run a query on query success event, similar to how we did in the previous step. In the event handler, choose **runjs2** query. **Save** the query.
+
+
+
+
+
+
+- Now, let's go the final query **copySignedURL** that is connected to the table's action button. This query copy's the generated **Signed URL for download** onto the **clipboard**.
+
+
+
+
+
+
+- Now that we have updated all the queries, and connected them through the event handlers. We can go ahead and pick a file from the file picker. Click on the file picker, select a file and then hit the **Upload file to S3** button.
+
+
+
+
+
+
+- Once the button is clicked, the **uploadToS3** will triggered along with the **runjs1** and **runjs2** queries in sequence since we added them in the event handlers.
+
+- You can go to the table and click on the **Copy signed URL** action button on the table, this will trigger the **copySignedURL** query and will copy the URL on the clipboard. You can go to another tab and paste the URL to open the file on the browser.
+
diff --git a/docs/versioned_docs/version-2.3.0/org-management/permissions.md b/docs/versioned_docs/version-2.3.0/org-management/permissions.md
index 5e33f5cb2c..b13433e0ef 100644
--- a/docs/versioned_docs/version-2.3.0/org-management/permissions.md
+++ b/docs/versioned_docs/version-2.3.0/org-management/permissions.md
@@ -8,7 +8,7 @@ Permissions allow you to create and share resources to easily ensure what level
Admins can invite **Users** to their workspaces and assign them to the **Groups** that have Permissions to access Apps, folders, or workspace variables.
:::info
-See **[Manage Users and Groups](/docs/tutorial/manage-users-groups)** to learn how to invite users to ToolJet.
+See **[Manage Users and Groups](/docs/tutorial/manage-users-groups)** to know more about managing users and groups on your workspace.
:::
## Role-Based Access Control (RBAC) Glossary
@@ -18,4 +18,4 @@ See **[Manage Users and Groups](/docs/tutorial/manage-users-groups)** to learn h
- **All Users** - Contains all the users in your workspace. When **New Users** are invited they are added to this group by default.
- **Admins** - Contains all Admins in your workspace. Everyone added to this group will Permission to access all the ToolJet resources.
- **Apps, Folder, Workspace Variables -** Resources that Admins can set permissions on.
-- **Permissions -** Create, Update and Delete.
+- **Permissions -** Create, Update and Delete.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/tutorial/manage-users-groups.md b/docs/versioned_docs/version-2.3.0/tutorial/manage-users-groups.md
index 95991fd7fa..5877d2f075 100644
--- a/docs/versioned_docs/version-2.3.0/tutorial/manage-users-groups.md
+++ b/docs/versioned_docs/version-2.3.0/tutorial/manage-users-groups.md
@@ -77,7 +77,7 @@ Similar to archiving a user's access, you can enable it again by clicking on **U
## Managing Groups
-On ToolJet, Admins can create groups for users added in a workspace and grant them access to particular app(s) with specific permissions. To manage groups, just go to the **Workspace Settings** from the left-sidebar of the dashboard and click on the **Groups**.
+On ToolJet, Admins and Super Admins can create groups for users added in a workspace and grant them access to particular app(s) with specific permissions. To manage groups, just go to the **Workspace Settings** from the left-sidebar of the dashboard and click on the **Groups**.
@@ -87,11 +87,16 @@ On ToolJet, Admins can create groups for users added in a workspace and grant th
### Group properties
-Every group on ToolJet has three sections:
+Every group on ToolJet has **four** sections:
+
+- [Apps](#apps)
+- [Users](#users)
+- [Permissions](#permissions)
+- [Datasources](#datasources)
#### Apps:
-Admins can add or remove any number of apps for a group of users. To add an app to a group, select an app from the dropdown and click on `Add` button next to it. You can also set app permissions such as `View` or `Edit` for the group. You can set different permissions for different apps in a group.
+Admins and Super Admins can add or remove any number of apps for a group of users. To add an app to a group, select an app from the dropdown and click on `Add` button next to it. You can also set app permissions such as `View` or `Edit` for the group. You can set different permissions for different apps in a group.
@@ -101,7 +106,7 @@ Admins can add or remove any number of apps for a group of users. To add an app
#### Users:
-Admins can add or remove any numbers of users in a group. Just select a user from the dropdown and click on `Add` button to add it to a group. To delete a user from a group, click on `Delete` button next to it.
+Admins and Super Admins can add or remove any numbers of users in a group. Just select a user from the dropdown and click on `Add` button to add it to a group. To delete a user from a group, click on `Delete` button next to it.
@@ -111,16 +116,30 @@ Admins can add or remove any numbers of users in a group. Just select a user fro
#### Permissions:
-Admins can set granular permission like creating/deleting apps or creating folder for a group of users.
+Admins and Super Admins can set granular permission for the users added in that particular group, such as:
+- **Create** and **Delete** Apps
+- **Create**, **Update**, and **Delete** Folders
+- **Create**, **Update**, and **Delete** [Workspace Variables](/docs/tutorial/workspace-variables)
+- **Create** and **Delete** [Global Datasources](/docs/data-sources/overview)
-
+
+
+
+
+#### Datasources:
+
+Only Admins and Super Admins can define what datasources can be **viewed** or **edited** by the users of that group.
+
+
+
+
:::tip
-All the activities performed by any Admin or any user in a workspace is logged in `Audit logs` - including any activity related with managing users and groups.
+All the activities performed by any Admin, Super Admin or any user in a workspace is logged in [Audit logs](/docs/Enterprise/audit_logs) - including any activity related with managing users and groups.
:::
### Predefined Groups
diff --git a/docs/versioned_docs/version-2.3.0/widgets/bounded-box.md b/docs/versioned_docs/version-2.3.0/widgets/bounded-box.md
index 4a7edb33be..6148c1cc6d 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/bounded-box.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/bounded-box.md
@@ -97,4 +97,24 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed variables
+
+| variable | Description |
+| ----------- | ----------- |
+| annotations | This variable is an array of objects, where each object represents an annotation added to an image. The object contains the following keys: type, x, y, width, height, text, and id |
+| annotations.`type` | There are two types of annotations: Rectangle and Point |
+| annotations.`x` | coordinates on x axis |
+| annotations.`y` | coordinates on y axis |
+| annotations.`width` | width of annotation |
+| annotations.`height` | height of annotation |
+| annotations.`text` | label selected for the annotation |
+| annotations.`id` | unique id of the annotation (system generated) |
+
+The values can be accessed dynamically using `{{components.boundedbox1.annotations[0].text}}` or `{{components.boundedbox1.annotations[1].width}}`
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the bounding box component.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/button-group.md b/docs/versioned_docs/version-2.3.0/widgets/button-group.md
index f415e830c7..09c5821663 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/button-group.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/button-group.md
@@ -92,4 +92,15 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| selected | If the "enable multiple selection" option is turned off, then the variable is an array of objects, and the first object holds the value of the selected button. However, if the "enable multiple selection" option is turned on, the variable type changes from an array to an object, and the selected button values are stored as a string within that object. The value can be accessed using `{{components.buttongroup1.selected[0]}}` or `{{components.buttongroup1.selected}}` |
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the button-group component.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/button.md b/docs/versioned_docs/version-2.3.0/widgets/button.md
index dd86c3b615..0d64c4bd6e 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/button.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/button.md
@@ -93,4 +93,20 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+Following actions of button component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| click | You can regulate the click of a button via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.button1.click()` |
+| setText | button's text can be controlled using component specific action from any of the event handler. You can also use RunJS query to execute component specific actions: `await components.button1.setText('New Button Text')` |
+| disable | button can be disabled using the component specific action from any of the event handler. You can also use RunJS query to execute this action: `await components.button1.disable(true)` or `await components.button1.disable(false)` |
+| visibility | button's visibility can be switched using the component specific action from any of the event handler. You can also use RunJS query to execute this action: `await components.button1.disable(true)` or `await components.button1.disable(false)` |
+| loading | The loading state of the button can be set dynamically using the component specific actions from any of the event handler. You can also use this action from RunJS: `await components.button1.loading(true)` or `await components.button1.loading(false)` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/calendar.md b/docs/versioned_docs/version-2.3.0/widgets/calendar.md
index 454a2393da..115935cd52 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/calendar.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/calendar.md
@@ -197,3 +197,15 @@ This format determines how the column header for each day in week view will be d
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| selectedEvent | This variable stores information about the event that has been chosen on the calendar component. This object comprises keys like **title**, **start**, **end**, **allDay**, and **color**, and they can be accessed dynamically through JS using the following syntax: `{{components.calendar1.selectedEvent.title}}` or `{{components.calendar1.selectedEvent.start}}` |
+| selectedSlots | The variable selectedSlots contains the values of the slots chosen on the calendar component. This object comprises keys like **slots**, **start**, **end**, **resourceId**, and **action**, and they can be accessed dynamically through JS using the following syntax: {{components.calendar1.selectedSlots.slots[0]}} or {{components.calendar1.selectedSlots.end}}. |
+| currentView | The currentView variable holds the type of view currently set on the calendar. The value updates when the user changes the view from the calendar header. Types of views supported: `month`, `week`, and `day`. The value can be accessed using `{{components.calendar1.currentView}}` |
+| currentDate | The currentDate variable holds the current date data. The date returned by the variable is in the `MM-DD-YYYY HH:mm:ss A Z` format. The value can be accessed using `{{components.calendar1.currentDate}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the calendar component.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/chart.md b/docs/versioned_docs/version-2.3.0/widgets/chart.md
index 9760de273f..5db81b7e06 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/chart.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/chart.md
@@ -387,3 +387,11 @@ Toggle on or off to control the visibility of the widget. You can programmatical
### Disable
This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/checkbox.md b/docs/versioned_docs/version-2.3.0/widgets/checkbox.md
index dbdc0f0650..9e6639d508 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/checkbox.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/checkbox.md
@@ -101,8 +101,16 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Actions
+## Exposed Variables
-| Action | Description | Properties |
-| ----------- | ----------- | ------------------ |
-| `setChecked` | Set checkbox state. | pass status as parameter. ex: `components.checkbox1.setChecked(true)` |
\ No newline at end of file
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the boolean value `true` if the checkbox is checked and `false` if unchecked. You can access the value dynamically using JS: `{{components.checkbox1.value}}`|
+
+## Component specific actions (CSA)
+
+Following actions of checkbox component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setChecked | You can change the status of the checkbox component using component specific action from within any event handler. Additionally, you have the option to trigger it from the RunJS query: `await components.checkbox1.setChecked(true)` or `await components.checkbox1.setChecked(false)` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/circular-progressbar.md b/docs/versioned_docs/version-2.3.0/widgets/circular-progressbar.md
index 47064de88e..454c0464a0 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/circular-progressbar.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/circular-progressbar.md
@@ -75,4 +75,13 @@ Under the General accordion, you can set the value in the string format.
:::info
Circular progress bar widget uses [react-circular-progress](https://github.com/kevinsqi/react-circular-progressbar) package. Check the repo for further more details about properties and styles.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/code-editor.md b/docs/versioned_docs/version-2.3.0/widgets/code-editor.md
index 612593221e..6434cd0e3f 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/code-editor.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/code-editor.md
@@ -206,4 +206,14 @@ Under the General accordion, you can set the value in the string format.
| ----------- | ----------- |
| Visibility | Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`. |
| Disable | This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
-| Border radius | Use this property to modify the border radius of the editor. The field expects only numerical value from `1` to `100`, default is `0`. |
\ No newline at end of file
+| Border radius | Use this property to modify the border radius of the editor. The field expects only numerical value from `1` to `100`, default is `0`. |
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the value whenever the user inputs anything on the code-editor . You can access the value dynamically using JS: `{{components.codeeditor1.value}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/color-picker.md b/docs/versioned_docs/version-2.3.0/widgets/color-picker.md
index 36a8fc6658..2c3260315c 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/color-picker.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/color-picker.md
@@ -81,4 +81,20 @@ Any property having `Fx` button next to its field can be **programmatically conf
-
\ No newline at end of file
+
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| selectedColorHex | This variable gets updated with HEX color code whenever a user selects a color from the color picker. You can access the value dynamically using JS: `{{components.colorpicker1.selectedColorHex}}`|
+| selectedColorRGB | This variable gets updated with RGB color code whenever a user selects a color from the color picker. You can access the value dynamically using JS: `{{components.colorpicker1.selectedColorRGB}}`|
+| selectedColorRGBA | This variable gets updated with RGBA color code whenever a user selects a color from the color picker. You can access the value dynamically using JS: `{{components.colorpicker1.selectedColorRGBA}}`|
+
+## Component specific actions (CSA)
+
+Following actions of color picker component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setColor | Set a color on the color component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.colorpicker1.setColor('#64A07A')` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/container.md b/docs/versioned_docs/version-2.3.0/widgets/container.md
index fc58141f51..8fe5d3506a 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/container.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/container.md
@@ -57,4 +57,12 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/custom-component.md b/docs/versioned_docs/version-2.3.0/widgets/custom-component.md
index 385252605d..953e8dcd83 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/custom-component.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/custom-component.md
@@ -103,3 +103,14 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| data | This variable will hold the variables assigned inside the `code` for custom component. You can access the value dynamically using JS: `{{components.customcomponent1.data.title}}`|
+
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/date-range-picker.md b/docs/versioned_docs/version-2.3.0/widgets/date-range-picker.md
index 642c97b427..72ce95d38a 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/date-range-picker.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/date-range-picker.md
@@ -78,4 +78,17 @@ This property only accepts boolean values. If set to `{{true}}`, the widget will
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| endDate | This variable will hold the date of the endDate selected in the component. You can access the value dynamically using JS: `{{components.customcomponent1.data.title}}`|
+| startDate | This variable will hold the value assigned inside the `code` for custom component. You can access the value dynamically using JS: `{{components.customcomponent1.data.title}}`|
+
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/datepicker.md b/docs/versioned_docs/version-2.3.0/widgets/datepicker.md
index 19001e9fb6..22f19e4955 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/datepicker.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/datepicker.md
@@ -106,3 +106,13 @@ Use this property to modify the border radius of the date-picker. The field expe
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+## Exposed variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable will hold the date selected on the component, the date value will be returned according to the format set in the datepicker properties. You can access the value dynamically using JS: `{{components.datepicker1.value}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/divider.md b/docs/versioned_docs/version-2.3.0/widgets/divider.md
index b027ae96d2..399c75a1e7 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/divider.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/divider.md
@@ -53,4 +53,13 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/dropdown.md b/docs/versioned_docs/version-2.3.0/widgets/dropdown.md
index e4cdca4a72..9bd7ee5a9b 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/dropdown.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/dropdown.md
@@ -137,4 +137,10 @@ Any property having `Fx` button next to its field can be **programmatically conf
| Value | This variable holds the value of the currently selected item on the dropdown. Value can be accesed using `{{components.dropdown1.value}}` |
| searchText | This variable is initially empty and will hold the value whenever the user searches on the dropdown. searchText's value can be accesed using`{{components.dropdown1.searchText}}` |
| label | The variable label holds the label name of the dropdown. label's value can be accesed using`{{components.dropdown1.searchText}}` |
-| optionLabels | The optionLabels holds the option labels for the values of the dropdown. optionLabels can be accesed using`{{components.dropdown1.optionLabels}}` for all the option labels in the array form or `{{components.dropdown1.optionLabels[0]}}` for particular option label |
\ No newline at end of file
+| optionLabels | The optionLabels holds the option labels for the values of the dropdown. optionLabels can be accesed using`{{components.dropdown1.optionLabels}}` for all the option labels in the array form or `{{components.dropdown1.optionLabels[0]}}` for particular option label |
+
+## Component specific actions (CSA)
+
+| Actions | Description |
+| -------- | ----------- |
+| selectOption | You can set an option on the dropdown component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.dropdown1.setOption(1)` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/file-picker.md b/docs/versioned_docs/version-2.3.0/widgets/file-picker.md
index 6d7efd4219..380d2c9a65 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/file-picker.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/file-picker.md
@@ -165,8 +165,15 @@ Use this property to modify the border radius of the filepicker widget. The fiel
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Actions
-| Action | Description | Properties |
-| ----------- | ----------- | ------------ |
-| `clearFiles()` | It will clear the selected files | None |
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| file | This variable holds the array of objects where each object represents the file loaded on the file picker component. Each object has the following keys: **name**, **type**, **content**, **dataURL**, **base64Data**, **parsedData**, **filePath**. The values can be accesed using `{{components.filepicker1.file[0].base64Data}}` |
+
+## Component specific actions (CSA)
+
+| Actions | Description |
+| -------- | ----------- |
+| clearFiles() | You can clear the selected files on the filepicker component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.filepicker1.clearFiles()` |
diff --git a/docs/versioned_docs/version-2.3.0/widgets/form.md b/docs/versioned_docs/version-2.3.0/widgets/form.md
index 8d368d65fd..ba5f9e5e70 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/form.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/form.md
@@ -73,4 +73,21 @@ A Tooltip is often used to specify extra information about something when the us
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| data | This variable holds the data of all the components that are nested inside the form components. You can access the value dynamically using JS: `{{components.form1.data.numberinput1.value}}`|
+
+## Component specific actions (CSA)
+
+Following actions of form component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| resetForm | You can submit the form data via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.form1.resetForm()` |
+| submitForm | You can reset the form data via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await await components.form1.submitForm()` |
+
diff --git a/docs/versioned_docs/version-2.3.0/widgets/html.md b/docs/versioned_docs/version-2.3.0/widgets/html.md
index cdb523f9d7..a4f65f8734 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/html.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/html.md
@@ -70,3 +70,12 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/icon.md b/docs/versioned_docs/version-2.3.0/widgets/icon.md
index 9cd9fe3bd9..168824e22d 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/icon.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/icon.md
@@ -62,3 +62,17 @@ Check [Action Reference](/docs/category/actions-reference) docs to get the detai
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+Following actions of the component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setVisibility | You can toggle the visibility of the icon component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.icon1.setVisibility(false)` |
+| click | You can trigger the click action on icon component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.icon1.click()` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/iframe.md b/docs/versioned_docs/version-2.3.0/widgets/iframe.md
index 3157b9f979..3fdaf72c04 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/iframe.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/iframe.md
@@ -64,4 +64,13 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/image.md b/docs/versioned_docs/version-2.3.0/widgets/image.md
index f84ee6f9c3..6ca6250b6c 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/image.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/image.md
@@ -104,4 +104,13 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/kanban-board.md b/docs/versioned_docs/version-2.3.0/widgets/kanban-board.md
index 0dbb693192..5f55a31b80 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/kanban-board.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/kanban-board.md
@@ -118,6 +118,7 @@ Under the General accordion, you can set the value in the string format.
| Visibility | This is to control the visibility of the widget. If `{{false}}`/disabled the widget will not visible after the app is deployed. By default, it's enabled (set to `{{true}}`). |
| Accent color | You can change the accent color of the column title by entering the Hex color code or choosing a color of your choice from the color picker. |
+
## Exposed variables
@@ -134,4 +135,15 @@ Under the General accordion, you can set the value in the string format.
| lastCardMovement | The variable `lastCardMovement` holds the properties of the card that has been recently moved from its original position. It holds the following data - `originColumnId`, `destinationColumnId`, `originCardIndex`, `destinationCardIndex` and an object `cardDetails` which includes `id`, `title`, `description` and `columnId` of the moved card. You can get the values using `{{components.kanbanboard1.lastCardMovement.cardDetails.title}}` or `{{components.kanbanboard1.lastCardMovement.destinationCardIndex}}` |
| lastSelectedCard | The variable `lastSelectedCard` holds the `id`, `title`, `columnId`, and `description` of the last selected(clicked to view) card on the kanban. You can get the values using `{{components.kanban1.lastSelectedCard.columnId}}` |
| lastUpdatedCard | The variable `lastUpdatedCard` holds the `id`, `title`, `description`, and `columnId` of the last updated card(using componenet specific action). You can get the values using `{{components.kanban1.lastUpdatedCard.columnId}}` |
-| lastCardUpdate | The variable `lastCardUpdate` holds the old an new values of the property that has been changed in the card(using componenet specific action). You can get the values using `{{components.kanban1.lastCardUpdate[0].title.oldValue}}` |
\ No newline at end of file
+| lastCardUpdate | The variable `lastCardUpdate` holds the old an new values of the property that has been changed in the card(using componenet specific action). You can get the values using `{{components.kanban1.lastCardUpdate[0].title.oldValue}}` |
+
+## Component specific actions (CSA)
+
+Following actions of kanban component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| updateCardData | Update the card data of kanban component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `components.kanban1.updateCardData('c1', {title: 'New Title'})` |
+| moveCard | Move a card from one column to other column on the kanban via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.kanban1.moveCard('card id,'column id')` ex: `await components.kanban1.moveCard('c1','r2')` |
+| addCard | Add a card onto the kanban via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.kanban1.addCard('c1', {title: 'New Title'})` |
+| deleteCard | Delete a card from the kanban via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.kanban1.deleteCard('card id')` ex: `await components.kanban1.deleteCard('c2')` |
diff --git a/docs/versioned_docs/version-2.3.0/widgets/link.md b/docs/versioned_docs/version-2.3.0/widgets/link.md
index ca20002102..de7628dbab 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/link.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/link.md
@@ -65,4 +65,16 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+Following actions of link component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| click | You can trigger the click action of the link component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.link1.click()` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/listview.md b/docs/versioned_docs/version-2.3.0/widgets/listview.md
index 41a8d42385..288401f339 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/listview.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/listview.md
@@ -137,4 +137,15 @@ Any property having `Fx` button next to its field can be **programmatically conf
Use `{{listItem.key}}` to display data on the nested widgets. Example: For displaying the images we used `{{listItem.avatar}}` where **avatar** is one of the key in the objects from the query result.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| data | This variable holds the data loaded onto the listview component. You can access the data of each row of the listview using `{{components.listview1.data["0"].text1.text}}` |
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/map.md b/docs/versioned_docs/version-2.3.0/widgets/map.md
index 2469048e68..97b8764cc8 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/map.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/map.md
@@ -80,8 +80,21 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Actions
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| center | This variable will hold the latitude, longitude and the google map url value. |
+| center.`lat` | This variable holds the latitude value of the marker on the map component. You can access the value dynamically using JS: `{{components.map1.center.lat}}`|
+| centere.`lng` | This variable gets updated with RGB color code whenever a user selects a color from the color picker. You can access the value dynamically using JS: `{{components.map1.center.lng}}`|
+| center.`googleMapUrl` | This variable holds the URL of the location where the center marker is placed on the map component. You can access the value dynamically using JS: `{{components.map1.center.googleMapUrl}}`|
+| markers | The markers variable will hold the value only if `add new markers` is enabled from the map properties. Each marker is an object and will have `lat` and `lng` keys. Values can be accessed dynamically using `{{components.map1.markers[1].lat}}` |
+
+## Component specific actions (CSA)
+
+Following actions of map component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setLocation | Set the marker's location on map using latitude and longitude values as parameteres via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as: `component.map1.setLocation(40.7128, -73.935242)` |
-| Action | Description | Properties |
-| ----------- | ----------- | ------------------ |
-| `setLocation` | Set map's location. | Latitude and Longitude values as parameters. ex: `component.map1.setLocation(40.7128, -73.935242)` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/modal.md b/docs/versioned_docs/version-2.3.0/widgets/modal.md
index eb196123ac..3c0227b082 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/modal.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/modal.md
@@ -98,4 +98,19 @@ Toggle on or off to display the widget in mobile view. You can programmatically
:::info
Trigger Button styles are only visible when **Use default trigger button** under Options is toggled on.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+
+## Component specific actions (CSA)
+
+Following actions of modal component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| open | Control the opening and closing of the modal componennt via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.modal1.open()` |
+| close | Control the closing of the modal componennt via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.modal1.close()` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/multiselect.md b/docs/versioned_docs/version-2.3.0/widgets/multiselect.md
index cdc83f7ab9..d07d9358b4 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/multiselect.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/multiselect.md
@@ -75,15 +75,20 @@ Toggle on or off to control the visibility of the widget. You can programmatical
This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
-## Actions
+## Exposed Variables
-| Action | Description | Properties |
-| ----------- | ----------- | ------------------ |
-| `selectOption` | Select options. | pass options as parameter. ex: `components.multiselect1.selectOption(1)` |
-| `deselectOption` | Deselect options.| pass options as parameter. ex: `components.multiselect1.deselectOption(1)` |
-| `clearSelections` | Clear all selection. | ex: `components.multiselect1.clearSelections()` |
+| Variables | Description |
+| ----------- | ----------- |
+| values | This variable holds the values of the multiselect component in an array of objects where the objects are the options in the multiselect. You can access the value dynamically using JS: `{{components.multiselect1.values[1]}}` |
+## Component specific actions (CSA)
+await components.multiselect1.clearSelections()
+await components.multiselect1.deselectOption(2)
-:::info
-Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
+Following actions of multselect component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| selectOption | Select an option on the multiselect component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.multiselect1.selectOption(3)` |
+| deselectOption | Deselect a selected option on the multiselect component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.multiselect1.deselectOption(3)` |
+| clearOptions | Clear all the selected options from the multiselect component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.multiselect1.clearSelections(2,3)` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/number-input.md b/docs/versioned_docs/version-2.3.0/widgets/number-input.md
index f72242234c..115a1a37d1 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/number-input.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/number-input.md
@@ -94,4 +94,14 @@ Change the color of the number in number-input component by entering the Hex col
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable updates whenever a user selects a number on the number input. You can access the value dynamically using JS: `{{components.numberinput1.value}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/pagination.md b/docs/versioned_docs/version-2.3.0/widgets/pagination.md
index 2ee0003cc5..dae8985980 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/pagination.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/pagination.md
@@ -67,3 +67,14 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| totalPages | This variable holds the value of the `Number of Pages` set from the pagination component properties. You can access the value dynamically using JS: `{{components.pagination1.totalPages}}`|
+| currentPageIndex | This variable will hold the index of the currently selected option on the pagination component. You can access the value dynamically using JS: `{{components.pagination1.currentPageIndex}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/password-input.md b/docs/versioned_docs/version-2.3.0/widgets/password-input.md
index 019ec8fae3..b692c861a1 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/password-input.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/password-input.md
@@ -79,4 +79,15 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the value entered by the user onto the password input component. You can access the value dynamically using JS: `{{components.passwordinput1.value}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/pdf.md b/docs/versioned_docs/version-2.3.0/widgets/pdf.md
index bc665697fe..6af77f190f 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/pdf.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/pdf.md
@@ -54,3 +54,12 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/qr-scanner.md b/docs/versioned_docs/version-2.3.0/widgets/qr-scanner.md
index edab5ade23..db4bd789ef 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/qr-scanner.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/qr-scanner.md
@@ -69,3 +69,8 @@ Toggle on or off to control the visibility of the widget. You can programmatical
### Disable
This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
+
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/radio-button.md b/docs/versioned_docs/version-2.3.0/widgets/radio-button.md
index 9de2d08c16..26c3c5c725 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/radio-button.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/radio-button.md
@@ -94,8 +94,14 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
-## Actions
+## Exposed variables
-| Action | Description | Properties |
-| ----------- | ----------- | ------------------ |
-| selectOption | Select an option from the radio buttons. | `option` eg: `component.radiobutton1.selectOption('one')` |
\ No newline at end of file
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+Following actions of color picker component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| selectOption | Select an option from the radio buttons via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as: `await components.radiobutton1.selectOption('one')` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/range-slider.md b/docs/versioned_docs/version-2.3.0/widgets/range-slider.md
index 5c58220496..6a833e7571 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/range-slider.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/range-slider.md
@@ -74,3 +74,14 @@ Set the visivlity of the slider programmatically. The default value is `{{true}}
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds an object when `two handles` option is disabled or an array when `two handles` is enabled from the component properties. The value can be accessed dynamically using JS: `{{components.rangeslider1.value}}` or `{{components.rangeslider1.value[1]}}` |
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/rich-text-editor.md b/docs/versioned_docs/version-2.3.0/widgets/rich-text-editor.md
index 2267259807..96449ca498 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/rich-text-editor.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/rich-text-editor.md
@@ -54,3 +54,14 @@ Toggle on or off to control the visibility of the widget. You can programmatical
### Disable
This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
+
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the value whenever a user enters a value in the rich text editor component. You can access the value dynamically using JS: `{{components.richtexteditor1.value}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/spinner.md b/docs/versioned_docs/version-2.3.0/widgets/spinner.md
index 8557673342..06fed77b84 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/spinner.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/spinner.md
@@ -46,4 +46,13 @@ Change the color of the Spinner by entering the `Hex color code` or choosing a c
### Size
-Change the size of the Spinner by selecting options from the dropdown. It has small and large sizes available.
\ No newline at end of file
+Change the size of the Spinner by selecting options from the dropdown. It has small and large sizes available.
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/star-rating.md b/docs/versioned_docs/version-2.3.0/widgets/star-rating.md
index d204438589..39040129a0 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/star-rating.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/star-rating.md
@@ -83,3 +83,14 @@ Toggle on or off to control the visibility of the widget. You can programmatical
### Disable
This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
+
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the value whenever a rating is added on the component. The variable holds a numerical value. You can access the value dynamically using JS: `{{components.colorpicker1.selectedColorHex}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/statistics.md b/docs/versioned_docs/version-2.3.0/widgets/statistics.md
index b2fa668f13..28bbf365cb 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/statistics.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/statistics.md
@@ -91,3 +91,12 @@ Toggle on or off to control the visibility of the widget. You can programmatical
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/steps.md b/docs/versioned_docs/version-2.3.0/widgets/steps.md
index 5c486e0ecb..f43628f9c3 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/steps.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/steps.md
@@ -89,4 +89,14 @@ Toggle on or off to control the visibility of the widget. You can programmatical
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| currentStepId | This variable holds the id of the currently selected step on the step component. You can access the value dynamically using JS: `{{components.steps1.currentStepId}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/svg-image.md b/docs/versioned_docs/version-2.3.0/widgets/svg-image.md
index 76500c1eb8..b3a7a5ac7f 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/svg-image.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/svg-image.md
@@ -56,4 +56,12 @@ Toggle on or off to display the widget in mobile view. You can programmatically
### Visibility
-Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`.
\ No newline at end of file
+Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`.
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/table.md b/docs/versioned_docs/version-2.3.0/widgets/table.md
index 15b05f6fbd..93f9c5dff2 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/table.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/table.md
@@ -327,3 +327,16 @@ This event is triggered when filter is added, removed, or updated from the filte
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+
+## Component specific actions (CSA)
+
+Following actions of color picker component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setPage | Set the page on the table via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.setPage(2)` |
+| selectRow | Select the row on the table using via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.selectRow('id','11')` |
+| deselectRow | Deselect the row on the table via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.deselectRow()` |
+| discardChanges | Discard the changes from the table when a cell is edited via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.discardChanges()` |
+| discardNewlyAddedRows | Discard the newly added rows from the add new row popup on the table via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.discardNewlyAddedRows()` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/tabs.md b/docs/versioned_docs/version-2.3.0/widgets/tabs.md
index 0bfa2a8a2a..60930903ce 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/tabs.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/tabs.md
@@ -113,4 +113,18 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| currentTab | This variable holds the id of the current tab selected on the tabs component. You can access the value dynamically using JS: `{{components.tabs1.currentTab}}`|
+
+## Component specific actions (CSA)
+
+Following actions of Tabs component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setTab | Set the current tab of the tabs component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.tabs1.setTab(1)` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/tags.md b/docs/versioned_docs/version-2.3.0/widgets/tags.md
index ea01906c69..468a37f05d 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/tags.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/tags.md
@@ -57,4 +57,12 @@ Toggle on or off to display the widget in mobile view. You can programmatically
### Visibility
-Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`.
\ No newline at end of file
+Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`.
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/text-input.md b/docs/versioned_docs/version-2.3.0/widgets/text-input.md
index 17bf8d9003..6e02dcd90d 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/text-input.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/text-input.md
@@ -109,3 +109,22 @@ This property only accepts boolean values. If set to `{{true}}`, the widget will
:::info
Check the **component specific actions** available for this component **[here](/docs/actions/control-component)**.
:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the value whenever user a user inputs a value in the component. You can access the value dynamically using JS: `{{components.textinput1.value}}`|
+
+## Component specific actions (CSA)
+
+Following actions of text input component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setFocus | Set the focus of the cursor on the text input via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textinput1.setFocus()` |
+| setBlur | Removes the focus of the cursor on the text input via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textinput1.setBlur()` |
+| disable | disable the component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textinput1.disable(true)` |
+| visibility | Set a visibility of the text input via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textinput1.visibility(false)` |
+| setText | Set a text value on the text input component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textinput1.setText('this is input text')` |
+| clear | Clear the entered text from the text input via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textinput1.clear()` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/text.md b/docs/versioned_docs/version-2.3.0/widgets/text.md
index 8b526f6269..6f64632db3 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/text.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/text.md
@@ -74,4 +74,19 @@ This property only accepts boolean values. If set to `{{true}}`, the widget will
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| text | This variable gets updated with HEX color code whenever a user selects a color from the color picker. You can access the value dynamically using JS: `{{components.colorpicker1.selectedColorHex}}`|
+
+## Component specific actions (CSA)
+
+Following actions of color picker component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| visibility | Set a visibility of the text via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.text1.visibility(false)` |
+| setText | Set a text value on the text component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.text1.setText('this is a text')` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.3.0/widgets/textarea.md b/docs/versioned_docs/version-2.3.0/widgets/textarea.md
index 8ff2513929..8b46c23805 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/textarea.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/textarea.md
@@ -58,12 +58,21 @@ This is to control the visibility of the widget. If `{{false}}` the widget will
This property only accepts boolean values. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
-## Actions
-| Action | Description | Properties |
-| ----------- | ----------- | ------------------ |
-| setText | Set the text. | `text` |
-| clear | Clear the text. | |
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the value of the text area component. You can access the value dynamically using JS: `{{components.textarea1.value}}`|
+
+## Component specific actions (CSA)
+
+Following actions of color picker component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setText | Set the text on the text area component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textarea1.setText('this is a text')` |
+| clear | clear the value from the text area component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.text1.clear()` |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/timeline.md b/docs/versioned_docs/version-2.3.0/widgets/timeline.md
index f2d2bdd7e2..35a2945cbd 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/timeline.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/timeline.md
@@ -61,3 +61,12 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
diff --git a/docs/versioned_docs/version-2.3.0/widgets/timer.md b/docs/versioned_docs/version-2.3.0/widgets/timer.md
index 18ba85b865..ec7c14a23d 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/timer.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/timer.md
@@ -77,4 +77,13 @@ This property only accepts boolean values. If set to `{{true}}`, the widget will
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the value of the timer in the following keys: **hour**, **minute**, **second**, and **mSecond**. You can access the value dynamically using JS: `{{components.timer1.value.second}}`|
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/toggle-switch.md b/docs/versioned_docs/version-2.3.0/widgets/toggle-switch.md
index 56e2ed715d..4d11ed9ecf 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/toggle-switch.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/toggle-switch.md
@@ -73,4 +73,14 @@ This property only accepts boolean values. If set to `{{true}}`, the widget will
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the boolean value i.e `true` or `false` when the toggle is on or off respectively. You can access the value dynamically using JS: `{{components.toggleswitch1.value}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/tree-select.md b/docs/versioned_docs/version-2.3.0/widgets/tree-select.md
index 64b72798a1..5bccb5c366 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/tree-select.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/tree-select.md
@@ -155,3 +155,16 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| checked | This variable holds the value of all the checked items on the tree select component. You can access the value dynamically using JS: `{{components.treeselect1.checked[1]}}`|
+| expanded | This variable holds the value of expanded items on the tree select component. You can access the value dynamically using JS: `{{components.treeselect1.expanded[0]}}`|
+| checkedPathArray | This variable holds the path of the checked items in differet arrays. You can access the value dynamically using JS: `{{components.treeselect1.checkedPathArray[1][1]}}`|
+| checkedPathStrings | This variable holds the path of the checked items in strings separated by a dash(-). You can access the value dynamically using JS: `{{components.treeselect1.checkedPathStrings[2]}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.3.0/widgets/vertical-divider.md b/docs/versioned_docs/version-2.3.0/widgets/vertical-divider.md
index 8cf2894a1c..769920cd73 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/vertical-divider.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/vertical-divider.md
@@ -54,4 +54,12 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.4.0/Enterprise/superadmin.md b/docs/versioned_docs/version-2.4.0/Enterprise/superadmin.md
index 63262b98e9..43332fd236 100644
--- a/docs/versioned_docs/version-2.4.0/Enterprise/superadmin.md
+++ b/docs/versioned_docs/version-2.4.0/Enterprise/superadmin.md
@@ -17,6 +17,7 @@ The user details entered while setting up ToolJet will have Super Admin privileg
| Manage Groups in their workspace (Create Group/Add or Delete Users from groups/ Modify Group Permissions) | ✅ | ✅ |
| Manage SSO in their workspace | ✅ | ✅ |
| Manage Workspace Variables in their workspace | ✅ | ✅ |
+| [Manage Global datasources for the user group in their workspace](/docs/data-sources/overview#permissions) | ✅ | ✅ |
| [Access any user's personal workspace (create, edit or delete apps)](#access-any-workspace) | ❌ | ✅ |
| [Archive Admin or any user of any workspace](#archiveunarchive-users) | ❌ | ✅ |
| [Access any user's ToolJet database (create, edit or delete database)](#access-tooljet-db-in-any-workspace) | ❌ | ✅ |
diff --git a/docs/versioned_docs/version-2.4.0/contributing-guide/troubleshooting/eslint.md b/docs/versioned_docs/version-2.4.0/contributing-guide/troubleshooting/eslint.md
index 465ba553c3..efb8d897fe 100644
--- a/docs/versioned_docs/version-2.4.0/contributing-guide/troubleshooting/eslint.md
+++ b/docs/versioned_docs/version-2.4.0/contributing-guide/troubleshooting/eslint.md
@@ -41,3 +41,6 @@ For VSCode users, you can set the formatter to `ESLint` in the [**settings.json*
1. **Node version 18.3.0**
2. **npm version 8.11.0**
+:::tip
+It is recommended to check the VSCode **Setting.json**(Press `ctrl/cmnd + P` and search `>Settings (JSON)`) file to ensure there are no overrides to the eslint config rules. Comment the following rules for eslint: **eslint.options: {...}**.
+:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/data-sources/overview.md b/docs/versioned_docs/version-2.4.0/data-sources/overview.md
index ec7527f8af..64eefc507c 100644
--- a/docs/versioned_docs/version-2.4.0/data-sources/overview.md
+++ b/docs/versioned_docs/version-2.4.0/data-sources/overview.md
@@ -3,9 +3,13 @@ id: overview
title: Overview
---
-# Datasources : Overview
+# Global Datasources : Overview
-Datasources pull in and push data to any source including databases, external APIs, or services.
+Global datasources pull in and push data to any source including databases, external APIs, or services. Once a global datasource is connected to a workspace, the connection can be shared with any app of that workspace.
+
+:::caution
+Global datasources are available only on **ToolJet version 2.3.0 and above**.
+:::
@@ -13,30 +17,115 @@ Datasources pull in and push data to any source including databases, external AP
-## Connecting datasources
+## Connecting global datasources
-1. After logging in to ToolJet, create a new app from the dashboard
+1. From the ToolJet dashboard, go to the **global datasources page** from the left sidebar.
+
-2. There are two ways for connecting a datasource. You can connect from:
- 1. **Left-sidebar**: On the left sidebar, click on the `datasource` icon and then click on the `+ add datasource` button
+
-
+
-
+2. Click on the **Add new datasource** button, a modal will pop-up with all the available global datasources.
+
-
+
- 2. **Query Panel**: Go to the query panel at the bottom, click on the `+Add` button and then click `Add datasource` button
+
-
+3. Select the datasource, enter the **Credentials** and **Save** the datasource.
+
-
+
-
+
-3. Follow the steps in the **[Datasource Library](/docs/data-sources/airtable)** specific to the desired datasource
+4. Now, go back to the dashboard, create a new app, and the datasource will be available on the query panel under **Global Datasources**. Added datasources will be available on any of the **existing** or the **new applications**.
+
+
+
+
+
+
+5. You can now create queries of the connected global datasource. From the queries, you'll be able to switch to **different connections** of the same datasource if there are more than one connections created.
+
+
+
+
+
+
+## Changing scope of datasources of an app created on older versions of ToolJet
+
+On ToolJet versions below 2.3.0, the datasource connection was made from within the individual apps. To make it backward compatible, we added an option to change the scope of the datasources and make it global datasource.
+
+1. If you open an app created on previos versions of ToolJet, you'll find the datasource manager on the left sidebar of the App Builder.
+
+
+
+
+
+
+2. Click on the kebab menu next to the connected datasource, select the **change scope** option.
+
+
+
+
+
+
+3. Once you change the scope of the datasource and make it global, you'll see that the **datasource manager** is removed from the left sidebar and now you'll find the datasource on the **query panel** under Global Datasources. You can now configure the datasource fromt the Global Datasource page on the **dashboard**.
+
+
+
+
+
+
+
+## Default datasources
+
+By default, 4 datasources will be available on every app on ToolJet:
+- **[ToolJet Database](/docs/tooljet-database/)**
+- **[RestAPI](/docs/data-sources/restapi/)**
+- **[Run JavaScript Query](/docs/data-sources/run-js/)**
+- **[Run Python Query](/docs/data-sources/run-py/)**
+
+
+
+
+
+
+
+## Permissions
+
+Only **Admins** and **[Super Admins](/docs/Enterprise/superadmin)** of the workspace can change the **[Permissions](/docs/tutorial/manage-users-groups#group-properties)** for Global Datasource.
+
+From **Workspace Settings** -> **Groups Settings**, Admins and Super Admins can set the permission for a user group to:
+
+- **Create** and **Delete** datasources onto that workspace. If **Create** permission is enabled then the users can add new global datasources and **edit** the datasources as well but cannot **delete** it, and if only **Delete** permission is set then the users of the group will only be able to delete the connected datasources on the workspace.
+
+
+
+
+
+
+ - If any of the permission(Create or Delete) is not enabled for a user group then the users of the group will get an error toast when they try to Add or Delete the global datasource.
+
+
+
+
+
+
+- **View** or **Edit** allowed global datasources from the **Datasources** tab. If only **View** permission is set then the users of the group will only be able to connect to the allowed datasource, and if only **Edit** permission is set then the users of the group will be able to update the credentials of the allowed datasources.
+
+
+
+
+
+
+ - If any of the permission(View or Edit) is not enabled for a user group then the users of the group will get an error toast when they try to Add or Delete the global datasource.
+
+
+
+
+
-:::info
-ToolJet allows you to transform the data returned by datasources using **[Transformations](/docs/tutorial/transformations)**
-:::
diff --git a/docs/versioned_docs/version-2.4.0/getting-started.md b/docs/versioned_docs/version-2.4.0/getting-started.md
index 3d944f62c9..4e83aaca55 100644
--- a/docs/versioned_docs/version-2.4.0/getting-started.md
+++ b/docs/versioned_docs/version-2.4.0/getting-started.md
@@ -107,7 +107,7 @@ Learn more about the **[ToolJet Database here](/docs/tooljet-database)**
### Create a new application
-1. To create a new ToolJet application, go to the **Dashboard** -> **New App from scratch**.
+1. To create a new ToolJet application, go to the **Dashboard** -> **Create new application**.
@@ -143,7 +143,7 @@ Learn more about the **[ToolJet Database here](/docs/tooljet-database)**
:::info
-ToolJet application's User interface is constructed using Components like Tables, Forms, Charts, or Buttons etc. Check **Components Catalog** to learn more.
+ToolJet application's User interface is constructed using Components like Tables, Forms, Charts, or Buttons etc. Check **[Components Catalog](/docs/widgets/overview)** to learn more.
:::
### Build queries and bind data to UI
@@ -156,7 +156,7 @@ ToolJet application's User interface is constructed using Components like Tables
:::info
- ToolJet can connect to several databases, APIs and external services to fetch and modify data. Check **Datasource Catalog** to learn more.
+ ToolJet can connect to several databases, APIs and external services to fetch and modify data. Check **[Datasource Catalog](/docs/data-sources/overview)** to learn more.
:::
2. Choose a **Table** from the dropdown, Select the **List rows** option from the **Operation** dropdown, You can leave other query parameters. Scroll down and enable **Run this query on application load** - this will trigger the query when the app is loaded.
@@ -199,8 +199,8 @@ ToolJet application's User interface is constructed using Components like Tables
:::info
-- You can manipulate the data returned by the queries using **Transformations**
-- You can also **Run JS query** or **Python query** to perform custom behavior inside ToolJet
+- You can manipulate the data returned by the queries using **[Transformations](/docs/tutorial/transformations)**
+- You can also **[Run JavaScript code](/docs/data-sources/run-js)** or **[Run Python code](/docs/data-sources/run-py)** to perform custom behavior inside ToolJet
:::
### Preview, Release and Share app
@@ -210,7 +210,7 @@ ToolJet application's User interface is constructed using Components like Tables
3. **Share** option allows you to share the **released version** of the application with other users or you can also make the app **public** and anyone with the URL will be able to use the app.
:::tip
-You can control how much access to users have to your ToolJet apps and resources using **Org Management**.
+You can control how much access to users have to your ToolJet apps and resources using **[Org Management](/docs/tutorial/manage-users-groups)**.
:::
## What Can I Do With ToolJet
diff --git a/docs/versioned_docs/version-2.4.0/how-to/intentionally-fail-js-query.md b/docs/versioned_docs/version-2.4.0/how-to/intentionally-fail-js-query.md
new file mode 100644
index 0000000000..bc7750ec4c
--- /dev/null
+++ b/docs/versioned_docs/version-2.4.0/how-to/intentionally-fail-js-query.md
@@ -0,0 +1,23 @@
+---
+id: intentionally-fail-js-query
+title: Intentionally fail a RunJS query
+---
+
+In this how-to guide, we will create a RunJS query that will throw an error.
+
+- Create a RunJS query and paste the code below. We will use the constructor `ReferenceError` since it is used to create a range error instance.
+ ```js
+ throw new ReferenceError('This is a reference error.');
+ ```
+
+- Now, add a event handler to show an alert when the query fails. **Save** the query and **Run** it.
+
+
+
+
+
+
+
+:::info
+Most common use-case for intentionally failing a query is **debugging**.
+:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/how-to/use-s3-presigned-url-to-upload-docs.md b/docs/versioned_docs/version-2.4.0/how-to/use-s3-presigned-url-to-upload-docs.md
new file mode 100644
index 0000000000..61dd6448d3
--- /dev/null
+++ b/docs/versioned_docs/version-2.4.0/how-to/use-s3-presigned-url-to-upload-docs.md
@@ -0,0 +1,173 @@
+---
+id: use-s3-signed-url-to-upload-docs
+title: Use S3 signed URL to upload documents
+---
+
+# Use S3 signed URL to upload documents
+
+In this how-to guide, you'll learn to upload documents to S3 buckets using the **S3 signed URL** from a ToolJet application.
+
+For this guide, We are going to use one of the existing templates on ToolJet: **S3 File explorer**
+
+:::info using Templates
+On ToolJet Dashboard, Click on the down arrow on the right of the **New App** button, from the dropdown choose the **Choose from template** option.
+:::
+
+
+
+
+
+
+
+- Once you've created a new app using the template, you'll be prompted to create a **new version** of the existing version. After creating a new version, you'll be able to make changes in the app.
+
+
+
+
+
+
+
+- Go to the **datasource manager** on the left-sidebar, you'll find that the **AWS S3 datasource** is already added. All you need to do is update the datasource **credentials**.
+
+ :::tip
+ Check the [AWS S3 datasource reference](/docs/data-sources/s3) to learn more about connnection and choosing your preferred authentication method.
+ :::
+
+
+
+
+
+
+
+- Once the datasource is connected successfully, go to the query manager and **Run** the **getBuckets** query. The operation selected in the getBuckets query is **List Buckets** which will fetch an array of all the buckets.
+
+
+
+
+
+
+
+- Running the **getBuckets** query will load all the buckets in the dropdown in the app.
+
+
+
+
+
+
+
+- Select a **bucket** from the dropdown and click on the **Fetch files** button to list all the files from the selected bucket on the table. The **Fetch files** button has the event handler added that triggers the **s32** query, the **s32** query uses the **List objects in a bucket** operation, and the bucket field in the query gets the value dynamically from the dropdown.
+
+
+
+
+
+
+
+- Let's go to the **uploadToS3** query and update the field values:
+ - **Operation**: Signed URL for upload
+ - **Bucket**: `{{components.dropdown1.value}}` this will fetch the dynamic value from the dropdown
+ - **Key**: `{{components.filepicker1.file[0].name}}` this will get the file name from the filepickers exposed variables
+ - **Expires in:** This sets an expiration time of URL, by default its `3600` seconds (1 hour)
+ - **Content Type**: `{{components.filepicker1.file[0].type}}` this will get the file type from the filepickers exposed variables
+
+
+
+
+
+
+
+- Create two **RunJS** queries:
+ - Create a **runjs1** query and copy-paste the code below. This query gets the **base64data** from the file picker and convert the file's `base64Data` to into `BLOB`, and returns the file object.
+ ```js
+ const base64String = components.filepicker1.file[0].base64Data
+ const decodedArray = new Uint8Array(atob(base64String).split('').map(c => c.charCodeAt(0)));
+ const file = new Blob([decodedArray], { type: components.filepicker1.file[0].type });
+ const fileName = components.filepicker1.file[0].name;
+ const fileObj = new File([file], fileName);
+
+ return fileObj
+ ```
+
+
+
+
+
+
+
+ - Create another **runjs2** query and copy-paste the code below. This query gets the data(file object) returned by the first runjs query, the url returned by the **uploadToS3** query, and then makes PUT request.
+ ```js
+ const file = queries.runjs2.data
+ const url = queries.s31.data.url
+
+ fetch(url, {
+ method: 'PUT',
+ body: file,
+ mode: 'cors',
+ headers: {
+ 'Access-Control-Allow-Origin': '*',
+ 'Content-Type': 'application/json'
+ }
+ })
+ .then(response => console.log('Upload successful!'))
+ .catch(error => console.error('Error uploading file:', error));
+ ```
+ :::warning Enable Cross Origin Resource Sharing(CORS)
+ - For the file to be uploaded successfully, you will need to add the CORS policies from the **Permissions** tab of your **Bucket** settings. Here's a sample CORS:
+ ```json
+ [
+ {
+ "AllowedHeaders": [
+ "*"
+ ],
+ "AllowedMethods": [
+ "GET",
+ "PUT",
+ "POST"
+ ],
+ "AllowedOrigins": [
+ "*"
+ ],
+ "ExposeHeaders": []
+ }
+ ]
+ ```
+ :::
+
+
+
+
+
+
+
+- Go to the **uploadToS3**, scroll down and add an event handler to the **uploadToS3** query. Select the **Query Success** event, **Run Query** as the action, and **runjs1** as the query to be triggered. **Save** the query.
+
+
+
+
+
+
+- Let's go to the **runjs1** query and add the event handler to run a query on query success event, similar to how we did in the previous step. In the event handler, choose **runjs2** query. **Save** the query.
+
+
+
+
+
+
+- Now, let's go the final query **copySignedURL** that is connected to the table's action button. This query copy's the generated **Signed URL for download** onto the **clipboard**.
+
+
+
+
+
+
+- Now that we have updated all the queries, and connected them through the event handlers. We can go ahead and pick a file from the file picker. Click on the file picker, select a file and then hit the **Upload file to S3** button.
+
+
+
+
+
+
+- Once the button is clicked, the **uploadToS3** will triggered along with the **runjs1** and **runjs2** queries in sequence since we added them in the event handlers.
+
+- You can go to the table and click on the **Copy signed URL** action button on the table, this will trigger the **copySignedURL** query and will copy the URL on the clipboard. You can go to another tab and paste the URL to open the file on the browser.
+
diff --git a/docs/versioned_docs/version-2.4.0/org-management/permissions.md b/docs/versioned_docs/version-2.4.0/org-management/permissions.md
index 5e33f5cb2c..b13433e0ef 100644
--- a/docs/versioned_docs/version-2.4.0/org-management/permissions.md
+++ b/docs/versioned_docs/version-2.4.0/org-management/permissions.md
@@ -8,7 +8,7 @@ Permissions allow you to create and share resources to easily ensure what level
Admins can invite **Users** to their workspaces and assign them to the **Groups** that have Permissions to access Apps, folders, or workspace variables.
:::info
-See **[Manage Users and Groups](/docs/tutorial/manage-users-groups)** to learn how to invite users to ToolJet.
+See **[Manage Users and Groups](/docs/tutorial/manage-users-groups)** to know more about managing users and groups on your workspace.
:::
## Role-Based Access Control (RBAC) Glossary
@@ -18,4 +18,4 @@ See **[Manage Users and Groups](/docs/tutorial/manage-users-groups)** to learn h
- **All Users** - Contains all the users in your workspace. When **New Users** are invited they are added to this group by default.
- **Admins** - Contains all Admins in your workspace. Everyone added to this group will Permission to access all the ToolJet resources.
- **Apps, Folder, Workspace Variables -** Resources that Admins can set permissions on.
-- **Permissions -** Create, Update and Delete.
+- **Permissions -** Create, Update and Delete.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/setup/env-vars.md b/docs/versioned_docs/version-2.4.0/setup/env-vars.md
index ee546a8cbb..8f98ef8937 100644
--- a/docs/versioned_docs/version-2.4.0/setup/env-vars.md
+++ b/docs/versioned_docs/version-2.4.0/setup/env-vars.md
@@ -57,7 +57,7 @@ ToolJet by default tries to create database based on `PG_DB` variable set and ad
#### Check for updates ( optional )
-Self-hosted version of ToolJet pings our server to fetch the latest product updates every 24 hours. You can disable this by setting the value of `CHECK_FOR_UPDATES` environment variable to `0`. This feature is enabled by default.
+Self-hosted version of ToolJet pings our server to fetch the latest product updates every 24 hours. You can disable this by setting the value of `CHECK_FOR_UPDATES` environment variable to `false`. This feature is enabled by default.
#### Comment feature enable ( optional )
@@ -295,3 +295,9 @@ If this parameter is not specified then PostgREST refuses authentication request
:::info
Please make sure that DB_URI is given in the format `postgrest://[USERNAME]:[PASSWORD]@[HOST]:[PORT]/[DATABASE]`
:::
+
+## User Session Expiry Time (Optional)
+
+| variable | description |
+| ---------------- | ----------------------------------------------- |
+| USER_SESSION_EXPIRY | This variable controls the user session expiry time. By default, the session expires after 2 days. The variable expects the value in minutes. ex: USER_SESSION_EXPIRY = 120 which is 2 hours |
diff --git a/docs/versioned_docs/version-2.4.0/tracking.md b/docs/versioned_docs/version-2.4.0/tracking.md
index 6033e14f19..bde3fce838 100644
--- a/docs/versioned_docs/version-2.4.0/tracking.md
+++ b/docs/versioned_docs/version-2.4.0/tracking.md
@@ -13,7 +13,7 @@ ToolJet does not store any data fetched from the data sources. ToolJet acts as a
## Server
:::tip
-Self-hosted version of ToolJet pings our server to fetch the latest product updates every 24 hours. You can disable this by setting the value of `CHECK_FOR_UPDATES` environment variable to `0`. This feature is enabled by default.
+Self-hosted version of ToolJet pings our server to fetch the latest product updates every 24 hours. You can disable this by setting the value of `CHECK_FOR_UPDATES` environment variable to `false`. This feature is enabled by default.
:::
## Client
diff --git a/docs/versioned_docs/version-2.4.0/tutorial/manage-users-groups.md b/docs/versioned_docs/version-2.4.0/tutorial/manage-users-groups.md
index 95991fd7fa..5877d2f075 100644
--- a/docs/versioned_docs/version-2.4.0/tutorial/manage-users-groups.md
+++ b/docs/versioned_docs/version-2.4.0/tutorial/manage-users-groups.md
@@ -77,7 +77,7 @@ Similar to archiving a user's access, you can enable it again by clicking on **U
## Managing Groups
-On ToolJet, Admins can create groups for users added in a workspace and grant them access to particular app(s) with specific permissions. To manage groups, just go to the **Workspace Settings** from the left-sidebar of the dashboard and click on the **Groups**.
+On ToolJet, Admins and Super Admins can create groups for users added in a workspace and grant them access to particular app(s) with specific permissions. To manage groups, just go to the **Workspace Settings** from the left-sidebar of the dashboard and click on the **Groups**.
@@ -87,11 +87,16 @@ On ToolJet, Admins can create groups for users added in a workspace and grant th
### Group properties
-Every group on ToolJet has three sections:
+Every group on ToolJet has **four** sections:
+
+- [Apps](#apps)
+- [Users](#users)
+- [Permissions](#permissions)
+- [Datasources](#datasources)
#### Apps:
-Admins can add or remove any number of apps for a group of users. To add an app to a group, select an app from the dropdown and click on `Add` button next to it. You can also set app permissions such as `View` or `Edit` for the group. You can set different permissions for different apps in a group.
+Admins and Super Admins can add or remove any number of apps for a group of users. To add an app to a group, select an app from the dropdown and click on `Add` button next to it. You can also set app permissions such as `View` or `Edit` for the group. You can set different permissions for different apps in a group.
@@ -101,7 +106,7 @@ Admins can add or remove any number of apps for a group of users. To add an app
#### Users:
-Admins can add or remove any numbers of users in a group. Just select a user from the dropdown and click on `Add` button to add it to a group. To delete a user from a group, click on `Delete` button next to it.
+Admins and Super Admins can add or remove any numbers of users in a group. Just select a user from the dropdown and click on `Add` button to add it to a group. To delete a user from a group, click on `Delete` button next to it.
@@ -111,16 +116,30 @@ Admins can add or remove any numbers of users in a group. Just select a user fro
#### Permissions:
-Admins can set granular permission like creating/deleting apps or creating folder for a group of users.
+Admins and Super Admins can set granular permission for the users added in that particular group, such as:
+- **Create** and **Delete** Apps
+- **Create**, **Update**, and **Delete** Folders
+- **Create**, **Update**, and **Delete** [Workspace Variables](/docs/tutorial/workspace-variables)
+- **Create** and **Delete** [Global Datasources](/docs/data-sources/overview)
-
+
+
+
+
+#### Datasources:
+
+Only Admins and Super Admins can define what datasources can be **viewed** or **edited** by the users of that group.
+
+
+
+
:::tip
-All the activities performed by any Admin or any user in a workspace is logged in `Audit logs` - including any activity related with managing users and groups.
+All the activities performed by any Admin, Super Admin or any user in a workspace is logged in [Audit logs](/docs/Enterprise/audit_logs) - including any activity related with managing users and groups.
:::
### Predefined Groups
diff --git a/docs/versioned_docs/version-2.4.0/widgets/bounded-box.md b/docs/versioned_docs/version-2.4.0/widgets/bounded-box.md
index 4a7edb33be..855f65cb40 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/bounded-box.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/bounded-box.md
@@ -97,4 +97,23 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+| variable | Description |
+| ----------- | ----------- |
+| annotations | This variable is an array of objects, where each object represents an annotation added to an image. The object contains the following keys: type, x, y, width, height, text, and id |
+| annotations.`type` | There are two types of annotations: Rectangle and Point |
+| annotations.`x` | coordinates on x axis |
+| annotations.`y` | coordinates on y axis |
+| annotations.`width` | width of annotation |
+| annotations.`height` | height of annotation |
+| annotations.`text` | label selected for the annotation |
+| annotations.`id` | unique id of the annotation (system generated) |
+
+The values can be accessed dynamically using `{{components.boundedbox1.annotations[0].text}}` or `{{components.boundedbox1.annotations[1].width}}`
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the bounding box component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/button-group.md b/docs/versioned_docs/version-2.4.0/widgets/button-group.md
index f415e830c7..09c5821663 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/button-group.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/button-group.md
@@ -92,4 +92,15 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| selected | If the "enable multiple selection" option is turned off, then the variable is an array of objects, and the first object holds the value of the selected button. However, if the "enable multiple selection" option is turned on, the variable type changes from an array to an object, and the selected button values are stored as a string within that object. The value can be accessed using `{{components.buttongroup1.selected[0]}}` or `{{components.buttongroup1.selected}}` |
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the button-group component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/button.md b/docs/versioned_docs/version-2.4.0/widgets/button.md
index dd86c3b615..0d64c4bd6e 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/button.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/button.md
@@ -93,4 +93,20 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+Following actions of button component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| click | You can regulate the click of a button via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.button1.click()` |
+| setText | button's text can be controlled using component specific action from any of the event handler. You can also use RunJS query to execute component specific actions: `await components.button1.setText('New Button Text')` |
+| disable | button can be disabled using the component specific action from any of the event handler. You can also use RunJS query to execute this action: `await components.button1.disable(true)` or `await components.button1.disable(false)` |
+| visibility | button's visibility can be switched using the component specific action from any of the event handler. You can also use RunJS query to execute this action: `await components.button1.disable(true)` or `await components.button1.disable(false)` |
+| loading | The loading state of the button can be set dynamically using the component specific actions from any of the event handler. You can also use this action from RunJS: `await components.button1.loading(true)` or `await components.button1.loading(false)` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/calendar.md b/docs/versioned_docs/version-2.4.0/widgets/calendar.md
index 454a2393da..115935cd52 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/calendar.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/calendar.md
@@ -197,3 +197,15 @@ This format determines how the column header for each day in week view will be d
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| selectedEvent | This variable stores information about the event that has been chosen on the calendar component. This object comprises keys like **title**, **start**, **end**, **allDay**, and **color**, and they can be accessed dynamically through JS using the following syntax: `{{components.calendar1.selectedEvent.title}}` or `{{components.calendar1.selectedEvent.start}}` |
+| selectedSlots | The variable selectedSlots contains the values of the slots chosen on the calendar component. This object comprises keys like **slots**, **start**, **end**, **resourceId**, and **action**, and they can be accessed dynamically through JS using the following syntax: {{components.calendar1.selectedSlots.slots[0]}} or {{components.calendar1.selectedSlots.end}}. |
+| currentView | The currentView variable holds the type of view currently set on the calendar. The value updates when the user changes the view from the calendar header. Types of views supported: `month`, `week`, and `day`. The value can be accessed using `{{components.calendar1.currentView}}` |
+| currentDate | The currentDate variable holds the current date data. The date returned by the variable is in the `MM-DD-YYYY HH:mm:ss A Z` format. The value can be accessed using `{{components.calendar1.currentDate}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the calendar component.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/chart.md b/docs/versioned_docs/version-2.4.0/widgets/chart.md
index 9760de273f..5db81b7e06 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/chart.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/chart.md
@@ -387,3 +387,11 @@ Toggle on or off to control the visibility of the widget. You can programmatical
### Disable
This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/checkbox.md b/docs/versioned_docs/version-2.4.0/widgets/checkbox.md
index dbdc0f0650..9e6639d508 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/checkbox.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/checkbox.md
@@ -101,8 +101,16 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Actions
+## Exposed Variables
-| Action | Description | Properties |
-| ----------- | ----------- | ------------------ |
-| `setChecked` | Set checkbox state. | pass status as parameter. ex: `components.checkbox1.setChecked(true)` |
\ No newline at end of file
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the boolean value `true` if the checkbox is checked and `false` if unchecked. You can access the value dynamically using JS: `{{components.checkbox1.value}}`|
+
+## Component specific actions (CSA)
+
+Following actions of checkbox component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setChecked | You can change the status of the checkbox component using component specific action from within any event handler. Additionally, you have the option to trigger it from the RunJS query: `await components.checkbox1.setChecked(true)` or `await components.checkbox1.setChecked(false)` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/circular-progressbar.md b/docs/versioned_docs/version-2.4.0/widgets/circular-progressbar.md
index 47064de88e..454c0464a0 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/circular-progressbar.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/circular-progressbar.md
@@ -75,4 +75,13 @@ Under the General accordion, you can set the value in the string format.
:::info
Circular progress bar widget uses [react-circular-progress](https://github.com/kevinsqi/react-circular-progressbar) package. Check the repo for further more details about properties and styles.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/code-editor.md b/docs/versioned_docs/version-2.4.0/widgets/code-editor.md
index 612593221e..ce9dce63d0 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/code-editor.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/code-editor.md
@@ -206,4 +206,15 @@ Under the General accordion, you can set the value in the string format.
| ----------- | ----------- |
| Visibility | Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`. |
| Disable | This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
-| Border radius | Use this property to modify the border radius of the editor. The field expects only numerical value from `1` to `100`, default is `0`. |
\ No newline at end of file
+| Border radius | Use this property to modify the border radius of the editor. The field expects only numerical value from `1` to `100`, default is `0`. |
+
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the value whenever the user inputs anything on the code-editor . You can access the value dynamically using JS: `{{components.codeeditor1.value}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/color-picker.md b/docs/versioned_docs/version-2.4.0/widgets/color-picker.md
index 36a8fc6658..2c3260315c 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/color-picker.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/color-picker.md
@@ -81,4 +81,20 @@ Any property having `Fx` button next to its field can be **programmatically conf
-
\ No newline at end of file
+
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| selectedColorHex | This variable gets updated with HEX color code whenever a user selects a color from the color picker. You can access the value dynamically using JS: `{{components.colorpicker1.selectedColorHex}}`|
+| selectedColorRGB | This variable gets updated with RGB color code whenever a user selects a color from the color picker. You can access the value dynamically using JS: `{{components.colorpicker1.selectedColorRGB}}`|
+| selectedColorRGBA | This variable gets updated with RGBA color code whenever a user selects a color from the color picker. You can access the value dynamically using JS: `{{components.colorpicker1.selectedColorRGBA}}`|
+
+## Component specific actions (CSA)
+
+Following actions of color picker component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setColor | Set a color on the color component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.colorpicker1.setColor('#64A07A')` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/container.md b/docs/versioned_docs/version-2.4.0/widgets/container.md
index fc58141f51..8fe5d3506a 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/container.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/container.md
@@ -57,4 +57,12 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/custom-component.md b/docs/versioned_docs/version-2.4.0/widgets/custom-component.md
index 385252605d..953e8dcd83 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/custom-component.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/custom-component.md
@@ -103,3 +103,14 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| data | This variable will hold the variables assigned inside the `code` for custom component. You can access the value dynamically using JS: `{{components.customcomponent1.data.title}}`|
+
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/date-range-picker.md b/docs/versioned_docs/version-2.4.0/widgets/date-range-picker.md
index 642c97b427..0b27cf4bca 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/date-range-picker.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/date-range-picker.md
@@ -78,4 +78,16 @@ This property only accepts boolean values. If set to `{{true}}`, the widget will
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| endDate | This variable will hold the date of the endDate selected in the component. You can access the value dynamically using JS: `{{components.customcomponent1.data.title}}`|
+| startDate | This variable will hold the value assigned inside the `code` for custom component. You can access the value dynamically using JS: `{{components.customcomponent1.data.title}}`|
+
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/datepicker.md b/docs/versioned_docs/version-2.4.0/widgets/datepicker.md
index 19001e9fb6..22f19e4955 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/datepicker.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/datepicker.md
@@ -106,3 +106,13 @@ Use this property to modify the border radius of the date-picker. The field expe
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+## Exposed variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable will hold the date selected on the component, the date value will be returned according to the format set in the datepicker properties. You can access the value dynamically using JS: `{{components.datepicker1.value}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/divider.md b/docs/versioned_docs/version-2.4.0/widgets/divider.md
index b027ae96d2..469b6626d0 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/divider.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/divider.md
@@ -53,4 +53,13 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/dropdown.md b/docs/versioned_docs/version-2.4.0/widgets/dropdown.md
index e4cdca4a72..9bd7ee5a9b 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/dropdown.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/dropdown.md
@@ -137,4 +137,10 @@ Any property having `Fx` button next to its field can be **programmatically conf
| Value | This variable holds the value of the currently selected item on the dropdown. Value can be accesed using `{{components.dropdown1.value}}` |
| searchText | This variable is initially empty and will hold the value whenever the user searches on the dropdown. searchText's value can be accesed using`{{components.dropdown1.searchText}}` |
| label | The variable label holds the label name of the dropdown. label's value can be accesed using`{{components.dropdown1.searchText}}` |
-| optionLabels | The optionLabels holds the option labels for the values of the dropdown. optionLabels can be accesed using`{{components.dropdown1.optionLabels}}` for all the option labels in the array form or `{{components.dropdown1.optionLabels[0]}}` for particular option label |
\ No newline at end of file
+| optionLabels | The optionLabels holds the option labels for the values of the dropdown. optionLabels can be accesed using`{{components.dropdown1.optionLabels}}` for all the option labels in the array form or `{{components.dropdown1.optionLabels[0]}}` for particular option label |
+
+## Component specific actions (CSA)
+
+| Actions | Description |
+| -------- | ----------- |
+| selectOption | You can set an option on the dropdown component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.dropdown1.setOption(1)` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/file-picker.md b/docs/versioned_docs/version-2.4.0/widgets/file-picker.md
index 6d7efd4219..380d2c9a65 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/file-picker.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/file-picker.md
@@ -165,8 +165,15 @@ Use this property to modify the border radius of the filepicker widget. The fiel
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Actions
-| Action | Description | Properties |
-| ----------- | ----------- | ------------ |
-| `clearFiles()` | It will clear the selected files | None |
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| file | This variable holds the array of objects where each object represents the file loaded on the file picker component. Each object has the following keys: **name**, **type**, **content**, **dataURL**, **base64Data**, **parsedData**, **filePath**. The values can be accesed using `{{components.filepicker1.file[0].base64Data}}` |
+
+## Component specific actions (CSA)
+
+| Actions | Description |
+| -------- | ----------- |
+| clearFiles() | You can clear the selected files on the filepicker component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.filepicker1.clearFiles()` |
diff --git a/docs/versioned_docs/version-2.4.0/widgets/form.md b/docs/versioned_docs/version-2.4.0/widgets/form.md
index 8d368d65fd..ba5f9e5e70 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/form.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/form.md
@@ -73,4 +73,21 @@ A Tooltip is often used to specify extra information about something when the us
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| data | This variable holds the data of all the components that are nested inside the form components. You can access the value dynamically using JS: `{{components.form1.data.numberinput1.value}}`|
+
+## Component specific actions (CSA)
+
+Following actions of form component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| resetForm | You can submit the form data via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.form1.resetForm()` |
+| submitForm | You can reset the form data via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await await components.form1.submitForm()` |
+
diff --git a/docs/versioned_docs/version-2.4.0/widgets/html.md b/docs/versioned_docs/version-2.4.0/widgets/html.md
index cdb523f9d7..a4f65f8734 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/html.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/html.md
@@ -70,3 +70,12 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/icon.md b/docs/versioned_docs/version-2.4.0/widgets/icon.md
index 9cd9fe3bd9..168824e22d 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/icon.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/icon.md
@@ -62,3 +62,17 @@ Check [Action Reference](/docs/category/actions-reference) docs to get the detai
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+Following actions of the component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setVisibility | You can toggle the visibility of the icon component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.icon1.setVisibility(false)` |
+| click | You can trigger the click action on icon component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.icon1.click()` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/iframe.md b/docs/versioned_docs/version-2.4.0/widgets/iframe.md
index 3157b9f979..3fdaf72c04 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/iframe.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/iframe.md
@@ -64,4 +64,13 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/image.md b/docs/versioned_docs/version-2.4.0/widgets/image.md
index f84ee6f9c3..6ca6250b6c 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/image.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/image.md
@@ -104,4 +104,13 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/kanban-board.md b/docs/versioned_docs/version-2.4.0/widgets/kanban-board.md
index 0dbb693192..5f55a31b80 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/kanban-board.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/kanban-board.md
@@ -118,6 +118,7 @@ Under the General accordion, you can set the value in the string format.
| Visibility | This is to control the visibility of the widget. If `{{false}}`/disabled the widget will not visible after the app is deployed. By default, it's enabled (set to `{{true}}`). |
| Accent color | You can change the accent color of the column title by entering the Hex color code or choosing a color of your choice from the color picker. |
+
## Exposed variables
@@ -134,4 +135,15 @@ Under the General accordion, you can set the value in the string format.
| lastCardMovement | The variable `lastCardMovement` holds the properties of the card that has been recently moved from its original position. It holds the following data - `originColumnId`, `destinationColumnId`, `originCardIndex`, `destinationCardIndex` and an object `cardDetails` which includes `id`, `title`, `description` and `columnId` of the moved card. You can get the values using `{{components.kanbanboard1.lastCardMovement.cardDetails.title}}` or `{{components.kanbanboard1.lastCardMovement.destinationCardIndex}}` |
| lastSelectedCard | The variable `lastSelectedCard` holds the `id`, `title`, `columnId`, and `description` of the last selected(clicked to view) card on the kanban. You can get the values using `{{components.kanban1.lastSelectedCard.columnId}}` |
| lastUpdatedCard | The variable `lastUpdatedCard` holds the `id`, `title`, `description`, and `columnId` of the last updated card(using componenet specific action). You can get the values using `{{components.kanban1.lastUpdatedCard.columnId}}` |
-| lastCardUpdate | The variable `lastCardUpdate` holds the old an new values of the property that has been changed in the card(using componenet specific action). You can get the values using `{{components.kanban1.lastCardUpdate[0].title.oldValue}}` |
\ No newline at end of file
+| lastCardUpdate | The variable `lastCardUpdate` holds the old an new values of the property that has been changed in the card(using componenet specific action). You can get the values using `{{components.kanban1.lastCardUpdate[0].title.oldValue}}` |
+
+## Component specific actions (CSA)
+
+Following actions of kanban component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| updateCardData | Update the card data of kanban component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `components.kanban1.updateCardData('c1', {title: 'New Title'})` |
+| moveCard | Move a card from one column to other column on the kanban via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.kanban1.moveCard('card id,'column id')` ex: `await components.kanban1.moveCard('c1','r2')` |
+| addCard | Add a card onto the kanban via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.kanban1.addCard('c1', {title: 'New Title'})` |
+| deleteCard | Delete a card from the kanban via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.kanban1.deleteCard('card id')` ex: `await components.kanban1.deleteCard('c2')` |
diff --git a/docs/versioned_docs/version-2.4.0/widgets/link.md b/docs/versioned_docs/version-2.4.0/widgets/link.md
index ca20002102..de7628dbab 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/link.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/link.md
@@ -65,4 +65,16 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+Following actions of link component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| click | You can trigger the click action of the link component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.link1.click()` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/listview.md b/docs/versioned_docs/version-2.4.0/widgets/listview.md
index 41a8d42385..288401f339 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/listview.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/listview.md
@@ -137,4 +137,15 @@ Any property having `Fx` button next to its field can be **programmatically conf
Use `{{listItem.key}}` to display data on the nested widgets. Example: For displaying the images we used `{{listItem.avatar}}` where **avatar** is one of the key in the objects from the query result.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| data | This variable holds the data loaded onto the listview component. You can access the data of each row of the listview using `{{components.listview1.data["0"].text1.text}}` |
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/map.md b/docs/versioned_docs/version-2.4.0/widgets/map.md
index 2469048e68..97b8764cc8 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/map.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/map.md
@@ -80,8 +80,21 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Actions
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| center | This variable will hold the latitude, longitude and the google map url value. |
+| center.`lat` | This variable holds the latitude value of the marker on the map component. You can access the value dynamically using JS: `{{components.map1.center.lat}}`|
+| centere.`lng` | This variable gets updated with RGB color code whenever a user selects a color from the color picker. You can access the value dynamically using JS: `{{components.map1.center.lng}}`|
+| center.`googleMapUrl` | This variable holds the URL of the location where the center marker is placed on the map component. You can access the value dynamically using JS: `{{components.map1.center.googleMapUrl}}`|
+| markers | The markers variable will hold the value only if `add new markers` is enabled from the map properties. Each marker is an object and will have `lat` and `lng` keys. Values can be accessed dynamically using `{{components.map1.markers[1].lat}}` |
+
+## Component specific actions (CSA)
+
+Following actions of map component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setLocation | Set the marker's location on map using latitude and longitude values as parameteres via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as: `component.map1.setLocation(40.7128, -73.935242)` |
-| Action | Description | Properties |
-| ----------- | ----------- | ------------------ |
-| `setLocation` | Set map's location. | Latitude and Longitude values as parameters. ex: `component.map1.setLocation(40.7128, -73.935242)` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/modal.md b/docs/versioned_docs/version-2.4.0/widgets/modal.md
index eb196123ac..02f645e79e 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/modal.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/modal.md
@@ -98,4 +98,18 @@ Toggle on or off to display the widget in mobile view. You can programmatically
:::info
Trigger Button styles are only visible when **Use default trigger button** under Options is toggled on.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+
+## Component specific actions (CSA)
+
+Following actions of modal component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| open | Control the opening and closing of the modal componennt via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.modal1.open()` |
+| close | Control the closing of the modal componennt via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.modal1.close()` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/multiselect.md b/docs/versioned_docs/version-2.4.0/widgets/multiselect.md
index cdc83f7ab9..8a560a4180 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/multiselect.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/multiselect.md
@@ -75,15 +75,21 @@ Toggle on or off to control the visibility of the widget. You can programmatical
This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
-## Actions
-| Action | Description | Properties |
-| ----------- | ----------- | ------------------ |
-| `selectOption` | Select options. | pass options as parameter. ex: `components.multiselect1.selectOption(1)` |
-| `deselectOption` | Deselect options.| pass options as parameter. ex: `components.multiselect1.deselectOption(1)` |
-| `clearSelections` | Clear all selection. | ex: `components.multiselect1.clearSelections()` |
+## Exposed Variables
+| Variables | Description |
+| ----------- | ----------- |
+| values | This variable holds the values of the multiselect component in an array of objects where the objects are the options in the multiselect. You can access the value dynamically using JS: `{{components.multiselect1.values[1]}}` |
-:::info
-Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
+## Component specific actions (CSA)
+await components.multiselect1.clearSelections()
+await components.multiselect1.deselectOption(2)
+
+Following actions of multselect component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| selectOption | Select an option on the multiselect component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.multiselect1.selectOption(3)` |
+| deselectOption | Deselect a selected option on the multiselect component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.multiselect1.deselectOption(3)` |
+| clearOptions | Clear all the selected options from the multiselect component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.multiselect1.clearSelections(2,3)` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/number-input.md b/docs/versioned_docs/version-2.4.0/widgets/number-input.md
index f72242234c..115a1a37d1 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/number-input.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/number-input.md
@@ -94,4 +94,14 @@ Change the color of the number in number-input component by entering the Hex col
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable updates whenever a user selects a number on the number input. You can access the value dynamically using JS: `{{components.numberinput1.value}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/pagination.md b/docs/versioned_docs/version-2.4.0/widgets/pagination.md
index 2ee0003cc5..dae8985980 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/pagination.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/pagination.md
@@ -67,3 +67,14 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| totalPages | This variable holds the value of the `Number of Pages` set from the pagination component properties. You can access the value dynamically using JS: `{{components.pagination1.totalPages}}`|
+| currentPageIndex | This variable will hold the index of the currently selected option on the pagination component. You can access the value dynamically using JS: `{{components.pagination1.currentPageIndex}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/password-input.md b/docs/versioned_docs/version-2.4.0/widgets/password-input.md
index 019ec8fae3..b692c861a1 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/password-input.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/password-input.md
@@ -79,4 +79,15 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+
+## Exposed variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the value entered by the user onto the password input component. You can access the value dynamically using JS: `{{components.passwordinput1.value}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/pdf.md b/docs/versioned_docs/version-2.4.0/widgets/pdf.md
index bc665697fe..6af77f190f 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/pdf.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/pdf.md
@@ -54,3 +54,12 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/qr-scanner.md b/docs/versioned_docs/version-2.4.0/widgets/qr-scanner.md
index edab5ade23..db4bd789ef 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/qr-scanner.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/qr-scanner.md
@@ -69,3 +69,8 @@ Toggle on or off to control the visibility of the widget. You can programmatical
### Disable
This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
+
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/radio-button.md b/docs/versioned_docs/version-2.4.0/widgets/radio-button.md
index 9de2d08c16..758a4dad27 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/radio-button.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/radio-button.md
@@ -94,8 +94,15 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
-## Actions
-| Action | Description | Properties |
-| ----------- | ----------- | ------------------ |
-| selectOption | Select an option from the radio buttons. | `option` eg: `component.radiobutton1.selectOption('one')` |
\ No newline at end of file
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+Following actions of color picker component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| selectOption | Select an option from the radio buttons via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as: `await components.radiobutton1.selectOption('one')` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/range-slider.md b/docs/versioned_docs/version-2.4.0/widgets/range-slider.md
index 5c58220496..6a833e7571 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/range-slider.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/range-slider.md
@@ -74,3 +74,14 @@ Set the visivlity of the slider programmatically. The default value is `{{true}}
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds an object when `two handles` option is disabled or an array when `two handles` is enabled from the component properties. The value can be accessed dynamically using JS: `{{components.rangeslider1.value}}` or `{{components.rangeslider1.value[1]}}` |
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/rich-text-editor.md b/docs/versioned_docs/version-2.4.0/widgets/rich-text-editor.md
index 2267259807..96449ca498 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/rich-text-editor.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/rich-text-editor.md
@@ -54,3 +54,14 @@ Toggle on or off to control the visibility of the widget. You can programmatical
### Disable
This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
+
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the value whenever a user enters a value in the rich text editor component. You can access the value dynamically using JS: `{{components.richtexteditor1.value}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/spinner.md b/docs/versioned_docs/version-2.4.0/widgets/spinner.md
index 8557673342..7869b13be0 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/spinner.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/spinner.md
@@ -46,4 +46,12 @@ Change the color of the Spinner by entering the `Hex color code` or choosing a c
### Size
-Change the size of the Spinner by selecting options from the dropdown. It has small and large sizes available.
\ No newline at end of file
+Change the size of the Spinner by selecting options from the dropdown. It has small and large sizes available.
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/star-rating.md b/docs/versioned_docs/version-2.4.0/widgets/star-rating.md
index d204438589..39040129a0 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/star-rating.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/star-rating.md
@@ -83,3 +83,14 @@ Toggle on or off to control the visibility of the widget. You can programmatical
### Disable
This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
+
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the value whenever a rating is added on the component. The variable holds a numerical value. You can access the value dynamically using JS: `{{components.colorpicker1.selectedColorHex}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/statistics.md b/docs/versioned_docs/version-2.4.0/widgets/statistics.md
index b2fa668f13..62cd3f8e2b 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/statistics.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/statistics.md
@@ -91,3 +91,11 @@ Toggle on or off to control the visibility of the widget. You can programmatical
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/steps.md b/docs/versioned_docs/version-2.4.0/widgets/steps.md
index 5c486e0ecb..f43628f9c3 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/steps.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/steps.md
@@ -89,4 +89,14 @@ Toggle on or off to control the visibility of the widget. You can programmatical
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| currentStepId | This variable holds the id of the currently selected step on the step component. You can access the value dynamically using JS: `{{components.steps1.currentStepId}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/svg-image.md b/docs/versioned_docs/version-2.4.0/widgets/svg-image.md
index 76500c1eb8..b3a7a5ac7f 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/svg-image.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/svg-image.md
@@ -56,4 +56,12 @@ Toggle on or off to display the widget in mobile view. You can programmatically
### Visibility
-Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`.
\ No newline at end of file
+Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`.
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/table.md b/docs/versioned_docs/version-2.4.0/widgets/table.md
index 15b05f6fbd..93f9c5dff2 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/table.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/table.md
@@ -327,3 +327,16 @@ This event is triggered when filter is added, removed, or updated from the filte
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+
+## Component specific actions (CSA)
+
+Following actions of color picker component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setPage | Set the page on the table via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.setPage(2)` |
+| selectRow | Select the row on the table using via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.selectRow('id','11')` |
+| deselectRow | Deselect the row on the table via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.deselectRow()` |
+| discardChanges | Discard the changes from the table when a cell is edited via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.discardChanges()` |
+| discardNewlyAddedRows | Discard the newly added rows from the add new row popup on the table via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.discardNewlyAddedRows()` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/tabs.md b/docs/versioned_docs/version-2.4.0/widgets/tabs.md
index 0bfa2a8a2a..60930903ce 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/tabs.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/tabs.md
@@ -113,4 +113,18 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| currentTab | This variable holds the id of the current tab selected on the tabs component. You can access the value dynamically using JS: `{{components.tabs1.currentTab}}`|
+
+## Component specific actions (CSA)
+
+Following actions of Tabs component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setTab | Set the current tab of the tabs component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.tabs1.setTab(1)` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/tags.md b/docs/versioned_docs/version-2.4.0/widgets/tags.md
index ea01906c69..468a37f05d 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/tags.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/tags.md
@@ -57,4 +57,12 @@ Toggle on or off to display the widget in mobile view. You can programmatically
### Visibility
-Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`.
\ No newline at end of file
+Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`.
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/text-input.md b/docs/versioned_docs/version-2.4.0/widgets/text-input.md
index 17bf8d9003..6e02dcd90d 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/text-input.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/text-input.md
@@ -109,3 +109,22 @@ This property only accepts boolean values. If set to `{{true}}`, the widget will
:::info
Check the **component specific actions** available for this component **[here](/docs/actions/control-component)**.
:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the value whenever user a user inputs a value in the component. You can access the value dynamically using JS: `{{components.textinput1.value}}`|
+
+## Component specific actions (CSA)
+
+Following actions of text input component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setFocus | Set the focus of the cursor on the text input via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textinput1.setFocus()` |
+| setBlur | Removes the focus of the cursor on the text input via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textinput1.setBlur()` |
+| disable | disable the component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textinput1.disable(true)` |
+| visibility | Set a visibility of the text input via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textinput1.visibility(false)` |
+| setText | Set a text value on the text input component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textinput1.setText('this is input text')` |
+| clear | Clear the entered text from the text input via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textinput1.clear()` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/text.md b/docs/versioned_docs/version-2.4.0/widgets/text.md
index 8b526f6269..6f64632db3 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/text.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/text.md
@@ -74,4 +74,19 @@ This property only accepts boolean values. If set to `{{true}}`, the widget will
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| text | This variable gets updated with HEX color code whenever a user selects a color from the color picker. You can access the value dynamically using JS: `{{components.colorpicker1.selectedColorHex}}`|
+
+## Component specific actions (CSA)
+
+Following actions of color picker component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| visibility | Set a visibility of the text via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.text1.visibility(false)` |
+| setText | Set a text value on the text component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.text1.setText('this is a text')` |
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.4.0/widgets/textarea.md b/docs/versioned_docs/version-2.4.0/widgets/textarea.md
index 8ff2513929..8b46c23805 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/textarea.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/textarea.md
@@ -58,12 +58,21 @@ This is to control the visibility of the widget. If `{{false}}` the widget will
This property only accepts boolean values. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
-## Actions
-| Action | Description | Properties |
-| ----------- | ----------- | ------------------ |
-| setText | Set the text. | `text` |
-| clear | Clear the text. | |
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the value of the text area component. You can access the value dynamically using JS: `{{components.textarea1.value}}`|
+
+## Component specific actions (CSA)
+
+Following actions of color picker component can be controlled using the component specific actions(CSA):
+
+| Actions | Description |
+| ----------- | ----------- |
+| setText | Set the text on the text area component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textarea1.setText('this is a text')` |
+| clear | clear the value from the text area component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.text1.clear()` |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/timeline.md b/docs/versioned_docs/version-2.4.0/widgets/timeline.md
index f2d2bdd7e2..ee6cc8b819 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/timeline.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/timeline.md
@@ -61,3 +61,12 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/timer.md b/docs/versioned_docs/version-2.4.0/widgets/timer.md
index 18ba85b865..ec7c14a23d 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/timer.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/timer.md
@@ -77,4 +77,13 @@ This property only accepts boolean values. If set to `{{true}}`, the widget will
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the value of the timer in the following keys: **hour**, **minute**, **second**, and **mSecond**. You can access the value dynamically using JS: `{{components.timer1.value.second}}`|
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/toggle-switch.md b/docs/versioned_docs/version-2.4.0/widgets/toggle-switch.md
index 56e2ed715d..4d11ed9ecf 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/toggle-switch.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/toggle-switch.md
@@ -73,4 +73,14 @@ This property only accepts boolean values. If set to `{{true}}`, the widget will
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| value | This variable holds the boolean value i.e `true` or `false` when the toggle is on or off respectively. You can access the value dynamically using JS: `{{components.toggleswitch1.value}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/tree-select.md b/docs/versioned_docs/version-2.4.0/widgets/tree-select.md
index 64b72798a1..5bccb5c366 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/tree-select.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/tree-select.md
@@ -155,3 +155,16 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
+
+## Exposed Variables
+
+| Variables | Description |
+| ----------- | ----------- |
+| checked | This variable holds the value of all the checked items on the tree select component. You can access the value dynamically using JS: `{{components.treeselect1.checked[1]}}`|
+| expanded | This variable holds the value of expanded items on the tree select component. You can access the value dynamically using JS: `{{components.treeselect1.expanded[0]}}`|
+| checkedPathArray | This variable holds the path of the checked items in differet arrays. You can access the value dynamically using JS: `{{components.treeselect1.checkedPathArray[1][1]}}`|
+| checkedPathStrings | This variable holds the path of the checked items in strings separated by a dash(-). You can access the value dynamically using JS: `{{components.treeselect1.checkedPathStrings[2]}}`|
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_docs/version-2.4.0/widgets/vertical-divider.md b/docs/versioned_docs/version-2.4.0/widgets/vertical-divider.md
index 8cf2894a1c..769920cd73 100644
--- a/docs/versioned_docs/version-2.4.0/widgets/vertical-divider.md
+++ b/docs/versioned_docs/version-2.4.0/widgets/vertical-divider.md
@@ -54,4 +54,12 @@ Under the General accordion, you can set the value in the string format.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
\ No newline at end of file
+:::
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+## Component specific actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
diff --git a/docs/versioned_sidebars/version-1.x.x-sidebars.json b/docs/versioned_sidebars/version-1.x.x-sidebars.json
index 0753138ba2..cbc7da86dc 100644
--- a/docs/versioned_sidebars/version-1.x.x-sidebars.json
+++ b/docs/versioned_sidebars/version-1.x.x-sidebars.json
@@ -208,11 +208,13 @@
},
"items": [
"how-to/run-actions-from-runjs",
+ "how-to/intentionally-fail-js-query",
"how-to/run-query-at-specified-intervals",
"how-to/bulk-update-multiple-rows",
"how-to/access-cellvalue-rowdata",
"how-to/access-currentuser",
"how-to/oauth2-authorization",
+ "how-to/use-s3-signed-url-to-upload-docs",
"how-to/upload-files-aws",
"how-to/upload-files-gcs",
"how-to/access-users-location"
@@ -321,4 +323,4 @@
]
}
]
-}
+}
\ No newline at end of file
diff --git a/docs/versioned_sidebars/version-2.0.0-sidebars.json b/docs/versioned_sidebars/version-2.0.0-sidebars.json
index bb0aa95d25..95044555c7 100644
--- a/docs/versioned_sidebars/version-2.0.0-sidebars.json
+++ b/docs/versioned_sidebars/version-2.0.0-sidebars.json
@@ -289,10 +289,12 @@
"how-to/bulk-update-multiple-rows",
"how-to/access-currentuser",
"how-to/use-axios-in-runjs",
+ "how-to/intentionally-fail-js-query",
"how-to/import-external-libraries-using-runjs",
"how-to/run-actions-from-runjs",
"how-to/run-query-at-specified-intervals",
"how-to/access-users-location",
+ "how-to/use-s3-signed-url-to-upload-docs",
"how-to/s3-custom-endpoints",
"how-to/oauth2-authorization",
"how-to/upload-files-aws",
diff --git a/docs/versioned_sidebars/version-2.1.0-sidebars.json b/docs/versioned_sidebars/version-2.1.0-sidebars.json
index 54a661e6e3..6674ce70a3 100644
--- a/docs/versioned_sidebars/version-2.1.0-sidebars.json
+++ b/docs/versioned_sidebars/version-2.1.0-sidebars.json
@@ -290,10 +290,12 @@
"how-to/access-currentuser",
"how-to/import-external-libraries-using-runjs",
"how-to/use-axios-in-runjs",
+ "how-to/intentionally-fail-js-query",
"how-to/import-external-libraries-using-runpy",
"how-to/run-actions-from-runjs",
"how-to/run-query-at-specified-intervals",
"how-to/access-users-location",
+ "how-to/use-s3-signed-url-to-upload-docs",
"how-to/s3-custom-endpoints",
"how-to/oauth2-authorization",
"how-to/upload-files-aws",
diff --git a/docs/versioned_sidebars/version-2.2.0-sidebars.json b/docs/versioned_sidebars/version-2.2.0-sidebars.json
index 1342f28433..041c69982f 100644
--- a/docs/versioned_sidebars/version-2.2.0-sidebars.json
+++ b/docs/versioned_sidebars/version-2.2.0-sidebars.json
@@ -290,11 +290,13 @@
"how-to/bulk-update-multiple-rows",
"how-to/access-currentuser",
"how-to/use-axios-in-runjs",
+ "how-to/intentionally-fail-js-query",
"how-to/import-external-libraries-using-runpy",
"how-to/import-external-libraries-using-runjs",
"how-to/run-actions-from-runjs",
"how-to/run-query-at-specified-intervals",
"how-to/access-users-location",
+ "how-to/use-s3-signed-url-to-upload-docs",
"how-to/s3-custom-endpoints",
"how-to/oauth2-authorization",
"how-to/upload-files-aws",
diff --git a/docs/versioned_sidebars/version-2.3.0-sidebars.json b/docs/versioned_sidebars/version-2.3.0-sidebars.json
index 1342f28433..ca12fb1f4c 100644
--- a/docs/versioned_sidebars/version-2.3.0-sidebars.json
+++ b/docs/versioned_sidebars/version-2.3.0-sidebars.json
@@ -293,8 +293,10 @@
"how-to/import-external-libraries-using-runpy",
"how-to/import-external-libraries-using-runjs",
"how-to/run-actions-from-runjs",
+ "how-to/intentionally-fail-js-query",
"how-to/run-query-at-specified-intervals",
"how-to/access-users-location",
+ "how-to/use-s3-signed-url-to-upload-docs",
"how-to/s3-custom-endpoints",
"how-to/oauth2-authorization",
"how-to/upload-files-aws",
diff --git a/docs/versioned_sidebars/version-2.4.0-sidebars.json b/docs/versioned_sidebars/version-2.4.0-sidebars.json
index 96bdc2e3c6..6fb00ee9c3 100644
--- a/docs/versioned_sidebars/version-2.4.0-sidebars.json
+++ b/docs/versioned_sidebars/version-2.4.0-sidebars.json
@@ -293,9 +293,11 @@
"how-to/import-external-libraries-using-runpy",
"how-to/import-external-libraries-using-runjs",
"how-to/run-actions-from-runjs",
+ "how-to/intentionally-fail-js-query",
"how-to/run-query-at-specified-intervals",
"how-to/access-users-location",
"how-to/s3-custom-endpoints",
+ "how-to/use-s3-signed-url-to-upload-docs",
"how-to/oauth2-authorization",
"how-to/upload-files-aws",
"how-to/upload-files-gcs",
@@ -367,4 +369,4 @@
]
}
]
-}
+}
\ No newline at end of file
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 38d7aeb4db..d695257bf9 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -1196,84 +1196,7 @@
"@docsearch/css" "3.2.1"
algoliasearch "^4.0.0"
-"@docusaurus/core@2.0.1", "@docusaurus/core@^2.0.1":
- version "2.0.1"
- resolved "https://registry.npmjs.org/@docusaurus/core/-/core-2.0.1.tgz"
- integrity sha512-Prd46TtZdiixlTl8a+h9bI5HegkfREjSNkrX2rVEwJZeziSz4ya+l7QDnbnCB2XbxEG8cveFo/F9q5lixolDtQ==
- dependencies:
- "@babel/core" "^7.18.6"
- "@babel/generator" "^7.18.7"
- "@babel/plugin-syntax-dynamic-import" "^7.8.3"
- "@babel/plugin-transform-runtime" "^7.18.6"
- "@babel/preset-env" "^7.18.6"
- "@babel/preset-react" "^7.18.6"
- "@babel/preset-typescript" "^7.18.6"
- "@babel/runtime" "^7.18.6"
- "@babel/runtime-corejs3" "^7.18.6"
- "@babel/traverse" "^7.18.8"
- "@docusaurus/cssnano-preset" "2.0.1"
- "@docusaurus/logger" "2.0.1"
- "@docusaurus/mdx-loader" "2.0.1"
- "@docusaurus/react-loadable" "5.5.2"
- "@docusaurus/utils" "2.0.1"
- "@docusaurus/utils-common" "2.0.1"
- "@docusaurus/utils-validation" "2.0.1"
- "@slorber/static-site-generator-webpack-plugin" "^4.0.7"
- "@svgr/webpack" "^6.2.1"
- autoprefixer "^10.4.7"
- babel-loader "^8.2.5"
- babel-plugin-dynamic-import-node "^2.3.3"
- boxen "^6.2.1"
- chalk "^4.1.2"
- chokidar "^3.5.3"
- clean-css "^5.3.0"
- cli-table3 "^0.6.2"
- combine-promises "^1.1.0"
- commander "^5.1.0"
- copy-webpack-plugin "^11.0.0"
- core-js "^3.23.3"
- css-loader "^6.7.1"
- css-minimizer-webpack-plugin "^4.0.0"
- cssnano "^5.1.12"
- del "^6.1.1"
- detect-port "^1.3.0"
- escape-html "^1.0.3"
- eta "^1.12.3"
- file-loader "^6.2.0"
- fs-extra "^10.1.0"
- html-minifier-terser "^6.1.0"
- html-tags "^3.2.0"
- html-webpack-plugin "^5.5.0"
- import-fresh "^3.3.0"
- leven "^3.1.0"
- lodash "^4.17.21"
- mini-css-extract-plugin "^2.6.1"
- postcss "^8.4.14"
- postcss-loader "^7.0.0"
- prompts "^2.4.2"
- react-dev-utils "^12.0.1"
- react-helmet-async "^1.3.0"
- react-loadable "npm:@docusaurus/react-loadable@5.5.2"
- react-loadable-ssr-addon-v5-slorber "^1.0.1"
- react-router "^5.3.3"
- react-router-config "^5.1.1"
- react-router-dom "^5.3.3"
- rtl-detect "^1.0.4"
- semver "^7.3.7"
- serve-handler "^6.1.3"
- shelljs "^0.8.5"
- terser-webpack-plugin "^5.3.3"
- tslib "^2.4.0"
- update-notifier "^5.1.0"
- url-loader "^4.1.1"
- wait-on "^6.0.1"
- webpack "^5.73.0"
- webpack-bundle-analyzer "^4.5.0"
- webpack-dev-server "^4.9.3"
- webpack-merge "^5.8.0"
- webpackbar "^5.0.2"
-
-"@docusaurus/core@2.4.0":
+"@docusaurus/core@2.4.0", "@docusaurus/core@^2.4.0":
version "2.4.0"
resolved "https://registry.yarnpkg.com/@docusaurus/core/-/core-2.4.0.tgz#a12c175cb2e5a7e4582e65876a50813f6168913d"
integrity sha512-J55/WEoIpRcLf3afO5POHPguVZosKmJEQWKBL+K7TAnfuE7i+Y0NPLlkKtnWCehagGsgTqClfQEexH/UT4kELA==
@@ -1350,16 +1273,6 @@
webpack-merge "^5.8.0"
webpackbar "^5.0.2"
-"@docusaurus/cssnano-preset@2.0.1":
- version "2.0.1"
- resolved "https://registry.npmjs.org/@docusaurus/cssnano-preset/-/cssnano-preset-2.0.1.tgz"
- integrity sha512-MCJ6rRmlqLmlCsZIoIxOxDb0rYzIPEm9PYpsBW+CGNnbk+x8xK+11hnrxzvXHqDRNpxrq3Kq2jYUmg/DkqE6vg==
- dependencies:
- cssnano-preset-advanced "^5.3.8"
- postcss "^8.4.14"
- postcss-sort-media-queries "^4.2.1"
- tslib "^2.4.0"
-
"@docusaurus/cssnano-preset@2.4.0":
version "2.4.0"
resolved "https://registry.yarnpkg.com/@docusaurus/cssnano-preset/-/cssnano-preset-2.4.0.tgz#9213586358e0cce517f614af041eb7d184f8add6"
@@ -1370,14 +1283,6 @@
postcss-sort-media-queries "^4.2.1"
tslib "^2.4.0"
-"@docusaurus/logger@2.0.1":
- version "2.0.1"
- resolved "https://registry.npmjs.org/@docusaurus/logger/-/logger-2.0.1.tgz"
- integrity sha512-wIWseCKko1w/WARcDjO3N/XoJ0q/VE42AthP0eNAfEazDjJ94NXbaI6wuUsuY/bMg6hTKGVIpphjj2LoX3g6dA==
- dependencies:
- chalk "^4.1.2"
- tslib "^2.4.0"
-
"@docusaurus/logger@2.4.0":
version "2.4.0"
resolved "https://registry.yarnpkg.com/@docusaurus/logger/-/logger-2.4.0.tgz#393d91ad9ecdb9a8f80167dd6a34d4b45219b835"
@@ -1386,29 +1291,6 @@
chalk "^4.1.2"
tslib "^2.4.0"
-"@docusaurus/mdx-loader@2.0.1":
- version "2.0.1"
- resolved "https://registry.npmjs.org/@docusaurus/mdx-loader/-/mdx-loader-2.0.1.tgz"
- integrity sha512-tdNeljdilXCmhbaEND3SAgsqaw/oh7v9onT5yrIrL26OSk2AFwd+MIi4R8jt8vq33M0R4rz2wpknm0fQIkDdvQ==
- dependencies:
- "@babel/parser" "^7.18.8"
- "@babel/traverse" "^7.18.8"
- "@docusaurus/logger" "2.0.1"
- "@docusaurus/utils" "2.0.1"
- "@mdx-js/mdx" "^1.6.22"
- escape-html "^1.0.3"
- file-loader "^6.2.0"
- fs-extra "^10.1.0"
- image-size "^1.0.1"
- mdast-util-to-string "^2.0.0"
- remark-emoji "^2.2.0"
- stringify-object "^3.3.0"
- tslib "^2.4.0"
- unified "^9.2.2"
- unist-util-visit "^2.0.3"
- url-loader "^4.1.1"
- webpack "^5.73.0"
-
"@docusaurus/mdx-loader@2.4.0":
version "2.4.0"
resolved "https://registry.yarnpkg.com/@docusaurus/mdx-loader/-/mdx-loader-2.4.0.tgz#c6310342904af2f203e7df86a9df623f86840f2d"
@@ -1432,13 +1314,13 @@
url-loader "^4.1.1"
webpack "^5.73.0"
-"@docusaurus/module-type-aliases@2.0.1":
- version "2.0.1"
- resolved "https://registry.npmjs.org/@docusaurus/module-type-aliases/-/module-type-aliases-2.0.1.tgz"
- integrity sha512-f888ylnxHAM/3T8p1lx08+lTc6/g7AweSRfRuZvrVhHXj3Tz/nTTxaP6gPTGkJK7WLqTagpar/IGP6/74IBbkg==
+"@docusaurus/module-type-aliases@2.4.0":
+ version "2.4.0"
+ resolved "https://registry.yarnpkg.com/@docusaurus/module-type-aliases/-/module-type-aliases-2.4.0.tgz#6961605d20cd46f86163ed8c2d83d438b02b4028"
+ integrity sha512-YEQO2D3UXs72qCn8Cr+RlycSQXVGN9iEUyuHwTuK4/uL/HFomB2FHSU0vSDM23oLd+X/KibQ3Ez6nGjQLqXcHg==
dependencies:
"@docusaurus/react-loadable" "5.5.2"
- "@docusaurus/types" "2.0.1"
+ "@docusaurus/types" "2.4.0"
"@types/history" "^4.7.11"
"@types/react" "*"
"@types/react-router-config" "*"
@@ -1446,18 +1328,18 @@
react-helmet-async "*"
react-loadable "npm:@docusaurus/react-loadable@5.5.2"
-"@docusaurus/plugin-content-blog@2.0.1":
- version "2.0.1"
- resolved "https://registry.npmjs.org/@docusaurus/plugin-content-blog/-/plugin-content-blog-2.0.1.tgz"
- integrity sha512-/4ua3iFYcpwgpeYgHnhVGROB/ybnauLH2+rICb4vz/+Gn1hjAmGXVYq1fk8g49zGs3uxx5nc0H5bL9P0g977IQ==
+"@docusaurus/plugin-content-blog@2.4.0":
+ version "2.4.0"
+ resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-blog/-/plugin-content-blog-2.4.0.tgz#50dbfbc7b51f152ae660385fd8b34076713374c3"
+ integrity sha512-YwkAkVUxtxoBAIj/MCb4ohN0SCtHBs4AS75jMhPpf67qf3j+U/4n33cELq7567hwyZ6fMz2GPJcVmctzlGGThQ==
dependencies:
- "@docusaurus/core" "2.0.1"
- "@docusaurus/logger" "2.0.1"
- "@docusaurus/mdx-loader" "2.0.1"
- "@docusaurus/types" "2.0.1"
- "@docusaurus/utils" "2.0.1"
- "@docusaurus/utils-common" "2.0.1"
- "@docusaurus/utils-validation" "2.0.1"
+ "@docusaurus/core" "2.4.0"
+ "@docusaurus/logger" "2.4.0"
+ "@docusaurus/mdx-loader" "2.4.0"
+ "@docusaurus/types" "2.4.0"
+ "@docusaurus/utils" "2.4.0"
+ "@docusaurus/utils-common" "2.4.0"
+ "@docusaurus/utils-validation" "2.4.0"
cheerio "^1.0.0-rc.12"
feed "^4.2.2"
fs-extra "^10.1.0"
@@ -1468,18 +1350,18 @@
utility-types "^3.10.0"
webpack "^5.73.0"
-"@docusaurus/plugin-content-docs@2.0.1":
- version "2.0.1"
- resolved "https://registry.npmjs.org/@docusaurus/plugin-content-docs/-/plugin-content-docs-2.0.1.tgz"
- integrity sha512-2qeBWRy1EjgnXdwAO6/csDIS1UVNmhmtk/bQ2s9jqjpwM8YVgZ8QVdkxFAMWXgZWDQdwWwdP1rnmoEelE4HknQ==
+"@docusaurus/plugin-content-docs@2.4.0":
+ version "2.4.0"
+ resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-docs/-/plugin-content-docs-2.4.0.tgz#36e235adf902325735b873b4f535205884363728"
+ integrity sha512-ic/Z/ZN5Rk/RQo+Io6rUGpToOtNbtPloMR2JcGwC1xT2riMu6zzfSwmBi9tHJgdXH6CB5jG+0dOZZO8QS5tmDg==
dependencies:
- "@docusaurus/core" "2.0.1"
- "@docusaurus/logger" "2.0.1"
- "@docusaurus/mdx-loader" "2.0.1"
- "@docusaurus/module-type-aliases" "2.0.1"
- "@docusaurus/types" "2.0.1"
- "@docusaurus/utils" "2.0.1"
- "@docusaurus/utils-validation" "2.0.1"
+ "@docusaurus/core" "2.4.0"
+ "@docusaurus/logger" "2.4.0"
+ "@docusaurus/mdx-loader" "2.4.0"
+ "@docusaurus/module-type-aliases" "2.4.0"
+ "@docusaurus/types" "2.4.0"
+ "@docusaurus/utils" "2.4.0"
+ "@docusaurus/utils-validation" "2.4.0"
"@types/react-router-config" "^5.0.6"
combine-promises "^1.1.0"
fs-extra "^10.1.0"
@@ -1490,68 +1372,63 @@
utility-types "^3.10.0"
webpack "^5.73.0"
-"@docusaurus/plugin-content-pages@2.0.1":
- version "2.0.1"
- resolved "https://registry.npmjs.org/@docusaurus/plugin-content-pages/-/plugin-content-pages-2.0.1.tgz"
- integrity sha512-6apSVeJENnNecAH5cm5VnRqR103M6qSI6IuiP7tVfD5H4AWrfDNkvJQV2+R2PIq3bGrwmX4fcXl1x4g0oo7iwA==
+"@docusaurus/plugin-content-pages@2.4.0":
+ version "2.4.0"
+ resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-pages/-/plugin-content-pages-2.4.0.tgz#6169909a486e1eae0ddffff0b1717ce4332db4d4"
+ integrity sha512-Pk2pOeOxk8MeU3mrTU0XLIgP9NZixbdcJmJ7RUFrZp1Aj42nd0RhIT14BGvXXyqb8yTQlk4DmYGAzqOfBsFyGw==
dependencies:
- "@docusaurus/core" "2.0.1"
- "@docusaurus/mdx-loader" "2.0.1"
- "@docusaurus/types" "2.0.1"
- "@docusaurus/utils" "2.0.1"
- "@docusaurus/utils-validation" "2.0.1"
+ "@docusaurus/core" "2.4.0"
+ "@docusaurus/mdx-loader" "2.4.0"
+ "@docusaurus/types" "2.4.0"
+ "@docusaurus/utils" "2.4.0"
+ "@docusaurus/utils-validation" "2.4.0"
fs-extra "^10.1.0"
tslib "^2.4.0"
webpack "^5.73.0"
-"@docusaurus/plugin-debug@2.0.1":
- version "2.0.1"
- resolved "https://registry.npmjs.org/@docusaurus/plugin-debug/-/plugin-debug-2.0.1.tgz"
- integrity sha512-jpZBT5HK7SWx1LRQyv9d14i44vSsKXGZsSPA2ndth5HykHJsiAj9Fwl1AtzmtGYuBmI+iXQyOd4MAMHd4ZZ1tg==
+"@docusaurus/plugin-debug@2.4.0":
+ version "2.4.0"
+ resolved "https://registry.yarnpkg.com/@docusaurus/plugin-debug/-/plugin-debug-2.4.0.tgz#1ad513fe9bcaf017deccf62df8b8843faeeb7d37"
+ integrity sha512-KC56DdYjYT7Txyux71vXHXGYZuP6yYtqwClvYpjKreWIHWus5Zt6VNi23rMZv3/QKhOCrN64zplUbdfQMvddBQ==
dependencies:
- "@docusaurus/core" "2.0.1"
- "@docusaurus/types" "2.0.1"
- "@docusaurus/utils" "2.0.1"
+ "@docusaurus/core" "2.4.0"
+ "@docusaurus/types" "2.4.0"
+ "@docusaurus/utils" "2.4.0"
fs-extra "^10.1.0"
react-json-view "^1.21.3"
tslib "^2.4.0"
-"@docusaurus/plugin-google-analytics@2.0.1":
- version "2.0.1"
- resolved "https://registry.npmjs.org/@docusaurus/plugin-google-analytics/-/plugin-google-analytics-2.0.1.tgz"
- integrity sha512-d5qb+ZeQcg1Czoxc+RacETjLdp2sN/TAd7PGN/GrvtijCdgNmvVAtZ9QgajBTG0YbJFVPTeZ39ad2bpoOexX0w==
+"@docusaurus/plugin-google-analytics@2.4.0":
+ version "2.4.0"
+ resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-analytics/-/plugin-google-analytics-2.4.0.tgz#8062d7a09d366329dfd3ce4e8a619da8624b6cc3"
+ integrity sha512-uGUzX67DOAIglygdNrmMOvEp8qG03X20jMWadeqVQktS6nADvozpSLGx4J0xbkblhJkUzN21WiilsP9iVP+zkw==
dependencies:
- "@docusaurus/core" "2.0.1"
- "@docusaurus/types" "2.0.1"
- "@docusaurus/utils-validation" "2.0.1"
+ "@docusaurus/core" "2.4.0"
+ "@docusaurus/types" "2.4.0"
+ "@docusaurus/utils-validation" "2.4.0"
tslib "^2.4.0"
-"@docusaurus/plugin-google-gtag@2.0.1", "@docusaurus/plugin-google-gtag@^2.0.1":
- version "2.0.1"
- resolved "https://registry.npmjs.org/@docusaurus/plugin-google-gtag/-/plugin-google-gtag-2.0.1.tgz"
- integrity sha512-qiRufJe2FvIyzICbkjm4VbVCI1hyEju/CebfDKkKh2ZtV4q6DM1WZG7D6VoQSXL8MrMFB895gipOM4BwdM8VsQ==
+"@docusaurus/plugin-google-gtag@2.4.0", "@docusaurus/plugin-google-gtag@^2.4.0":
+ version "2.4.0"
+ resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-gtag/-/plugin-google-gtag-2.4.0.tgz#a8efda476f971410dfb3aab1cfe1f0f7d269adc5"
+ integrity sha512-adj/70DANaQs2+TF/nRdMezDXFAV/O/pjAbUgmKBlyOTq5qoMe0Tk4muvQIwWUmiUQxFJe+sKlZGM771ownyOg==
dependencies:
- "@docusaurus/core" "2.0.1"
- "@docusaurus/types" "2.0.1"
- "@docusaurus/utils-validation" "2.0.1"
+ "@docusaurus/core" "2.4.0"
+ "@docusaurus/types" "2.4.0"
+ "@docusaurus/utils-validation" "2.4.0"
tslib "^2.4.0"
-"@docusaurus/plugin-sitemap@2.0.1":
- version "2.0.1"
- resolved "https://registry.npmjs.org/@docusaurus/plugin-sitemap/-/plugin-sitemap-2.0.1.tgz"
- integrity sha512-KcYuIUIp2JPzUf+Xa7W2BSsjLgN1/0h+VAz7D/C3RYjAgC5ApPX8wO+TECmGfunl/m7WKGUmLabfOon/as64kQ==
+"@docusaurus/plugin-google-tag-manager@2.4.0":
+ version "2.4.0"
+ resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-tag-manager/-/plugin-google-tag-manager-2.4.0.tgz#9a94324ac496835fc34e233cc60441df4e04dfdd"
+ integrity sha512-E66uGcYs4l7yitmp/8kMEVQftFPwV9iC62ORh47Veqzs6ExwnhzBkJmwDnwIysHBF1vlxnzET0Fl2LfL5fRR3A==
dependencies:
- "@docusaurus/core" "2.0.1"
- "@docusaurus/logger" "2.0.1"
- "@docusaurus/types" "2.0.1"
- "@docusaurus/utils" "2.0.1"
- "@docusaurus/utils-common" "2.0.1"
- "@docusaurus/utils-validation" "2.0.1"
- fs-extra "^10.1.0"
- sitemap "^7.1.1"
+ "@docusaurus/core" "2.4.0"
+ "@docusaurus/types" "2.4.0"
+ "@docusaurus/utils-validation" "2.4.0"
tslib "^2.4.0"
-"@docusaurus/plugin-sitemap@^2.2.0":
+"@docusaurus/plugin-sitemap@2.4.0", "@docusaurus/plugin-sitemap@^2.4.0":
version "2.4.0"
resolved "https://registry.yarnpkg.com/@docusaurus/plugin-sitemap/-/plugin-sitemap-2.4.0.tgz#ba0eb43565039fe011bdd874b5c5d7252b19d709"
integrity sha512-pZxh+ygfnI657sN8a/FkYVIAmVv0CGk71QMKqJBOfMmDHNN1FeDeFkBjWP49ejBqpqAhjufkv5UWq3UOu2soCw==
@@ -1566,23 +1443,24 @@
sitemap "^7.1.1"
tslib "^2.4.0"
-"@docusaurus/preset-classic@^2.0.1":
- version "2.0.1"
- resolved "https://registry.npmjs.org/@docusaurus/preset-classic/-/preset-classic-2.0.1.tgz"
- integrity sha512-nOoniTg46My1qdDlLWeFs55uEmxOJ+9WMF8KKG8KMCu5LAvpemMi7rQd4x8Tw+xiPHZ/sQzH9JmPTMPRE4QGPw==
+"@docusaurus/preset-classic@^2.4.0":
+ version "2.4.0"
+ resolved "https://registry.yarnpkg.com/@docusaurus/preset-classic/-/preset-classic-2.4.0.tgz#92fdcfab35d8d0ffb8c38bcbf439e4e1cb0566a3"
+ integrity sha512-/5z5o/9bc6+P5ool2y01PbJhoGddEGsC0ej1MF6mCoazk8A+kW4feoUd68l7Bnv01rCnG3xy7kHUQP97Y0grUA==
dependencies:
- "@docusaurus/core" "2.0.1"
- "@docusaurus/plugin-content-blog" "2.0.1"
- "@docusaurus/plugin-content-docs" "2.0.1"
- "@docusaurus/plugin-content-pages" "2.0.1"
- "@docusaurus/plugin-debug" "2.0.1"
- "@docusaurus/plugin-google-analytics" "2.0.1"
- "@docusaurus/plugin-google-gtag" "2.0.1"
- "@docusaurus/plugin-sitemap" "2.0.1"
- "@docusaurus/theme-classic" "2.0.1"
- "@docusaurus/theme-common" "2.0.1"
- "@docusaurus/theme-search-algolia" "2.0.1"
- "@docusaurus/types" "2.0.1"
+ "@docusaurus/core" "2.4.0"
+ "@docusaurus/plugin-content-blog" "2.4.0"
+ "@docusaurus/plugin-content-docs" "2.4.0"
+ "@docusaurus/plugin-content-pages" "2.4.0"
+ "@docusaurus/plugin-debug" "2.4.0"
+ "@docusaurus/plugin-google-analytics" "2.4.0"
+ "@docusaurus/plugin-google-gtag" "2.4.0"
+ "@docusaurus/plugin-google-tag-manager" "2.4.0"
+ "@docusaurus/plugin-sitemap" "2.4.0"
+ "@docusaurus/theme-classic" "2.4.0"
+ "@docusaurus/theme-common" "2.4.0"
+ "@docusaurus/theme-search-algolia" "2.4.0"
+ "@docusaurus/types" "2.4.0"
"@docusaurus/react-loadable@5.5.2", "react-loadable@npm:@docusaurus/react-loadable@5.5.2":
version "5.5.2"
@@ -1592,27 +1470,27 @@
"@types/react" "*"
prop-types "^15.6.2"
-"@docusaurus/theme-classic@2.0.1":
- version "2.0.1"
- resolved "https://registry.npmjs.org/@docusaurus/theme-classic/-/theme-classic-2.0.1.tgz"
- integrity sha512-0jfigiqkUwIuKOw7Me5tqUM9BBvoQX7qqeevx7v4tkYQexPhk3VYSZo7aRuoJ9oyW5makCTPX551PMJzmq7+sw==
+"@docusaurus/theme-classic@2.4.0":
+ version "2.4.0"
+ resolved "https://registry.yarnpkg.com/@docusaurus/theme-classic/-/theme-classic-2.4.0.tgz#a5404967b00adec3472efca4c3b3f6a5e2021c78"
+ integrity sha512-GMDX5WU6Z0OC65eQFgl3iNNEbI9IMJz9f6KnOyuMxNUR6q0qVLsKCNopFUDfFNJ55UU50o7P7o21yVhkwpfJ9w==
dependencies:
- "@docusaurus/core" "2.0.1"
- "@docusaurus/mdx-loader" "2.0.1"
- "@docusaurus/module-type-aliases" "2.0.1"
- "@docusaurus/plugin-content-blog" "2.0.1"
- "@docusaurus/plugin-content-docs" "2.0.1"
- "@docusaurus/plugin-content-pages" "2.0.1"
- "@docusaurus/theme-common" "2.0.1"
- "@docusaurus/theme-translations" "2.0.1"
- "@docusaurus/types" "2.0.1"
- "@docusaurus/utils" "2.0.1"
- "@docusaurus/utils-common" "2.0.1"
- "@docusaurus/utils-validation" "2.0.1"
+ "@docusaurus/core" "2.4.0"
+ "@docusaurus/mdx-loader" "2.4.0"
+ "@docusaurus/module-type-aliases" "2.4.0"
+ "@docusaurus/plugin-content-blog" "2.4.0"
+ "@docusaurus/plugin-content-docs" "2.4.0"
+ "@docusaurus/plugin-content-pages" "2.4.0"
+ "@docusaurus/theme-common" "2.4.0"
+ "@docusaurus/theme-translations" "2.4.0"
+ "@docusaurus/types" "2.4.0"
+ "@docusaurus/utils" "2.4.0"
+ "@docusaurus/utils-common" "2.4.0"
+ "@docusaurus/utils-validation" "2.4.0"
"@mdx-js/react" "^1.6.22"
clsx "^1.2.1"
copy-text-to-clipboard "^3.0.1"
- infima "0.2.0-alpha.42"
+ infima "0.2.0-alpha.43"
lodash "^4.17.21"
nprogress "^0.2.0"
postcss "^8.4.14"
@@ -1623,17 +1501,18 @@
tslib "^2.4.0"
utility-types "^3.10.0"
-"@docusaurus/theme-common@2.0.1":
- version "2.0.1"
- resolved "https://registry.npmjs.org/@docusaurus/theme-common/-/theme-common-2.0.1.tgz"
- integrity sha512-I3b6e/ryiTQMsbES40cP0DRGnfr0E2qghVq+XecyMKjBPejISoSFEDn0MsnbW8Q26k1Dh/0qDH8QKDqaZZgLhA==
+"@docusaurus/theme-common@2.4.0":
+ version "2.4.0"
+ resolved "https://registry.yarnpkg.com/@docusaurus/theme-common/-/theme-common-2.4.0.tgz#626096fe9552d240a2115b492c7e12099070cf2d"
+ integrity sha512-IkG/l5f/FLY6cBIxtPmFnxpuPzc5TupuqlOx+XDN+035MdQcAh8wHXXZJAkTeYDeZ3anIUSUIvWa7/nRKoQEfg==
dependencies:
- "@docusaurus/mdx-loader" "2.0.1"
- "@docusaurus/module-type-aliases" "2.0.1"
- "@docusaurus/plugin-content-blog" "2.0.1"
- "@docusaurus/plugin-content-docs" "2.0.1"
- "@docusaurus/plugin-content-pages" "2.0.1"
- "@docusaurus/utils" "2.0.1"
+ "@docusaurus/mdx-loader" "2.4.0"
+ "@docusaurus/module-type-aliases" "2.4.0"
+ "@docusaurus/plugin-content-blog" "2.4.0"
+ "@docusaurus/plugin-content-docs" "2.4.0"
+ "@docusaurus/plugin-content-pages" "2.4.0"
+ "@docusaurus/utils" "2.4.0"
+ "@docusaurus/utils-common" "2.4.0"
"@types/history" "^4.7.11"
"@types/react" "*"
"@types/react-router-config" "*"
@@ -1641,52 +1520,39 @@
parse-numeric-range "^1.3.0"
prism-react-renderer "^1.3.5"
tslib "^2.4.0"
+ use-sync-external-store "^1.2.0"
utility-types "^3.10.0"
-"@docusaurus/theme-search-algolia@2.0.1":
- version "2.0.1"
- resolved "https://registry.npmjs.org/@docusaurus/theme-search-algolia/-/theme-search-algolia-2.0.1.tgz"
- integrity sha512-cw3NaOSKbYlsY6uNj4PgO+5mwyQ3aEWre5RlmvjStaz2cbD15Nr69VG8Rd/F6Q5VsCT8BvSdkPDdDG5d/ACexg==
+"@docusaurus/theme-search-algolia@2.4.0":
+ version "2.4.0"
+ resolved "https://registry.yarnpkg.com/@docusaurus/theme-search-algolia/-/theme-search-algolia-2.4.0.tgz#07d297d50c44446d6bc5a37be39afb8f014084e1"
+ integrity sha512-pPCJSCL1Qt4pu/Z0uxBAuke0yEBbxh0s4fOvimna7TEcBLPq0x06/K78AaABXrTVQM6S0vdocFl9EoNgU17hqA==
dependencies:
"@docsearch/react" "^3.1.1"
- "@docusaurus/core" "2.0.1"
- "@docusaurus/logger" "2.0.1"
- "@docusaurus/plugin-content-docs" "2.0.1"
- "@docusaurus/theme-common" "2.0.1"
- "@docusaurus/theme-translations" "2.0.1"
- "@docusaurus/utils" "2.0.1"
- "@docusaurus/utils-validation" "2.0.1"
+ "@docusaurus/core" "2.4.0"
+ "@docusaurus/logger" "2.4.0"
+ "@docusaurus/plugin-content-docs" "2.4.0"
+ "@docusaurus/theme-common" "2.4.0"
+ "@docusaurus/theme-translations" "2.4.0"
+ "@docusaurus/utils" "2.4.0"
+ "@docusaurus/utils-validation" "2.4.0"
algoliasearch "^4.13.1"
algoliasearch-helper "^3.10.0"
clsx "^1.2.1"
- eta "^1.12.3"
+ eta "^2.0.0"
fs-extra "^10.1.0"
lodash "^4.17.21"
tslib "^2.4.0"
utility-types "^3.10.0"
-"@docusaurus/theme-translations@2.0.1":
- version "2.0.1"
- resolved "https://registry.npmjs.org/@docusaurus/theme-translations/-/theme-translations-2.0.1.tgz"
- integrity sha512-v1MYYlbsdX+rtKnXFcIAn9ar0Z6K0yjqnCYS0p/KLCLrfJwfJ8A3oRJw2HiaIb8jQfk1WMY2h5Qi1p4vHOekQw==
+"@docusaurus/theme-translations@2.4.0":
+ version "2.4.0"
+ resolved "https://registry.yarnpkg.com/@docusaurus/theme-translations/-/theme-translations-2.4.0.tgz#62dacb7997322f4c5a828b3ab66177ec6769eb33"
+ integrity sha512-kEoITnPXzDPUMBHk3+fzEzbopxLD3fR5sDoayNH0vXkpUukA88/aDL1bqkhxWZHA3LOfJ3f0vJbOwmnXW5v85Q==
dependencies:
fs-extra "^10.1.0"
tslib "^2.4.0"
-"@docusaurus/types@2.0.1":
- version "2.0.1"
- resolved "https://registry.npmjs.org/@docusaurus/types/-/types-2.0.1.tgz"
- integrity sha512-o+4hAFWkj3sBszVnRTAnNqtAIuIW0bNaYyDwQhQ6bdz3RAPEq9cDKZxMpajsj4z2nRty8XjzhyufAAjxFTyrfg==
- dependencies:
- "@types/history" "^4.7.11"
- "@types/react" "*"
- commander "^5.1.0"
- joi "^17.6.0"
- react-helmet-async "^1.3.0"
- utility-types "^3.10.0"
- webpack "^5.73.0"
- webpack-merge "^5.8.0"
-
"@docusaurus/types@2.4.0":
version "2.4.0"
resolved "https://registry.yarnpkg.com/@docusaurus/types/-/types-2.4.0.tgz#f94f89a0253778b617c5d40ac6f16b17ec55ce41"
@@ -1701,13 +1567,6 @@
webpack "^5.73.0"
webpack-merge "^5.8.0"
-"@docusaurus/utils-common@2.0.1":
- version "2.0.1"
- resolved "https://registry.npmjs.org/@docusaurus/utils-common/-/utils-common-2.0.1.tgz"
- integrity sha512-kajCCDCXRd1HFH5EUW31MPaQcsyNlGakpkDoTBtBvpa4EIPvWaSKy7TIqYKHrZjX4tnJ0YbEJvaXfjjgdq5xSg==
- dependencies:
- tslib "^2.4.0"
-
"@docusaurus/utils-common@2.4.0":
version "2.4.0"
resolved "https://registry.yarnpkg.com/@docusaurus/utils-common/-/utils-common-2.4.0.tgz#eb2913871860ed32e73858b4c7787dd820c5558d"
@@ -1715,17 +1574,6 @@
dependencies:
tslib "^2.4.0"
-"@docusaurus/utils-validation@2.0.1":
- version "2.0.1"
- resolved "https://registry.npmjs.org/@docusaurus/utils-validation/-/utils-validation-2.0.1.tgz"
- integrity sha512-f14AnwFBy4/1A19zWthK+Ii80YDz+4qt8oPpK3julywXsheSxPBqgsND3LVBBvB2p3rJHvbo2m3HyB9Tco1JRw==
- dependencies:
- "@docusaurus/logger" "2.0.1"
- "@docusaurus/utils" "2.0.1"
- joi "^17.6.0"
- js-yaml "^4.1.0"
- tslib "^2.4.0"
-
"@docusaurus/utils-validation@2.4.0":
version "2.4.0"
resolved "https://registry.yarnpkg.com/@docusaurus/utils-validation/-/utils-validation-2.4.0.tgz#1ed92bfab5da321c4a4d99cad28a15627091aa90"
@@ -1737,27 +1585,6 @@
js-yaml "^4.1.0"
tslib "^2.4.0"
-"@docusaurus/utils@2.0.1":
- version "2.0.1"
- resolved "https://registry.npmjs.org/@docusaurus/utils/-/utils-2.0.1.tgz"
- integrity sha512-u2Vdl/eoVwMfUjDCkg7FjxoiwFs/XhVVtNxQEw8cvB+qaw6QWyT73m96VZzWtUb1fDOefHoZ+bZ0ObFeKk9lMQ==
- dependencies:
- "@docusaurus/logger" "2.0.1"
- "@svgr/webpack" "^6.2.1"
- file-loader "^6.2.0"
- fs-extra "^10.1.0"
- github-slugger "^1.4.0"
- globby "^11.1.0"
- gray-matter "^4.0.3"
- js-yaml "^4.1.0"
- lodash "^4.17.21"
- micromatch "^4.0.5"
- resolve-pathname "^3.0.0"
- shelljs "^0.8.5"
- tslib "^2.4.0"
- url-loader "^4.1.1"
- webpack "^5.73.0"
-
"@docusaurus/utils@2.4.0":
version "2.4.0"
resolved "https://registry.yarnpkg.com/@docusaurus/utils/-/utils-2.4.0.tgz#fdf0c3545819e48bb57eafc5057495fd4d50e900"
@@ -1862,7 +1689,7 @@
unist-builder "2.0.3"
unist-util-visit "2.0.3"
-"@mdx-js/react@^1.6.21", "@mdx-js/react@^1.6.22":
+"@mdx-js/react@^1.6.22":
version "1.6.22"
resolved "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz"
integrity sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==
@@ -3000,7 +2827,7 @@ clone-response@^1.0.2:
dependencies:
mimic-response "^1.0.0"
-clsx@^1.1.1, clsx@^1.2.1:
+clsx@^1.2.1:
version "1.2.1"
resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz"
integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
@@ -3752,11 +3579,6 @@ esutils@^2.0.2:
resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
-eta@^1.12.3:
- version "1.12.3"
- resolved "https://registry.npmjs.org/eta/-/eta-1.12.3.tgz"
- integrity sha512-qHixwbDLtekO/d51Yr4glcaUJCIjGVJyTzuqV4GPlgZo1YpgOKG+avQynErZIYrfM6JIJdtiG2Kox8tbb+DoGg==
-
eta@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/eta/-/eta-2.0.1.tgz#199e675359cb6e19d38f29e1f405e1ba0e79a6df"
@@ -4544,10 +4366,10 @@ indent-string@^4.0.0:
resolved "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz"
integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
-infima@0.2.0-alpha.42:
- version "0.2.0-alpha.42"
- resolved "https://registry.npmjs.org/infima/-/infima-0.2.0-alpha.42.tgz"
- integrity sha512-ift8OXNbQQwtbIt6z16KnSWP7uJ/SysSMFI4F87MNRTicypfl4Pv3E2OGVv6N3nSZFJvA8imYulCBS64iyHYww==
+infima@0.2.0-alpha.43:
+ version "0.2.0-alpha.43"
+ resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.43.tgz#f7aa1d7b30b6c08afef441c726bac6150228cbe0"
+ integrity sha512-2uw57LvUqW0rK/SWYnd/2rRfxNA5DDNOh33jxF7fy46VWoNhGxiUQyVZHbBMjQ33mQem0cjdDVwgWVAmlRfgyQ==
inflight@^1.0.4:
version "1.0.6"
@@ -6091,9 +5913,9 @@ react-dev-utils@^12.0.1:
strip-ansi "^6.0.1"
text-table "^0.2.0"
-react-dom@^17.0.1:
+react-dom@^17.0.2:
version "17.0.2"
- resolved "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
+ resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
dependencies:
loose-envify "^1.1.0"
@@ -6193,9 +6015,9 @@ react-textarea-autosize@^8.3.2:
use-composed-ref "^1.3.0"
use-latest "^1.2.1"
-react@^17.0.1:
+react@^17.0.2:
version "17.0.2"
- resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
+ resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
dependencies:
loose-envify "^1.1.0"
@@ -7337,6 +7159,11 @@ use-latest@^1.2.1:
dependencies:
use-isomorphic-layout-effect "^1.1.1"
+use-sync-external-store@^1.2.0:
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+ integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
version "1.0.2"
resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index e26de5f87f..cf38665116 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -1,74 +1,80 @@
module.exports = {
- env: {
- browser: true,
- amd: true,
- es2021: true,
- node: true,
- 'jest/globals': true,
- },
- extends: [
- 'eslint:recommended',
- 'plugin:react/recommended',
- 'plugin:react-hooks/recommended',
- 'plugin:import/errors',
- 'plugin:import/warnings',
- 'plugin:prettier/recommended',
+ root: true,
+ overrides: [
+ {
+ files: ['**/*.js', '**/*.jsx'],
+ env: {
+ browser: true,
+ amd: true,
+ es2021: true,
+ node: true,
+ 'jest/globals': true,
+ },
+ extends: [
+ 'eslint:recommended',
+ 'plugin:react/recommended',
+ 'plugin:react-hooks/recommended',
+ 'plugin:import/errors',
+ 'plugin:import/warnings',
+ 'plugin:prettier/recommended',
+ ],
+ parser: '@babel/eslint-parser',
+ parserOptions: {
+ requireConfigFile: false,
+ babelOptions: {
+ configFile: __dirname + '/babel.config.js',
+ },
+ ecmaFeatures: {
+ jsx: true,
+ },
+ ecmaVersion: 12,
+ sourceType: 'module',
+ },
+ plugins: ['react', 'prettier', 'jest'],
+ rules: {
+ 'prettier/prettier': [
+ 'error',
+ {
+ semi: true,
+ trailingComma: 'es5',
+ printWidth: 120,
+ singleQuote: true,
+ arrowParens: 'always',
+ proseWrap: 'preserve',
+ },
+ ],
+ 'react/prop-types': 0,
+ 'react/display-name': 'off',
+ 'no-unused-vars': [
+ 'warn',
+ {
+ argsIgnorePattern: '^_',
+ varsIgnorePattern: '^_',
+ },
+ ],
+ 'react/no-deprecated': 0,
+ 'no-prototype-builtins': 0,
+ 'jest/no-disabled-tests': 'warn',
+ 'jest/no-focused-tests': 'error',
+ 'jest/no-identical-title': 'error',
+ 'jest/prefer-to-have-length': 'warn',
+ 'jest/valid-expect': 'error',
+ 'import/no-unresolved': ['error', { ignore: ['^@/', 'react-hot-toast', 'react-i18next'] }],
+ 'react/no-unknown-property': 'off',
+ },
+ settings: {
+ react: {
+ version: 'detect',
+ },
+ 'import/resolver': 'webpack',
+ },
+ globals: {
+ path: true,
+ fetch: true,
+ process: true,
+ module: true,
+ __dirname: true,
+ },
+ },
],
- parser: '@babel/eslint-parser',
- parserOptions: {
- requireConfigFile: false,
- babelOptions: {
- configFile: __dirname + '/babel.config.js',
- },
- ecmaFeatures: {
- jsx: true,
- },
- ecmaVersion: 12,
- sourceType: 'module',
- },
- plugins: ['react', 'prettier', 'jest'],
- rules: {
- 'prettier/prettier': [
- 'error',
- {
- semi: true,
- trailingComma: 'es5',
- printWidth: 120,
- singleQuote: true,
- arrowParens: 'always',
- proseWrap: 'preserve',
- },
- ],
- 'react/prop-types': 0,
- 'react/display-name': 'off',
- 'no-unused-vars': [
- 'warn',
- {
- argsIgnorePattern: '^_',
- varsIgnorePattern: '^_',
- },
- ],
- 'react/no-deprecated': 0,
- 'no-prototype-builtins': 0,
- 'jest/no-disabled-tests': 'warn',
- 'jest/no-focused-tests': 'error',
- 'jest/no-identical-title': 'error',
- 'jest/prefer-to-have-length': 'warn',
- 'jest/valid-expect': 'error',
- 'import/no-unresolved': ['error', { ignore: ['^@/', 'react-hot-toast', 'react-i18next'] }],
- 'react/no-unknown-property': 'off',
- },
- settings: {
- react: {
- version: 'detect',
- },
- 'import/resolver': 'webpack',
- },
- globals: {
- path: true,
- fetch: true,
- process: true,
- module: true,
- __dirname: true,
- },
};
diff --git a/frontend/assets/images/icons/app-icons/more-vertical.svg b/frontend/assets/images/icons/app-icons/more-vertical.svg
new file mode 100644
index 0000000000..37acaa4623
--- /dev/null
+++ b/frontend/assets/images/icons/app-icons/more-vertical.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/assets/images/no-apps.svg b/frontend/assets/images/no-apps.svg
index dc9d656f0b..ebd604e9ac 100644
--- a/frontend/assets/images/no-apps.svg
+++ b/frontend/assets/images/no-apps.svg
@@ -1,4 +1,4 @@
-
- 
+2. Click on the **Add new datasource** button, a modal will pop-up with all the available global datasources.
+ 
- 2. **Query Panel**: Go to the query panel at the bottom, click on the `+Add` button and then click `Add datasource` button
+ 
+ 
- 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
- - **Body** : You can enter the body text either in the form of `raw text` or `html` in their respective fields.
- - **Attachments** : Attachments can be added to a SMTP query by referencing the file from the `File Picker` component in the attachments field.
-
- For example, you can set the `Attachments` field value to `{{ components.filepicker1.file }}` or you can pass an array of `{{ name: 'filename.jpg', dataURL: '......' }}` object to accomplish this.
-
-
-
+
+
+ 
+
+
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+
+
-
+
+
+
+
+
+