Merge pull request #9888 from ToolJet/release/database-1.1.1

Release: Marketplace Sprint 1 (v2.61.0)

.version

@@ -1 +1 @@
-2.60.4
+2.61.0

docs/docs/app-builder/customcss.md

@@ -5,52 +5,103 @@ title: Custom Styles
 
 <div className='badge badge--primary heading-badge'>Available on: Paid plans</div>
 
-Custom Styles feature enables the implementation of theming on ToolJet apps, allowing users to inject their own CSS styling to override the default app styling. This feature fulfills the requirement of allowing users to easily customize the appearance of their apps.
-
-Custom Styles helps in maintaining consistent themes across the ToolJet apps, alleviating the repetitive burden of styling components whenever a new app is created. By enabling users to apply standardized styles, this feature ensures that each app adheres to a unified theme without the need to manually restyle the components from scratch. As a result, the ToolJet app development process becomes more efficient, and the visual coherence of the apps is preserved, providing users with a seamless experience across all applications.
+The Custom Styles feature in ToolJet allows users to apply their own CSS, overriding the default app styles. This enables easy customization of app appearance, and maintains consistent themes across all ToolJet apps. By using standardized styles, users avoid the repetitive task of manually styling components for each new app, enhancing development efficiency and ensuring visual coherence for a seamless user experience
 
 <div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/customcss-v2.gif" alt="Custom CSS" />
-
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/customcss-v2.gif" alt="Custom CSS" /> 
 </div>
 
-## Applying Custom Styles
+## Applying Custom Styles To All Components
 
-To add Custom Styles to ToolJet apps, users should follow these steps:
+Follow these steps to apply custom styles in your ToolJet apps:
 
-1. Go to the **Custom Styles** Page, accessible under **Workspace Settings** from the ToolJet dashboard.
- <div style={{textAlign: 'center'}}>
+- Navigate to the **Custom Styles** page from **Workspace Settings** on the ToolJet dashboard
 
- <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/settings-v2.png" alt="Custom CSS" />
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/custom-styles.png" alt="Custom CSS" />
+</div>
+<br/>
 
- </div>
+- To modify the default colors of components, use their class names, which follow the format `_tooljet-<component>`. 
 
-2. When creating a new app on ToolJet, the default button color is **blue**. If you wish to change the default button color to **red**, you must identify the class of the button component, which follows the format `_tooljet-<component>`.
- - The browser's inspector can also help you find the class of the component. Classes are added for both **pages** and **components**, and there are two types of selectors for classes: **Common** (`_tooljet-<component>`) and **Individual** (`_tooljet-<defaultComponentName>`).
- <div style={{textAlign: 'center'}}>
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/component-class.png" alt="Component Class" />
+</div>
+<br/>
 
- <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/selectors.png" alt="Custom CSS" />
+- You'll need to identify the specific sub-class(or HTML tags) of each component to target particular attributes. The browser's inspector will allow you to easily find the sub-class(or HTML tags) of the specific 
+properties. 
 
- </div>
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/button-class-subclass.png" alt="Sub-Class" />
+</div>
+<br/>
 
-3. Once the class (**`_tooljet-Button`**) is identified, navigate to the Custom Styles page and apply the desired CSS changes for that class, as shown in the following CSS code:
- ```css
- ._tooljet-Button button {
-     background: red !important;
- }
- ._tooljet-Button button:hover {
-     background: green !important;
- }
- ```
+- After locating the specific sub-class(or HTML tag), refer it in the **Custom Styles** section and add styling to it. For instance, for the Button component above, the the below CSS will change the background color:
 
-4. By applying this custom styles, all future instances of the app will have buttons with a red default color, and they will turn green on hover. This eliminates the need for users to individually edit button properties, streamlining the customization process.
- :::info
- Custom Styles are injected at the workspace level, ensuring consistent theming across all apps within the workspace.
- :::
+```css
+._tooljet-Button button {
+    background-color: #152A65 !important;
+}
+```
 
- <div style={{textAlign: 'center'}}>
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/button-component-customcss.png" alt="Button Custom CSS" />
+</div>
+<br/>
 
- <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/styledapp-v2.gif" alt="Custom CSS" />
+- Similarly, the code below can be used to change the background color of the Filter button on a Table component.
 
- </div>
+```css
+._tooljet-Table .table-card-header button {
+    background-color: #152A65 !important;
+}
+```
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/filter-button-customcss.png" alt="Filter Custom CSS" />
+</div>
+<br/>
+
+- The code below will change the font size and color of the Text Input and Number Input labels.
+
+```css
+._tooljet-TextInput p  {
+	color: #152A65 !important;
+    font-size: 16px !important;
+    font-weight: bold !important;
+}
+
+._tooljet-NumberInput p  {
+	color: #152A65 !important;
+    font-size: 16px !important;
+    font-weight: bold !important;
+}
+```
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/input-fields-customcss.png" alt="Input Field Custom CSS" />
+</div>
+
+
+## Applying Custom Styles To Individual Components
+
+To modify the colors of individual components, use their class names, which follow the format `_tooljet-<component_name>`. Here, the component name refers to the name of the component that is set in the application.
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/individual-class.png" alt="Individual Class Custom CSS" />
+</div>
+<br/>
+
+- The color of the Button component above can be changed using the code below:
+
+```css
+._tooljet-addIncomeButton button {
+    background-color: blue !important;
+}
+```
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/individual-customcss.png" alt="Individual Class Custom CSS" />
+</div>
+<br/>
+
+In conclusion, Custom CSS feature lets you override default styles with your own CSS. By providing the flexibility to apply both global and component-specific customizations, this feature enhances the visual coherence and branding of your apps. cs

docs/docs/app-builder/examples/sharing-apps.md

@@ -57,4 +57,4 @@ Gitsync can be used to maintain application version control and facilitate colla
 - Follow the prompts to connect your ToolJet app with a GitHub repository.
 - Utilize git operations to manage app development across different branches and versions.
 
-Read more about Gitsync **[here](/docs/gitsync.md)**.
+Read more about Gitsync **[here](/docs/gitsync)**.

docs/docs/org-management/workspaces/workspace-variables-migration.md

@@ -0,0 +1,62 @@
+---
+id: workspace-variables-migration
+title: Workspace Variables Migration Guide
+---
+
+
+Workspace variables are currently marked as deprecated, indicating that it will be removed in future releases. This guide will help you migrate from Workspace Variables to Workspace Constants. Workspace Constants are designed to be resolved on the server-side only, ensuring a high level of security. You can assign users to a specific role and provide create, update, and delete access to Workspace Constants based on the role. By default, the Workspace admin has full access to Workspace Constants.
+
+
+## Syntax
+
+The syntax for using **Workspace Constants** is different from **Workspace Variables**. For example, if you have a variables named **psql_host**, we used to use `%%client.psql_host%%` but for Workspace Constants, we use `{{constants.psql_host}}`. Since Workspace Constants are resolved only on the server-side, there is no option to use them in the client-side.
+
+## Migrating from Workspace Variables to Workspace Constants
+
+To migrate from Workspace Variables to Workspace Constants, follow these steps:
+
+- Access the ToolJet Dashboard and navigate to Workspace Settings.
+- Select the Workspace Constants tab.
+- Click on the **Create New Constant** button.
+- A drawer will appear. Enter the desired name and value for the constant.
+- Click the **Add Constant** button to save the constant.
+- Repeat the above steps for all the Workspace Variables.
+
+<div style={{textAlign: 'center'}}>
+    
+<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/workspace-const/create-constant-v2.gif" alt="Workspace constants: create"/>
+    
+</div>
+
+Once you have migrated all the Workspace Variables to Workspace Constants, you can replace the Workspace Variables in your apps with their corresponding Workspace Constants.
+
+### Replacing Client Workspace Variables with Workspace Constants
+
+- Navigate to the app or data source where you want to replace the Workspace Variables.
+- Replace the Workspace Variables with their corresponding Workspace Constants.
+- For example, if you have a Client Workspace Variable like `%%client.pi%%`, replace it with `{{constants.pi}}`.
+
+<div style={{textAlign: 'center'}}>
+<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/workspace-const/client-side-variable.gif" alt="Workspace constants"/>
+</div>
+
+### Replacing Server Workspace Variables with Workspace Constants
+- Navigate to the app or data source where you want to replace the Workspace Variables.
+- Replace the Workspace Variables with their corresponding Workspace Constants.
+- For example, if you have a Server Workspace Variable like `%%server.psql_host%%`, replace it with `{{constants.psql_host}}`.
+
+<div style={{textAlign: 'center'}}>
+<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/workspace-const/server-side-variable.gif" alt="Workspace constants"/>
+</div>
+
+
+### Deleting Workspace Variables
+
+Once you have migrated all the Workspace Variables to Workspace Constants, and tested your apps, you can delete the Workspace Variables. To delete a Workspace Variable, follow these steps:
+
+- Navigate to the Workspace Variables tab in the Workspace Settings.
+- Click on the delete icon next to the Workspace Variable you want to delete.
+
+<div style={{textAlign: 'center'}}>
+<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/workspace-const/delete-variable.gif" alt="Workspace constants"/>
+</div>

docs/docs/tooljet-db/database-editor.md

@@ -6,40 +6,257 @@ title: Database Editor
 You can manage the ToolJet Database directly from the Database Editor. ToolJet Database organizes the data into **tables** that can have different structures. All the tables will be listed lexicographically on the left. Click on any of the tables to view the table data.
 
 <div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/tables.png" alt="ToolJet database" />
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/tables-v2.png" alt="ToolJet database" />
 </div>
 
 The sidebar on the left can also be collapsed to give more space to the database editor.
 
 <div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/collapse.png" alt="ToolJet database" />
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/collapse-v2.gif" alt="ToolJet database"/>
 </div>
-
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
-### Create New Table
+## Create New Table
 
-To create a new table in ToolJet Database, click on the **Create New Table** button on the top left corner of the Database editor.
-
-<div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/new.png" alt="ToolJet database" />
-</div>
-
-When you click the **Create New Table** button, a drawer opens from the right, allowing you to enter the details of your new table.
-
-<div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/newtable.png" alt="ToolJet database" />
-</div>
+To create a new table in the ToolJet Database:
+ - Click on the **Create New Table** button on the top left corner of the Database editor.
+ - A drawer will open from the right. Enter the details of your new table.
 
 #### To create a new table, you'll need to:
-- Enter a **Table name**
-- Add **Columns** (`id` column with `serial` data type is automatically created as the **primary key** of the table)
+- Enter a **Table name**.
+- By default, an **id** column with **serial** data type is automatically created as the **primary key** of the table. You can change the primary key to any other column.
+
+<div style={{textAlign: 'center'}}>
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/create-table-v2.png" alt="ToolJet database" />
+</div>
+
+- Add Columns:
+
+| **Option** | **Description** |
+| --- | --- |
+| **Column name** | Enter a unique name for the column. |
+| **Data type** | Select the appropriate data type for the column from the dropdown menu. |
+| **Default value (optional)** | Specify any default value to be assigned to the column. If left blank, the column will allow null values. |
+| **Primary Key** | Check this box to designate the column as the [Primary Key](#primary-key). Multiple columns can be selected, creating a composite primary key. |
+| **NULL/NOT NULL toggle** | Use this toggle to determine whether the column should allow null values or require a value. By default, null values are permitted. |
+| **Unique toggle** | Click the kebab menu and toggle the **Unique** option to add a unique constraint to the column, ensuring all values are distinct. By default, duplicate values are allowed. |
+| **Foreign Key** | Click the **+ Add Relation** button to establish a foreign key relationship, linking this column to a primary key or unique constraint column(s) in another table. |
 
 </div>
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
-### Supported Data Types
+## Column Constraints
+
+ToolJet Database supports several column constraints to maintain data integrity and enforce rules on the data stored in the tables. These constraints include:
+
+**Primary Key**: The primary key constraint ensures that the values in the designated column(s) are unique and not null across all rows in the table. It serves as a unique identifier for each record in the table.
+
+**Foreign Key**: The foreign key constraint establishes a link between the data in two tables, ensuring referential integrity. It requires that the values in the foreign key column(s) of the source table match the values in the primary key or unique constraint column(s) of the target table.
+ - Source Table: The current table on which constraint is to be added.
+ - Target Table: The table that contains the column to be referenced.
+
+**Unique**: The unique constraint ensures that the values in the designated column(s) are unique across all rows in the table, allowing for null values.
+
+**Not Null**: The not null constraint ensures that the designated column(s) cannot have null values, requiring a value for every row in the table.
+
+### Permissible Constraints per Data Type
+
+| Data Type | Primary Key | Foreign Key | Unique | Not Null |
+|:-----------:|:--------------:|:-------------:|:--------:|:----------:|
+| serial    |  ✅          |       ❌     | ✅      | ✅        |
+| varchar   |  ✅          | ✅           | ✅      | ✅        |
+| int       |  ✅          | ✅           | ✅      | ✅        |
+| bigint    |  ✅          | ✅           | ✅      | ✅        |
+| float     |  ✅          | ✅           | ✅      | ✅        |
+| boolean   |  ❌          |     ❌       | ❌      | ✅        |
+
+## Primary Key
+
+ToolJet Database supports both single field and composite primary keys.
+
+### Creating Single Field Primary Key
+
+When creating a new table, an `id` column with the `serial` data type is automatically generated to serve as the primary key. However, you can designate any other column as the primary key if desired. The primary key column can be of any supported data type except Boolean.
+The constraints for the primary key column ensure the integrity and uniqueness of the primary key, which is essential for properly identifying and referencing records within the table. To create a single field primary key, follow these steps:
+
+ - Create or edit an existing table.
+ - Check the **Primary** checkbox on the column which you want to set as the primary key. 
+ - This will automatically add the primary key constraint to the column.
+ - Click on the **Create** button to create the table.
+
+<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/single-field-pk.gif" alt="ToolJet database"/>
+
+#### Constraints
+- The primary key column cannot contain null values.
+- The primary key column must have unique values across all rows.
+
+#### Limitations
+- Every table must have at least one primary key.
+- The primary key column cannot have the Boolean data type.
+
+### Creating Composite Primary Key
+
+You have the option to convert an existing primary key column into a composite primary key, consisting of two or more columns.
+By utilizing a composite primary key, you can uniquely identify records based on multiple column values, providing greater flexibility and control over your data structure. To create a composite primary key, follow these steps:
+
+ - Create or edit an existing table.
+ - Check the **Primary** checkbox on multiple columns to set them as the composite primary key. 
+ - This will automatically add the primary key constraint to the selected columns.
+ - Click on the **Save changes/Create** button to update/create the table.
+
+<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/composite-pk.gif" alt="ToolJet database"/>
+
+#### Constraints
+- None of the composite key columns can contain null values.
+- The combination of values across all composite key columns must be unique for each row in the table.
+
+#### Limitation
+- The composite key columns cannot be of the Boolean data type.
+
+### Modifying Primary Key
+
+After creating a table, you can designate any column as the primary key, provided it adheres to the required constraints. If the chosen column already contains data, the existing values must comply with the primary key constraints. However, you cannot update or modify the primary key of a target table if it is currently being referenced as a foreign key in any other source tables. To modify the primary key, follow these steps:
+
+ - Edit an existing table.
+ - Check the **Primary** checkbox on the column which you want to set as the primary key.
+ - This will automatically add the primary key constraint to the column.
+ - Uncheck the **Primary** checkbox on the existing primary key column. The primary key constraints will still stay in place for this column but are no longer necessary.
+ - Click on the **Save changes** button to update the table.
+
+<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/modify-pk.gif" alt="ToolJet database"/>
+
+### Deleting Primary Key
+
+An existing primary key column can be deleted through the **Edit Table** panel. To delete the primary key column, follow these steps:
+
+- Edit an existing table.
+- Select a different column to serve as the new primary key for the table.
+- Once the new primary key column is designated, you can proceed to the existing primary key column.
+- Uncheck the **Primary** checkbox for the existing primary key column to remove its primary key status.
+- After removing the primary key constraint, you can delete this column from the table.
+
+You cannot delete a Primary Key of a target table if it is being used as a foreign key in any source table(s).
+
+<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/delete-pk.gif" alt="ToolJet database"/>
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## Foreign Key
+
+A foreign key relation refers to linking one column or set of columns of the current table with one column or set of columns in an existing table. This relationship establishes a connection between the two tables, enabling the current source table to reference the existing target table. While creating a Foreign Key relationship, you can select the desired [action](#available-actions) to be performed on the source row when the referenced(target) row is updated or deleted.
+
+### Constraints
+- The target table must contain a column having the same data type as the column in the source table.
+- The column that has to be referenced in the target table must have Unique constraint explicitly.
+- The target table must already exist before adding the Foreign Key relationship in the source table.
+
+### Limitations
+- Self-references are not allowed i.e. Target table and Source table cannot be the same.
+- No foreign key can be created with a column of serial data type in the source table.
+- No foreign key can be reference a column in target table that is a part of its composite Primary key.
+
+### Exception
+- The foreign key created with a column having integer data type in the source table can also reference a column of serial data type in the target table.
+
+### Creating Foreign Key
+
+While creating/editing a table(target), you will be able to add one or more than one Foreign Keys referencing the column(s) of other existing(source) tables.
+To create a Foreign Key relationship, follow these steps:
+
+ - Create or edit an existing table.
+ - Click on the `+ Add Relation` button under the Foreign key relation section.
+ - The table which is being created/edited is the source table.
+ - Under the source section, select the desired column from the dropdown menu.
+ - Under the target section, select the desired target table and Column from the dropdown menu.
+ - Under the Actions section, select the desired action to be performed when the referenced row is updated or deleted.
+ - Click on the `Create` button to create the Foreign Key relationship.
+
+<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/create-fk.gif" alt="ToolJet database"/>
+
+
+</div>
+
+### Foreign Key Actions
+
+When creating a foreign key relationship, ToolJet Database lets you choose from several actions to be performed on the source row when the referenced row in the target table is updated or deleted.
+
+#### On Update
+
+| Option | Description |
+| --- | --- |
+| Restrict (default) | Restrict any updates on target table if any referenced row is being updated. |
+| Cascade | Any updates in referenced row in target table will show up in the source table as well. |
+| Set NULL | Any updates in referenced row in target table will set it's instances in the source table as NULL. |
+| Set to Default | Any updates referenced row in target table will set it's instances in the source table as default value of foreign key column of source table. |
+
+#### On Delete
+
+| Option | Description |
+| --- | --- |
+| Restrict (default) | Restrict any deletion on target table if any referenced row is being updated. |
+| Cascade | Any deletion of referenced row in target table will delete the row having it's instance in the source table as well. |
+| Set NULL | Any deletion of referenced row in target table will set it's instances in the source table as NULL. |
+| Set to Default | Any deletion of referenced row in target table will set it's instances in the source table as default value of foreign key column of source table. |
+
+### Referential Integrity
+
+The foreign key constraint ensures referential integrity between the source and target tables. This constraint enforces that the foreign key column in the source table has one of the unique values present in the foreign key column in the target table. <br/>
+- When creating a new row in the source table the column with the foreign key relation will have a dropdown with the unique values present in the target table. This ensures that the data in the source table is always consistent with the data in the target table. 
+- On the bottom of the dropdown, there is a button to **Open referenced table** which will take you to the target table.
+
+<div style={{textAlign: 'center'}}>
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/create-new-row-fk.png" alt="ToolJet database" />
+</div>
+
+- When editing the value of a foreign key cell in an existing row of the source table, the dropdown will show the unique values present in the target table. This ensures that even when the data in the source table is being updated, it is always consistent with the data in the target table.
+
+<div style={{textAlign: 'center'}}>
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/edit-row-fk.png" alt="ToolJet database" />
+</div>
+
+
+### Example
+
+Let's consider an example where we want to create a foreign key relationship between the `Orders` and `Customers` tables in an e-commerce application.
+
+First, create the following two tables in the ToolJet Database:
+
+**Customers**
+
+| Column Name | Data Type | Primary Key    | Not Null | Unique   |
+|-------------|-----------|:--------------:|:--------:|:--------:|
+| customer_id | int       | ✅             | ✅        | ✅       |
+| name        | varchar   | ❌             | ✅        | ❌       |
+| email       | varchar   | ❌             | ✅        | ✅       |
+
+**Orders**
+
+| Column Name  | Data Type | Primary Key    | Not Null | Unique   |
+|--------------|-----------|:--------------:|:--------:|:--------:|
+| order_id     | int       |  ✅            | ✅        | ✅       |
+| customer_id  | int       |  ❌            | ✅        | ❌       |
+| order_date   | varchar   |  ❌            | ✅        | ❌       |
+| total_amount | float     |  ❌            | ✅        | ❌       |
+
+We want to create a foreign key relationship between the `customer_id` column in the `Orders` table and the `customer_id` column in the `Customers` table.
+
+1. **Define the Foreign Key Relationship**
+   - Edit the `Orders` table.
+   - Click on the **+ Add Relation** button under the Foreign Key Relation section.
+   - In the **Source** section, select the `customer_id` column.
+   - In the **Target** section, select the `Customers` table and the `customer_id` column.
+   - Choose the desired action, for example, **RESTRICT** to prevent deleting a customer that has associated orders.
+
+3. **Save Changes**: Click the **Save Changes** button to create the foreign key relationship.
+
+Now, whenever you try to insert or update a record in the `Orders` table, the `customer_id` value must correspond to an existing `customer_id` value in the `Customers` table. This is also prevent you from deleting a customer that has associated orders. This ensures that orders are always associated with a valid customer, maintaining data integrity and consistency.
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## Supported Data Types
 
 | <div style={{ width:"100px"}}> Data Type </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"100px"}}> Example </div> |
 |:--------- |:----------- |:------- |
@@ -51,19 +268,21 @@ When you click the **Create New Table** button, a drawer opens from the right, a
 | **boolean**   | **boolean** data type can hold true, false, and null values. | `true` or `false` |
 
 <div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/datatypes.png" alt="ToolJet database" />
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/datatypes-v2.png" alt="ToolJet database" />
 </div>
 
 </div>
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
+## Table Operations
+
 ### Search Table
 
 Open the Search bar by clicking on the **Search** button and search for a table in the ToolJet database by entering the table name.
 
 <div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/search.png" alt="ToolJet database" />
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/search-v2.png" alt="ToolJet database" />
 </div>
 
 </div>
@@ -72,10 +291,10 @@ Open the Search bar by clicking on the **Search** button and search for a table
 
 ### Rename Table
 
-To rename a table, click on the kebab menu icon on the right of the table name and then select the **Rename table** option. A drawer will open from the right from where you can edit the table name.
+To rename a table, click on the kebab menu icon on the right of the table name and then select the **Edit table** option. A drawer will open from the right from where you can edit the table name.
 
 <div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/rename.png" alt="ToolJet database" />
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/edit-table-name-v2.png" alt="ToolJet database" />
 </div>
 
 </div>
@@ -84,21 +303,17 @@ To rename a table, click on the kebab menu icon on the right of the table name a
 
 ### Add New Column
 
-To add a new column on a table, either click on the kebab menu icon on the right of the table name and then select the **Add new column** option or click on the **+** button present at the end of the column header.
-
-<div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/addnewcol.png" alt="ToolJet database" />
-</div>
+To add a new column to a table, either click on the kebab menu icon on the right of the table name and then select the **Add new column** option or click on the **+** button present at the end of the column header.
 
 A drawer from the right will open up where you can enter the details for the new column:
 
 - **Column Name**: Enter a unique name for the new column, serving as its key identifier.
 - **Data Type**: Choose the appropriate data type for the column from the [available options](#supported-data-types).
 - **Default Value**: Specify any default value that should be assigned to the column. Optionally, users can leave this field blank. When a table contains rows and NOT NULL is applied to one of its existing or new columns, specifying a default value becomes compulsory.
-- **NULL/NOT NULL**: Use the switch to determine whether the column should allow NULL values or not. By default, the toggle is off, allowing the column to have blank or empty entries. If you turn it on, the column is set to NOT NULL, meaning it can't have blank or empty entries anymore. But, for text columns, even with NOT NULL on, they can still have empty text (like an empty line) but not completely blank entries
+- **Foreign Key Relation**: Click on the toggle to add a foreign key relationship to the column. This will open a menu where you can select the target table and column to reference.
 
 <div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/newcol.png" alt="ToolJet database" />
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/add-new-column-v2.gif" alt="ToolJet database"/>
 </div>
 
 </div>
@@ -107,14 +322,12 @@ A drawer from the right will open up where you can enter the details for the new
 
 ### Export Schema
 
-The export schema option allows you to download the selected table schema in a JSON file. This does not export the table data.
-
-While exporting the app, you can choose to export the app with or without table schema connected to the app.
-
+The export schema option allows you to download the selected table schema in a JSON file. This does not export the table data or the relationships.<br/>
+While exporting the app, you can choose to export the app with or without a table schema connected to the app.<br/>
 To export the table schema, click on the three vertical dots icon on the right of the table name and then click on the **Export** option. A JSON file will be downloaded with the table schema.
 
 <div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/export.png" alt="ToolJet database" />
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/export-schema-v2.png" alt="ToolJet database" />
 </div>
 
 </div>
@@ -126,7 +339,7 @@ To export the table schema, click on the three vertical dots icon on the right o
 To delete a table, click on the three vertical dots icon on the right of the table name and then click on the **Delete** option. A confirmation modal will appear, click on the **Delete** button to delete the table.
 
 <div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/delete.png" alt="ToolJet database" />
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/delete-table-v2.png" alt="ToolJet database" />
 </div>
 
 </div>
@@ -138,7 +351,7 @@ To delete a table, click on the three vertical dots icon on the right of the tab
 To edit a column, click on the kebab menu on the column name and select the option to **Edit column**. When you edit the column, the data type cannot be changed.
 
 <div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/editcol.png" alt="ToolJet database" />
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/edit-column-v2.png" alt="ToolJet database" />
 </div>
 
 </div>
@@ -147,22 +360,24 @@ To edit a column, click on the kebab menu on the column name and select the opti
 
 ### Delete Column
 
-To delete a column, click on the kebab menu on the column name and select the option to **Delete**.
+To delete a column, click on the kebab menu on the column name and select the option to **Delete**. You cannot delete a column if it is being used as a primary key. You will have to remove the primary key constraint from the column before deleting it.
 
 <div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/deletecol.png" alt="ToolJet database" />
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/delete-column-v2.png" alt="ToolJet database" />
 </div>
 
 </div>
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
+## Adding and Modifying Data
+
 ### Add New Data
 
 The Add new data button on the top of the table editor allows you to add data to the table. You can either **[Add new row](#add-new-row)** or **[Bulk upload data](#bulk-upload-data)** to add the data to the table.
 
 <div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/addnewdata.png" alt="ToolJet database" />
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/add-new-data-v2.png" alt="ToolJet database" />
 </div>
 
 </div>
@@ -171,16 +386,11 @@ The Add new data button on the top of the table editor allows you to add data to
 
 ### Add New Row
 
-To add a new row on a table, either click on the `Add new data` button on top and then select the **Add new row** option or click on the **+** button present at the bottom left.
-
-<div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/addnewrow.png" alt="ToolJet database" />
-</div>
-
+To add a new row to a table, either click on the `Add new data` button on top and then select the **Add new row** option or click on the **+** button present at the bottom left.<br/>
 A drawer from the right will open up where the values for the new row can be provided.
 
 <div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/addnewrow2.png" alt="ToolJet database" />
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/add-new-row-v2.gif" alt="ToolJet database"/>
 </div>
 
 </div>
@@ -192,7 +402,7 @@ A drawer from the right will open up where the values for the new row can be pro
 To edit a row, hover on the row that you want to edit and the expand icon will appear next to the checkbox of that row. Click on the Expand icon to open the drawer and edit the row.
 
 <div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/expand.png" alt="ToolJet database" />
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/edit-row-v2.png" alt="ToolJet database" />
 </div>
 
 </div>
@@ -201,12 +411,13 @@ To edit a row, hover on the row that you want to edit and the expand icon will a
 
 ### Edit a Cell
 
-1. **Double-Click**: Double-click on the cell you want to edit.
-2. **Enter Value**: Input the new value.
-3. **Save Changes**: Press "Enter" to save the changes. For boolean-type columns, choose from "True," "False," or "Null" options.
+- Double-click on the cell you want to edit.
+- Enter the new value.
+- Click on the **Save** button or press **Enter** to save the changes. 
+- For boolean-type columns, use the toggle to change the value.
 
 <div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/editcell.png" alt="ToolJet database" />
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/edit-cell-v2.gif" alt="ToolJet database"/>
 </div>
 
 </div>
@@ -215,7 +426,7 @@ To edit a row, hover on the row that you want to edit and the expand icon will a
 
 ### Bulk Upload Data
 
-You can bulk upload data to the ToolJet database by clicking the **Bulk upload data** button at the top of the database editor. On clicking the button, a drawer will open from the right from where you can upload a **CSV** file. This file is used to upsert records onto the table. If data for the id column is missing, it will insert a new record with the row data; if the id is present, it will update the corresponding record with the row data.
+You can bulk upload data to the ToolJet database by clicking the **Bulk upload data** button at the top of the database editor. On clicking the button, a drawer will open from the right from where you can upload a **CSV** file. This file is used to insert records onto the table. If data for the id column is missing, it will insert a new record with the row data; if the id is present, it will update the corresponding record with the row data.
 
 From the drawer, users can download the **template CSV file** in which they can enter the data to be uploaded to the ToolJet database's table or format their CSV file in the same way as the template file.
 
@@ -224,13 +435,14 @@ Once the CSV file is ready, click on the file picker to select the file or drag
 **Requirements**:
 - The data types of columns in the CSV file should match those in the ToolJet database table.
 - The `id` column with a `serial` data type should not contain duplicate values.
+- All the column constraints should be satisfied. For example, if a column is marked as `Unique`, it should not contain duplicate values in the CSV file.
 
 **Limitations**:
 - There is a limit of 1000 rows per CSV file that can be uploaded to the ToolJet database.
 - The CSV file should not exceed 2MB in size.
 
 <div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/bulk.png" alt="ToolJet database" />
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/bulk-upload-data-v2.png" alt="ToolJet database" />
 </div>
 
 </div>
@@ -239,56 +451,55 @@ Once the CSV file is ready, click on the file picker to select the file or drag
 
 ### Delete Records
 
-To delete one or many records/rows, click the checkbox to the right of the record or records you want to delete. As soon as you select a single record, the button to delete record will appear on the top, click on the **Delete record** button to delete the selected records.
+To delete one or many records/rows, click the checkbox to the right of the record or records you want to delete. As soon as you select a single record, the button to delete the record will appear on the top, click on the **Delete record** button to delete the selected records.
 
 <div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/delrows.png" alt="ToolJet database" />
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/delete-rows-v2.png" alt="ToolJet database" />
 </div>
 
 </div>
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
-### Filter
+## Filter
 
-You can add as many filter as you want into the table by clicking on the **Filter** button present on the top of the database editor.
+You can add as many filters as you want into the table by clicking on the **Filter** button present on the top of the database editor.
 
 #### Adding a filter on the table data
-- Select a **column** from the Columns dropdown
-- Choose an **[operation](#available-operations-are)**
-- Enter a **value** for the selected operation
+- Select a **column** from the Columns dropdown.
+- Choose an **[operation](#available-operations-are)**.
+- Enter a **value** for the selected operation.
 
 #### Available operations are:
-- **equals**: This operation is used to check if the value of the column is equal to the value entered in the input field. 
-- **greater than**: This operation is used to check if the value of the column is greater than the value entered in the input field. 
-- **greater than or equal**: This operation is used to check if the value of the column is greater than or equal to the value entered in the input field. 
-- **less than**: This operation is used to check if the value of the column is less than the value entered in the input field.
-- **less than or equal**: This operation is used to check if the value of the column is less than or equal to the value entered in the input field. 
-- **not equal**: This operation is used to check if the value of the column is not equal to the value entered in the input field. 
-- **like**: This operation is used to check if the value of the column is like the value entered in the input field. This operation is case-sensitive. ex: `ToolJet` will not match `tooljet`
-- **ilike**: This operation is used to check if the value of the column is like the value entered in the input field. This operation is case-insensitive. ex: `ToolJet` will match `tooljet`
-- **match**: This operation is used to check if the value of the column is like the value entered in the input field. This operation is case-sensitive. ex: `ToolJet` will not match `tooljet`. This operation uses regular expressions. ex: `^ToolJet$` will match `ToolJet` but not `ToolJet Inc`. 
-- **imatch**: This operation is used to check if the value of the column is like the value entered in the input field. This operation is case-insensitive. This operation uses regular expressions. ex: `^ToolJet$` will match `ToolJet` but not `ToolJet Inc`.
-- **in**: This operation is used to check if the value of the column is in the list of values entered in the input field. ex: `1,2,3`
-- **contains**: This operation is used to check if the value of the column contains the value entered in the input field. This operation is case-sensitive. ex: `ToolJet` will not match `tooljet`
-- **contained**: This operation is used to check if the value of the column is contained in the value entered in the input field. This operation is case-sensitive. ex: `ToolJet` will not match `tooljet`
-- **not**: This operation is used to negate the result of the operation selected in the dropdown. ex: `not equals` will return all the records where the value of the column is not equal to the value entered in the input field.
+| **Operation** | **Description** |
+| --- | --- |
+| **equals** | This operation is used to check if the value of the column is equal to the value entered in the input field. |
+| **greater than** | This operation is used to check if the value of the column is greater than the value entered in the input field. |
+| **greater than or equal** | This operation is used to check if the value of the column is greater than or equal to the value entered in the input field. |
+| **less than** | This operation is used to check if the value of the column is less than the value entered in the input field. |
+| **less than or equal** | This operation is used to check if the value of the column is less than or equal to the value entered in the input field. |
+| **not equal** | This operation is used to check if the value of the column is not equal to the value entered in the input field. |
+| **like** | This operation is used to check if the value of the column is like the value entered in the input field. This operation is case-sensitive. ex: `ToolJet` will not match `tooljet` |
+| **ilike** | This operation is used to check if the value of the column is like the value entered in the input field. This operation is case-insensitive. ex: `ToolJet` will match `tooljet` |
+| **match** | This operation is used to check if the value of the column is like the value entered in the input field. This operation is case-sensitive. ex: `ToolJet` will not match `tooljet`. This operation uses regular expressions. ex: `^ToolJet$` will match `ToolJet` but not `ToolJet Inc`. |
+| **imatch** | This operation is used to check if the value of the column is like the value entered in the input field. This operation is case-insensitive. This operation uses regular expressions. ex: `^ToolJet$` will match `ToolJet` but not `ToolJet Inc`. |
+| **in** | This operation is used to check if the value of the column is in the list of values entered in the input field. ex: `(1,2,3)` |
+| **is** | This operation is used to check if the value of the column is equal to the value entered in the input field. This operation is used for boolean data types. |
 
 <div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/filter.png" alt="ToolJet database" />
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/filter-data-v2.png" alt="ToolJet database" />
 </div>
 
 </div>
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
-### Sort
+## Sort
 
 To sort the table data, click on the **Sort** button on top, select a **column** from the dropdown, and then choose an order **ascending** or **descending**.
 
 <div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/sort.png" alt="ToolJet database" />
-</div>
-
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/sort-v2.png" alt="ToolJet database" />
 </div>
 
+</div>

docs/docs/tooljet-db/querying-tooljet-db.md

@@ -5,20 +5,18 @@ title: Querying Data From ToolJet Database
 
 Querying the ToolJet database is as easy as querying any other data source on ToolJet.
 
-- Go to the **Query panel**, and click on the **+Add** button to add a new query, and select **ToolJet Database**
-    <div style={{textAlign: 'center'}}>
+- Go to the **Query panel**, and click on the **+Add** button to add a new query, and select **ToolJet Database**.
 
-    <img className="screenshot-full" src="/img/v2-beta/database/newui/qtjdb.png" alt="ToolJet Database editor" />
+<div style={{textAlign: 'center', paddingBottom:'24px'}}>
+<img className="screenshot-full" src="/img/v2-beta/database/newui/qtjdb.png" alt="ToolJet Database editor" />
+</div>
 
-    </div>
+- Select the table you want to query and the operation from the dropdown, then enter the required parameters for the selected operation. Click on the **Run** button to execute the query.<br/>
+The selected operation should adhere to the column constraints of the selected table.
 
-- Select the table you want to query and the operation from the dropdown, then enter the required parameters for the selected operation. Click on the **Run** button to execute the query.
-
-    <div style={{textAlign: 'center'}}>
-
-    <img className="screenshot-full" src="/img/v2-beta/database/newui/qtjdb2.png" alt="ToolJet Database editor" />
-
-    </div>
+<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/v2-beta/database/newui/qtjdb2.png" alt="ToolJet Database editor" />
+</div>
 
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
@@ -69,6 +67,17 @@ This operation deletes a record in the table. You can delete a single record or
 
 </div>
 
+### Modifying Tables with Foreign Key Constraints
+
+When you are creating, updating, or deleting records in a table that has a foreign key constraint, you need to ensure that the foreign key constraint is not violated. 
+- If you are trying to create/update a new row in the source table, you need to ensure that the foreign key value exists in the target table. Otherwise, the operation will fail with an error message.
+
+<div style={{textAlign: 'center'}}>
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/violate-fk.gif" alt="ToolJet database"/>
+</div>
+
+- Similarly, if you are trying to delete a row in the target table, you need to ensure that the foreign key value is not being referenced in the source table.
+
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
 ### Join Tables
@@ -79,8 +88,11 @@ You can join two or more tables in the ToolJet database by using the **Join** op
 - **From**: In the From section, the following parameters are available:
     - **Selected Table**: Select the table from which you want to join the other table. 
     - **Type of Join**: Select the type of join you want to perform. The available options are: `Inner Join`, `Left Join`, `Right Join`, and `Full Outer Join`.
-    - **Joining Table**: Select the table that you want to join with the selected table.
-    - **On**: Select the column from the **selected table** and the **joining table** on which you want to join the tables. Currently, only `=` operation is supported for joining tables.
+    - **Joining Table**: Select the table that you want to join with the selected table. If the selected table has a foreign key relationship(s) with other tables, those tables will be listed with a foreign key icon next to their name.
+    - **On**: Select the column from the **selected table** and the **joining table** on which you want to join the tables. Currently, only `=` operation is supported for joining tables. If the selected table and the joining table have a foreign key relationship, both the columns will be auto-populated in the **On** dropdown.
+<div style={{textAlign: 'center'}}>
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/join-on-fk-v2.gif" alt="ToolJet database"/>
+</div>
     - **AND or OR condition**: You can add multiple conditions by clicking on the **+Add more** button below each join. The conditions can be joined by `AND` or `OR` operation.
 
   <div style={{textAlign: 'center'}}>
@@ -95,11 +107,9 @@ You can join two or more tables in the ToolJet database by using the **Join** op
 - **Offset**: Offset the number of records to be returned by entering a number. This parameter is used for pagination.
 - **Select**: Select the columns that you want to return in the query response. By default, all the columns are selected.
 
-  <div style={{textAlign: 'center'}}>
-
-  <img className="screenshot-full" src="/img/v2-beta/database/newui/join2.png" alt="ToolJet Database editor" />
-
-  </div>
+<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/v2-beta/database/newui/join2.png" alt="ToolJet Database editor" />
+</div>
 
 :::info
 If you have any other questions or feedback about **ToolJet Database**, please reach us out at hello@tooljet.com or join our **[Slack Community](https://www.tooljet.com/slack)**

docs/docs/tooljet-db/tooljet-database.md

@@ -6,7 +6,7 @@ title: Overview
 Use the ToolJet-hosted database to build apps faster, and manage your data with ease. ToolJet database require no setup and gives you a powerful user interface for managing your data.
 
 <div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/tjdb.png" alt="ToolJet database" />
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/tjdb-v2.png" alt="ToolJet database" />
 </div>
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
@@ -77,6 +77,8 @@ ToolJet database allows you to:
 - **Edit, search, filter, sort, and filter** data using a spreadsheet-like interface.
 - **Quickly build applications and write queries** to interact with the ToolJet Database, just like any other datasource but without any setup.
 - **Export schema** from the ToolJet Database to a JSON file.
+- Uniquely identify each record in a table using **Primary Keys**, ensuring data integrity and enabling efficient querying and indexing.
+- Establish relationships between tables using **Foreign Keys**, allowing you to create associations based on the Primary Key of one table and maintain referential integrity.
 
 </div>
 
@@ -89,7 +91,7 @@ Once you log-in to your ToolJet account, from the left sidebar of the dashboard
 The ToolJet Database is available on: **[ToolJet Cloud](https://tooljet.com)**, **[Self-Host](/docs/setup/)**, and **Enterprise Edition**. You can manage your database and its data using the **Database editor UI**.
 
 <div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/tjdbside.png" alt="ToolJet database" />
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/tjdbside-v2.png" alt="ToolJet database" />
 </div>
 
 </div>

docs/docs/widgets/circular-progressbar.md

@@ -4,13 +4,7 @@ title: Circular Progressbar
 ---
 # Circular Progressbar
 
-Circular Progressbar widget can be used to show progress in a progress circle.
-
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/widgets/circular-progressbar/cpb.png" alt="ToolJet - Widget Reference - Circular progress bar" />
-
-</div>
+The Circular Progressbar component can be used to show progress in a progress circle.
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
@@ -48,7 +42,7 @@ There are currently no exposed variables for the component.
 ## General
 ### Tooltip
 
-A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
+A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
 
 Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
 

docs/docusaurus.config.js

@@ -122,7 +122,7 @@ module.exports = {
           // Please change this to your repo.
           editUrl: 'https://github.com/ToolJet/Tooljet/blob/develop/docs/',
           includeCurrentVersion: false,
-          lastVersion: '2.39.0',
+          lastVersion: '2.43.0',
         },
         theme: {
           customCss: require.resolve('./src/css/custom.css'),

docs/sidebars.js

@@ -328,6 +328,7 @@ const sidebars = {
           "items": [
             "org-management/workspaces/workspace_overview",
             "org-management/workspaces/workspace-variables",
+            "org-management/workspaces/workspace-variables-migration",
             "org-management/workspaces/workspace_constants"
           ]
         },

docs/versioned_docs/version-2.30.0/app-builder/customcss.md

@@ -5,52 +5,103 @@ title: Custom Styles
 
 <div className='badge badge--primary heading-badge'>Available on: Paid plans</div>
 
-Custom Styles feature enables the implementation of theming on ToolJet apps, allowing users to inject their own CSS styling to override the default app styling. This feature fulfills the requirement of allowing users to easily customize the appearance of their apps.
-
-Custom Styles helps in maintaining consistent themes across the ToolJet apps, alleviating the repetitive burden of styling components whenever a new app is created. By enabling users to apply standardized styles, this feature ensures that each app adheres to a unified theme without the need to manually restyle the components from scratch. As a result, the ToolJet app development process becomes more efficient, and the visual coherence of the apps is preserved, providing users with a seamless experience across all applications.
+The Custom Styles feature in ToolJet allows users to apply their own CSS, overriding the default app styles. This enables easy customization of app appearance, and maintains consistent themes across all ToolJet apps. By using standardized styles, users avoid the repetitive task of manually styling components for each new app, enhancing development efficiency and ensuring visual coherence for a seamless user experience
 
 <div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/customcss.gif" alt="Custom CSS" />
-
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/customcss-v2.gif" alt="Custom CSS" /> 
 </div>
 
-## Applying Custom Styles
+## Applying Custom Styles To All Components
 
-To add Custom Styles to ToolJet apps, users should follow these steps:
+Follow these steps to apply custom styles in your ToolJet apps:
 
-1. Go to the **Custom Styles** Page, accessible under **Workspace Settings** from the ToolJet dashboard.
- <div style={{textAlign: 'center'}}>
+- Navigate to the **Custom Styles** page from **Workspace Settings** on the ToolJet dashboard
 
- <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/settings.png" alt="Custom CSS" />
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/custom-styles.png" alt="Custom CSS" />
+</div>
+<br/>
 
- </div>
+- To modify the default colors of components, use their class names, which follow the format `_tooljet-<component>`. 
 
-2. When creating a new app on ToolJet, the default button color is **blue**. If you wish to change the default button color to **red**, you must identify the class of the button component, which follows the format `_tooljet-<component>`.
- - The browser's inspector can also help you find the class of the component. Classes are added for both **pages** and **components**, and there are two types of selectors for classes: **Common** (`_tooljet-<component>`) and **Individual** (`_tooljet-<defaultComponentName>`).
- <div style={{textAlign: 'center'}}>
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/component-class.png" alt="Component Class" />
+</div>
+<br/>
 
- <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/selectors.png" alt="Custom CSS" />
+- You'll need to identify the specific sub-class(or HTML tags) of each component to target particular attributes. The browser's inspector will allow you to easily find the sub-class(or HTML tags) of the specific 
+properties. 
 
- </div>
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/button-class-subclass.png" alt="Sub-Class" />
+</div>
+<br/>
 
-3. Once the class (**`_tooljet-Button`**) is identified, navigate to the Custom Styles page and apply the desired CSS changes for that class, as shown in the following CSS code:
- ```css
- ._tooljet-Button button {
-     background: red !important;
- }
- ._tooljet-Button button:hover {
-     background: green !important;
- }
- ```
+- After locating the specific sub-class(or HTML tag), refer it in the **Custom Styles** section and add styling to it. For instance, for the Button component above, the the below CSS will change the background color:
 
-4. By applying this custom styles, all future instances of the app will have buttons with a red default color, and they will turn green on hover. This eliminates the need for users to individually edit button properties, streamlining the customization process.
- :::info
- Custom Styles are injected at the workspace level, ensuring consistent theming across all apps within the workspace.
- :::
+```css
+._tooljet-Button button {
+    background-color: #152A65 !important;
+}
+```
 
- <div style={{textAlign: 'center'}}>
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/button-component-customcss.png" alt="Button Custom CSS" />
+</div>
+<br/>
 
- <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/styledapp.gif" alt="Custom CSS" />
+- Similarly, the code below can be used to change the background color of the Filter button on a Table component.
 
- </div>
+```css
+._tooljet-Table .table-card-header button {
+    background-color: #152A65 !important;
+}
+```
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/filter-button-customcss.png" alt="Filter Custom CSS" />
+</div>
+<br/>
+
+- The code below will change the font size and color of the Text Input and Number Input labels.
+
+```css
+._tooljet-TextInput p  {
+	color: #152A65 !important;
+    font-size: 16px !important;
+    font-weight: bold !important;
+}
+
+._tooljet-NumberInput p  {
+	color: #152A65 !important;
+    font-size: 16px !important;
+    font-weight: bold !important;
+}
+```
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/input-fields-customcss.png" alt="Input Field Custom CSS" />
+</div>
+
+
+## Applying Custom Styles To Individual Components
+
+To modify the colors of individual components, use their class names, which follow the format `_tooljet-<component_name>`. Here, the component name refers to the name of the component that is set in the application.
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/individual-class.png" alt="Individual Class Custom CSS" />
+</div>
+<br/>
+
+- The color of the Button component above can be changed using the code below:
+
+```css
+._tooljet-addIncomeButton button {
+    background-color: blue !important;
+}
+```
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/individual-customcss.png" alt="Individual Class Custom CSS" />
+</div>
+<br/>
+
+In conclusion, Custom CSS feature lets you override default styles with your own CSS. By providing the flexibility to apply both global and component-specific customizations, this feature enhances the visual coherence and branding of your apps. cs

docs/versioned_docs/version-2.30.0/widgets/circular-progressbar.md

@@ -1,16 +1,12 @@
 ---
 id: circular-progress-bar
-title: Circular Progress Bar
+title: Circular Progressbar
 ---
-# Circular Progress Bar
+# Circular Progressbar
 
-Circular progress bar widget can be used to show progress in a progress circle.
+The Circular Progressbar component can be used to show progress in a progress circle.
 
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/widgets/circular-progressbar/cpb.png" alt="ToolJet - Widget Reference - Circular progress bar" />
-
-</div>
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
 ## Properties
 
@@ -18,70 +14,67 @@ Circular progress bar widget can be used to show progress in a progress circle.
 Any property having `Fx` button next to its field can be **programmatically configured**.
 :::
 
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/widgets/circular-progressbar/prop.png" alt="ToolJet - Widget Reference - Circular progress bar" />
+| <div style={{ width:"100px"}}> Properties </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
+| ----------- | ----------- | --------------- |
+| Text | Sets a text inside the progress circle.| It expects a `String`, you can also use js to dynamically update the text as the progress changes. |
+| Progress | Sets the progress of the widget. | Progress should be an integer between 0 and 100.|
 
 </div>
 
-| properties  | description | Expected Value |
-| ----------- | ----------- | --------------- |
-| Text | We can set a text inside the progress circle.| It expects a `String`, you can also use js to dynamically update the text as the progress changes. |
-| Progress | It can be used to set the progress of the widget. | Progress should be an integer between 0 and 100.|
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
-### General
-#### Tooltip
+## Component Specific Actions (CSA)
 
-A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## Exposed Variables
+
+There are currently no exposed variables for the component.
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## General
+### Tooltip
+
+A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
 
 Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
 
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/tooltip.png" alt="ToolJet - Widget Reference - Circular progress bar" />
-
 </div>
 
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
 ## Layout
 
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/widgets/circular-progressbar/layout.png" alt="ToolJet - Widget Reference - Circular progress bar" />
-
-</div>
-
-| Layout  | description |
+| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> |
 | ----------- | ----------- |
 | Show on desktop | Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
 | Show on mobile | Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
 
-## Styles
-
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/widgets/circular-progressbar/styles.png" alt="ToolJet - Widget Reference - Circular progress bar" />
-
 </div>
 
-| properties      | description | Expected Value |
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## Styles
+
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 | ----------- | ----------- | ------------------- |
-| Color | To define stroke color.| `HEX color code` or choose color from color-picker. |
-| Text color | To define color of the text inside circular progress bar.| `HEX color code` or choose color from color-picker. |
-| Text size | To define the size of the text | Value must between 0-100. |
-| Stroke width | To define the width of stroke | Value must between 0-100.|
-| Counter Clockwise | Whether to rotate progress bar in counterclockwise direction. | It accepts `{{true}}` and `{{false}}`, Default value is `false`.|
-| Circle ratio | To define ratio of the full circle diameter the progressbar should use. | It accepts numerical value and the default is `1`. |
-| 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}}`. |
+| Color | Defines stroke color.| `HEX color code` or choose color from color-picker. |
+| Text color | Defines color of the text inside circular progress bar.| `HEX color code` or choose color from color-picker |
+| Text size | Defines the size of the text | Value must between 0-100 |
+| Stroke width | Defines the width of stroke | Value must between 0-100|
+| Counter clockwise | Whether to rotate progress bar in counterclockwise direction. | Accepts `{{true}}` and `{{false}}`, Default value is `false`|
+| Circle ratio | Defines ratio of the full circle diameter the progressbar should use. | Accepts numerical value and the default is `1` |
+| Visibility | Toggle on or off to control the visibility of the widget. | 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}}` |
 
 :::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.
 :::
 
-
-## 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.
+</div>

docs/versioned_docs/version-2.33.0/app-builder/customcss.md

@@ -5,52 +5,103 @@ title: Custom Styles
 
 <div className='badge badge--primary heading-badge'>Available on: Paid plans</div>
 
-Custom Styles feature enables the implementation of theming on ToolJet apps, allowing users to inject their own CSS styling to override the default app styling. This feature fulfills the requirement of allowing users to easily customize the appearance of their apps.
-
-Custom Styles helps in maintaining consistent themes across the ToolJet apps, alleviating the repetitive burden of styling components whenever a new app is created. By enabling users to apply standardized styles, this feature ensures that each app adheres to a unified theme without the need to manually restyle the components from scratch. As a result, the ToolJet app development process becomes more efficient, and the visual coherence of the apps is preserved, providing users with a seamless experience across all applications.
+The Custom Styles feature in ToolJet allows users to apply their own CSS, overriding the default app styles. This enables easy customization of app appearance, and maintains consistent themes across all ToolJet apps. By using standardized styles, users avoid the repetitive task of manually styling components for each new app, enhancing development efficiency and ensuring visual coherence for a seamless user experience
 
 <div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/customcss-v2.gif" alt="Custom CSS" />
-
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/customcss-v2.gif" alt="Custom CSS" /> 
 </div>
 
-## Applying Custom Styles
+## Applying Custom Styles To All Components
 
-To add Custom Styles to ToolJet apps, users should follow these steps:
+Follow these steps to apply custom styles in your ToolJet apps:
 
-1. Go to the **Custom Styles** Page, accessible under **Workspace Settings** from the ToolJet dashboard.
- <div style={{textAlign: 'center'}}>
+- Navigate to the **Custom Styles** page from **Workspace Settings** on the ToolJet dashboard
 
- <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/settings-v2.png" alt="Custom CSS" />
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/custom-styles.png" alt="Custom CSS" />
+</div>
+<br/>
 
- </div>
+- To modify the default colors of components, use their class names, which follow the format `_tooljet-<component>`. 
 
-2. When creating a new app on ToolJet, the default button color is **blue**. If you wish to change the default button color to **red**, you must identify the class of the button component, which follows the format `_tooljet-<component>`.
- - The browser's inspector can also help you find the class of the component. Classes are added for both **pages** and **components**, and there are two types of selectors for classes: **Common** (`_tooljet-<component>`) and **Individual** (`_tooljet-<defaultComponentName>`).
- <div style={{textAlign: 'center'}}>
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/component-class.png" alt="Component Class" />
+</div>
+<br/>
 
- <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/selectors.png" alt="Custom CSS" />
+- You'll need to identify the specific sub-class(or HTML tags) of each component to target particular attributes. The browser's inspector will allow you to easily find the sub-class(or HTML tags) of the specific 
+properties. 
 
- </div>
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/button-class-subclass.png" alt="Sub-Class" />
+</div>
+<br/>
 
-3. Once the class (**`_tooljet-Button`**) is identified, navigate to the Custom Styles page and apply the desired CSS changes for that class, as shown in the following CSS code:
- ```css
- ._tooljet-Button button {
-     background: red !important;
- }
- ._tooljet-Button button:hover {
-     background: green !important;
- }
- ```
+- After locating the specific sub-class(or HTML tag), refer it in the **Custom Styles** section and add styling to it. For instance, for the Button component above, the the below CSS will change the background color:
 
-4. By applying this custom styles, all future instances of the app will have buttons with a red default color, and they will turn green on hover. This eliminates the need for users to individually edit button properties, streamlining the customization process.
- :::info
- Custom Styles are injected at the workspace level, ensuring consistent theming across all apps within the workspace.
- :::
+```css
+._tooljet-Button button {
+    background-color: #152A65 !important;
+}
+```
 
- <div style={{textAlign: 'center'}}>
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/button-component-customcss.png" alt="Button Custom CSS" />
+</div>
+<br/>
 
- <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/styledapp-v2.gif" alt="Custom CSS" />
+- Similarly, the code below can be used to change the background color of the Filter button on a Table component.
 
- </div>
+```css
+._tooljet-Table .table-card-header button {
+    background-color: #152A65 !important;
+}
+```
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/filter-button-customcss.png" alt="Filter Custom CSS" />
+</div>
+<br/>
+
+- The code below will change the font size and color of the Text Input and Number Input labels.
+
+```css
+._tooljet-TextInput p  {
+	color: #152A65 !important;
+    font-size: 16px !important;
+    font-weight: bold !important;
+}
+
+._tooljet-NumberInput p  {
+	color: #152A65 !important;
+    font-size: 16px !important;
+    font-weight: bold !important;
+}
+```
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/input-fields-customcss.png" alt="Input Field Custom CSS" />
+</div>
+
+
+## Applying Custom Styles To Individual Components
+
+To modify the colors of individual components, use their class names, which follow the format `_tooljet-<component_name>`. Here, the component name refers to the name of the component that is set in the application.
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/individual-class.png" alt="Individual Class Custom CSS" />
+</div>
+<br/>
+
+- The color of the Button component above can be changed using the code below:
+
+```css
+._tooljet-addIncomeButton button {
+    background-color: blue !important;
+}
+```
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/individual-customcss.png" alt="Individual Class Custom CSS" />
+</div>
+<br/>
+
+In conclusion, Custom CSS feature lets you override default styles with your own CSS. By providing the flexibility to apply both global and component-specific customizations, this feature enhances the visual coherence and branding of your apps. cs

docs/versioned_docs/version-2.33.0/widgets/circular-progressbar.md

@@ -1,16 +1,12 @@
 ---
 id: circular-progress-bar
-title: Circular Progress Bar
+title: Circular Progressbar
 ---
-# Circular Progress Bar
+# Circular Progressbar
 
-Circular progress bar widget can be used to show progress in a progress circle.
+The Circular Progressbar component can be used to show progress in a progress circle.
 
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/widgets/circular-progressbar/cpb.png" alt="ToolJet - Widget Reference - Circular progress bar" />
-
-</div>
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
 ## Properties
 
@@ -18,70 +14,67 @@ Circular progress bar widget can be used to show progress in a progress circle.
 Any property having `Fx` button next to its field can be **programmatically configured**.
 :::
 
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/widgets/circular-progressbar/prop.png" alt="ToolJet - Widget Reference - Circular progress bar" />
+| <div style={{ width:"100px"}}> Properties </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
+| ----------- | ----------- | --------------- |
+| Text | Sets a text inside the progress circle.| It expects a `String`, you can also use js to dynamically update the text as the progress changes. |
+| Progress | Sets the progress of the widget. | Progress should be an integer between 0 and 100.|
 
 </div>
 
-| properties  | description | Expected Value |
-| ----------- | ----------- | --------------- |
-| Text | We can set a text inside the progress circle.| It expects a `String`, you can also use js to dynamically update the text as the progress changes. |
-| Progress | It can be used to set the progress of the widget. | Progress should be an integer between 0 and 100.|
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
-### General
-#### Tooltip
+## Component Specific Actions (CSA)
 
-A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## Exposed Variables
+
+There are currently no exposed variables for the component.
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## General
+### Tooltip
+
+A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
 
 Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
 
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/tooltip.png" alt="ToolJet - Widget Reference - Circular progress bar" />
-
 </div>
 
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
 ## Layout
 
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/widgets/circular-progressbar/layout.png" alt="ToolJet - Widget Reference - Circular progress bar" />
-
-</div>
-
-| Layout  | description |
+| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> |
 | ----------- | ----------- |
 | Show on desktop | Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
 | Show on mobile | Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
 
-## Styles
-
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/widgets/circular-progressbar/styles.png" alt="ToolJet - Widget Reference - Circular progress bar" />
-
 </div>
 
-| properties      | description | Expected Value |
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## Styles
+
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 | ----------- | ----------- | ------------------- |
-| Color | To define stroke color.| `HEX color code` or choose color from color-picker. |
-| Text color | To define color of the text inside circular progress bar.| `HEX color code` or choose color from color-picker. |
-| Text size | To define the size of the text | Value must between 0-100. |
-| Stroke width | To define the width of stroke | Value must between 0-100.|
-| Counter Clockwise | Whether to rotate progress bar in counterclockwise direction. | It accepts `{{true}}` and `{{false}}`, Default value is `false`.|
-| Circle ratio | To define ratio of the full circle diameter the progressbar should use. | It accepts numerical value and the default is `1`. |
-| 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}}`. |
+| Color | Defines stroke color.| `HEX color code` or choose color from color-picker. |
+| Text color | Defines color of the text inside circular progress bar.| `HEX color code` or choose color from color-picker |
+| Text size | Defines the size of the text | Value must between 0-100 |
+| Stroke width | Defines the width of stroke | Value must between 0-100|
+| Counter clockwise | Whether to rotate progress bar in counterclockwise direction. | Accepts `{{true}}` and `{{false}}`, Default value is `false`|
+| Circle ratio | Defines ratio of the full circle diameter the progressbar should use. | Accepts numerical value and the default is `1` |
+| Visibility | Toggle on or off to control the visibility of the widget. | 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}}` |
 
 :::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.
 :::
 
-
-## 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.
+</div>

docs/versioned_docs/version-2.34.0/app-builder/customcss.md

@@ -5,52 +5,103 @@ title: Custom Styles
 
 <div className='badge badge--primary heading-badge'>Available on: Paid plans</div>
 
-Custom Styles feature enables the implementation of theming on ToolJet apps, allowing users to inject their own CSS styling to override the default app styling. This feature fulfills the requirement of allowing users to easily customize the appearance of their apps.
-
-Custom Styles helps in maintaining consistent themes across the ToolJet apps, alleviating the repetitive burden of styling components whenever a new app is created. By enabling users to apply standardized styles, this feature ensures that each app adheres to a unified theme without the need to manually restyle the components from scratch. As a result, the ToolJet app development process becomes more efficient, and the visual coherence of the apps is preserved, providing users with a seamless experience across all applications.
+The Custom Styles feature in ToolJet allows users to apply their own CSS, overriding the default app styles. This enables easy customization of app appearance, and maintains consistent themes across all ToolJet apps. By using standardized styles, users avoid the repetitive task of manually styling components for each new app, enhancing development efficiency and ensuring visual coherence for a seamless user experience
 
 <div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/customcss-v2.gif" alt="Custom CSS" />
-
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/customcss-v2.gif" alt="Custom CSS" /> 
 </div>
 
-## Applying Custom Styles
+## Applying Custom Styles To All Components
 
-To add Custom Styles to ToolJet apps, users should follow these steps:
+Follow these steps to apply custom styles in your ToolJet apps:
 
-1. Go to the **Custom Styles** Page, accessible under **Workspace Settings** from the ToolJet dashboard.
- <div style={{textAlign: 'center'}}>
+- Navigate to the **Custom Styles** page from **Workspace Settings** on the ToolJet dashboard
 
- <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/settings-v2.png" alt="Custom CSS" />
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/custom-styles.png" alt="Custom CSS" />
+</div>
+<br/>
 
- </div>
+- To modify the default colors of components, use their class names, which follow the format `_tooljet-<component>`. 
 
-2. When creating a new app on ToolJet, the default button color is **blue**. If you wish to change the default button color to **red**, you must identify the class of the button component, which follows the format `_tooljet-<component>`.
- - The browser's inspector can also help you find the class of the component. Classes are added for both **pages** and **components**, and there are two types of selectors for classes: **Common** (`_tooljet-<component>`) and **Individual** (`_tooljet-<defaultComponentName>`).
- <div style={{textAlign: 'center'}}>
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/component-class.png" alt="Component Class" />
+</div>
+<br/>
 
- <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/selectors.png" alt="Custom CSS" />
+- You'll need to identify the specific sub-class(or HTML tags) of each component to target particular attributes. The browser's inspector will allow you to easily find the sub-class(or HTML tags) of the specific 
+properties. 
 
- </div>
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/button-class-subclass.png" alt="Sub-Class" />
+</div>
+<br/>
 
-3. Once the class (**`_tooljet-Button`**) is identified, navigate to the Custom Styles page and apply the desired CSS changes for that class, as shown in the following CSS code:
- ```css
- ._tooljet-Button button {
-     background: red !important;
- }
- ._tooljet-Button button:hover {
-     background: green !important;
- }
- ```
+- After locating the specific sub-class(or HTML tag), refer it in the **Custom Styles** section and add styling to it. For instance, for the Button component above, the the below CSS will change the background color:
 
-4. By applying this custom styles, all future instances of the app will have buttons with a red default color, and they will turn green on hover. This eliminates the need for users to individually edit button properties, streamlining the customization process.
- :::info
- Custom Styles are injected at the workspace level, ensuring consistent theming across all apps within the workspace.
- :::
+```css
+._tooljet-Button button {
+    background-color: #152A65 !important;
+}
+```
 
- <div style={{textAlign: 'center'}}>
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/button-component-customcss.png" alt="Button Custom CSS" />
+</div>
+<br/>
 
- <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/styledapp-v2.gif" alt="Custom CSS" />
+- Similarly, the code below can be used to change the background color of the Filter button on a Table component.
 
- </div>
+```css
+._tooljet-Table .table-card-header button {
+    background-color: #152A65 !important;
+}
+```
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/filter-button-customcss.png" alt="Filter Custom CSS" />
+</div>
+<br/>
+
+- The code below will change the font size and color of the Text Input and Number Input labels.
+
+```css
+._tooljet-TextInput p  {
+	color: #152A65 !important;
+    font-size: 16px !important;
+    font-weight: bold !important;
+}
+
+._tooljet-NumberInput p  {
+	color: #152A65 !important;
+    font-size: 16px !important;
+    font-weight: bold !important;
+}
+```
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/input-fields-customcss.png" alt="Input Field Custom CSS" />
+</div>
+
+
+## Applying Custom Styles To Individual Components
+
+To modify the colors of individual components, use their class names, which follow the format `_tooljet-<component_name>`. Here, the component name refers to the name of the component that is set in the application.
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/individual-class.png" alt="Individual Class Custom CSS" />
+</div>
+<br/>
+
+- The color of the Button component above can be changed using the code below:
+
+```css
+._tooljet-addIncomeButton button {
+    background-color: blue !important;
+}
+```
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/individual-customcss.png" alt="Individual Class Custom CSS" />
+</div>
+<br/>
+
+In conclusion, Custom CSS feature lets you override default styles with your own CSS. By providing the flexibility to apply both global and component-specific customizations, this feature enhances the visual coherence and branding of your apps. cs

docs/versioned_docs/version-2.34.0/widgets/circular-progressbar.md

@@ -1,16 +1,10 @@
 ---
 id: circular-progress-bar
-title: Circular Progress Bar
+title: Circular Progressbar
 ---
-# Circular Progress Bar
+# Circular Progressbar
 
-Circular progress bar widget can be used to show progress in a progress circle.
-
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/widgets/circular-progressbar/cpb.png" alt="ToolJet - Widget Reference - Circular progress bar" />
-
-</div>
+The Circular Progressbar component can be used to show progress in a progress circle.
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
@@ -48,7 +42,7 @@ There are currently no exposed variables for the component.
 ## General
 ### Tooltip
 
-A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
+A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
 
 Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
 

docs/versioned_docs/version-2.35.0/app-builder/customcss.md

@@ -5,52 +5,103 @@ title: Custom Styles
 
 <div className='badge badge--primary heading-badge'>Available on: Paid plans</div>
 
-Custom Styles feature enables the implementation of theming on ToolJet apps, allowing users to inject their own CSS styling to override the default app styling. This feature fulfills the requirement of allowing users to easily customize the appearance of their apps.
-
-Custom Styles helps in maintaining consistent themes across the ToolJet apps, alleviating the repetitive burden of styling components whenever a new app is created. By enabling users to apply standardized styles, this feature ensures that each app adheres to a unified theme without the need to manually restyle the components from scratch. As a result, the ToolJet app development process becomes more efficient, and the visual coherence of the apps is preserved, providing users with a seamless experience across all applications.
+The Custom Styles feature in ToolJet allows users to apply their own CSS, overriding the default app styles. This enables easy customization of app appearance, and maintains consistent themes across all ToolJet apps. By using standardized styles, users avoid the repetitive task of manually styling components for each new app, enhancing development efficiency and ensuring visual coherence for a seamless user experience
 
 <div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/customcss-v2.gif" alt="Custom CSS" />
-
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/customcss-v2.gif" alt="Custom CSS" /> 
 </div>
 
-## Applying Custom Styles
+## Applying Custom Styles To All Components
 
-To add Custom Styles to ToolJet apps, users should follow these steps:
+Follow these steps to apply custom styles in your ToolJet apps:
 
-1. Go to the **Custom Styles** Page, accessible under **Workspace Settings** from the ToolJet dashboard.
- <div style={{textAlign: 'center'}}>
+- Navigate to the **Custom Styles** page from **Workspace Settings** on the ToolJet dashboard
 
- <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/settings-v2.png" alt="Custom CSS" />
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/custom-styles.png" alt="Custom CSS" />
+</div>
+<br/>
 
- </div>
+- To modify the default colors of components, use their class names, which follow the format `_tooljet-<component>`. 
 
-2. When creating a new app on ToolJet, the default button color is **blue**. If you wish to change the default button color to **red**, you must identify the class of the button component, which follows the format `_tooljet-<component>`.
- - The browser's inspector can also help you find the class of the component. Classes are added for both **pages** and **components**, and there are two types of selectors for classes: **Common** (`_tooljet-<component>`) and **Individual** (`_tooljet-<defaultComponentName>`).
- <div style={{textAlign: 'center'}}>
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/component-class.png" alt="Component Class" />
+</div>
+<br/>
 
- <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/selectors.png" alt="Custom CSS" />
+- You'll need to identify the specific sub-class(or HTML tags) of each component to target particular attributes. The browser's inspector will allow you to easily find the sub-class(or HTML tags) of the specific 
+properties. 
 
- </div>
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/button-class-subclass.png" alt="Sub-Class" />
+</div>
+<br/>
 
-3. Once the class (**`_tooljet-Button`**) is identified, navigate to the Custom Styles page and apply the desired CSS changes for that class, as shown in the following CSS code:
- ```css
- ._tooljet-Button button {
-     background: red !important;
- }
- ._tooljet-Button button:hover {
-     background: green !important;
- }
- ```
+- After locating the specific sub-class(or HTML tag), refer it in the **Custom Styles** section and add styling to it. For instance, for the Button component above, the the below CSS will change the background color:
 
-4. By applying this custom styles, all future instances of the app will have buttons with a red default color, and they will turn green on hover. This eliminates the need for users to individually edit button properties, streamlining the customization process.
- :::info
- Custom Styles are injected at the workspace level, ensuring consistent theming across all apps within the workspace.
- :::
+```css
+._tooljet-Button button {
+    background-color: #152A65 !important;
+}
+```
 
- <div style={{textAlign: 'center'}}>
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/button-component-customcss.png" alt="Button Custom CSS" />
+</div>
+<br/>
 
- <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/styledapp-v2.gif" alt="Custom CSS" />
+- Similarly, the code below can be used to change the background color of the Filter button on a Table component.
 
- </div>
+```css
+._tooljet-Table .table-card-header button {
+    background-color: #152A65 !important;
+}
+```
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/filter-button-customcss.png" alt="Filter Custom CSS" />
+</div>
+<br/>
+
+- The code below will change the font size and color of the Text Input and Number Input labels.
+
+```css
+._tooljet-TextInput p  {
+	color: #152A65 !important;
+    font-size: 16px !important;
+    font-weight: bold !important;
+}
+
+._tooljet-NumberInput p  {
+	color: #152A65 !important;
+    font-size: 16px !important;
+    font-weight: bold !important;
+}
+```
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/input-fields-customcss.png" alt="Input Field Custom CSS" />
+</div>
+
+
+## Applying Custom Styles To Individual Components
+
+To modify the colors of individual components, use their class names, which follow the format `_tooljet-<component_name>`. Here, the component name refers to the name of the component that is set in the application.
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/individual-class.png" alt="Individual Class Custom CSS" />
+</div>
+<br/>
+
+- The color of the Button component above can be changed using the code below:
+
+```css
+._tooljet-addIncomeButton button {
+    background-color: blue !important;
+}
+```
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/individual-customcss.png" alt="Individual Class Custom CSS" />
+</div>
+<br/>
+
+In conclusion, Custom CSS feature lets you override default styles with your own CSS. By providing the flexibility to apply both global and component-specific customizations, this feature enhances the visual coherence and branding of your apps. cs

docs/versioned_docs/version-2.35.0/widgets/circular-progressbar.md

@@ -4,13 +4,7 @@ title: Circular Progressbar
 ---
 # Circular Progressbar
 
-Circular Progressbar widget can be used to show progress in a progress circle.
-
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/widgets/circular-progressbar/cpb.png" alt="ToolJet - Widget Reference - Circular progress bar" />
-
-</div>
+The Circular Progressbar component can be used to show progress in a progress circle.
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
@@ -48,7 +42,7 @@ There are currently no exposed variables for the component.
 ## General
 ### Tooltip
 
-A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
+A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
 
 Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
 

docs/versioned_docs/version-2.36.0/app-builder/customcss.md

@@ -5,52 +5,103 @@ title: Custom Styles
 
 <div className='badge badge--primary heading-badge'>Available on: Paid plans</div>
 
-Custom Styles feature enables the implementation of theming on ToolJet apps, allowing users to inject their own CSS styling to override the default app styling. This feature fulfills the requirement of allowing users to easily customize the appearance of their apps.
-
-Custom Styles helps in maintaining consistent themes across the ToolJet apps, alleviating the repetitive burden of styling components whenever a new app is created. By enabling users to apply standardized styles, this feature ensures that each app adheres to a unified theme without the need to manually restyle the components from scratch. As a result, the ToolJet app development process becomes more efficient, and the visual coherence of the apps is preserved, providing users with a seamless experience across all applications.
+The Custom Styles feature in ToolJet allows users to apply their own CSS, overriding the default app styles. This enables easy customization of app appearance, and maintains consistent themes across all ToolJet apps. By using standardized styles, users avoid the repetitive task of manually styling components for each new app, enhancing development efficiency and ensuring visual coherence for a seamless user experience
 
 <div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/customcss-v2.gif" alt="Custom CSS" />
-
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/customcss-v2.gif" alt="Custom CSS" /> 
 </div>
 
-## Applying Custom Styles
+## Applying Custom Styles To All Components
 
-To add Custom Styles to ToolJet apps, users should follow these steps:
+Follow these steps to apply custom styles in your ToolJet apps:
 
-1. Go to the **Custom Styles** Page, accessible under **Workspace Settings** from the ToolJet dashboard.
- <div style={{textAlign: 'center'}}>
+- Navigate to the **Custom Styles** page from **Workspace Settings** on the ToolJet dashboard
 
- <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/settings-v2.png" alt="Custom CSS" />
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/custom-styles.png" alt="Custom CSS" />
+</div>
+<br/>
 
- </div>
+- To modify the default colors of components, use their class names, which follow the format `_tooljet-<component>`. 
 
-2. When creating a new app on ToolJet, the default button color is **blue**. If you wish to change the default button color to **red**, you must identify the class of the button component, which follows the format `_tooljet-<component>`.
- - The browser's inspector can also help you find the class of the component. Classes are added for both **pages** and **components**, and there are two types of selectors for classes: **Common** (`_tooljet-<component>`) and **Individual** (`_tooljet-<defaultComponentName>`).
- <div style={{textAlign: 'center'}}>
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/component-class.png" alt="Component Class" />
+</div>
+<br/>
 
- <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/selectors.png" alt="Custom CSS" />
+- You'll need to identify the specific sub-class(or HTML tags) of each component to target particular attributes. The browser's inspector will allow you to easily find the sub-class(or HTML tags) of the specific 
+properties. 
 
- </div>
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/button-class-subclass.png" alt="Sub-Class" />
+</div>
+<br/>
 
-3. Once the class (**`_tooljet-Button`**) is identified, navigate to the Custom Styles page and apply the desired CSS changes for that class, as shown in the following CSS code:
- ```css
- ._tooljet-Button button {
-     background: red !important;
- }
- ._tooljet-Button button:hover {
-     background: green !important;
- }
- ```
+- After locating the specific sub-class(or HTML tag), refer it in the **Custom Styles** section and add styling to it. For instance, for the Button component above, the the below CSS will change the background color:
 
-4. By applying this custom styles, all future instances of the app will have buttons with a red default color, and they will turn green on hover. This eliminates the need for users to individually edit button properties, streamlining the customization process.
- :::info
- Custom Styles are injected at the workspace level, ensuring consistent theming across all apps within the workspace.
- :::
+```css
+._tooljet-Button button {
+    background-color: #152A65 !important;
+}
+```
 
- <div style={{textAlign: 'center'}}>
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/button-component-customcss.png" alt="Button Custom CSS" />
+</div>
+<br/>
 
- <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/styledapp-v2.gif" alt="Custom CSS" />
+- Similarly, the code below can be used to change the background color of the Filter button on a Table component.
 
- </div>
+```css
+._tooljet-Table .table-card-header button {
+    background-color: #152A65 !important;
+}
+```
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/filter-button-customcss.png" alt="Filter Custom CSS" />
+</div>
+<br/>
+
+- The code below will change the font size and color of the Text Input and Number Input labels.
+
+```css
+._tooljet-TextInput p  {
+	color: #152A65 !important;
+    font-size: 16px !important;
+    font-weight: bold !important;
+}
+
+._tooljet-NumberInput p  {
+	color: #152A65 !important;
+    font-size: 16px !important;
+    font-weight: bold !important;
+}
+```
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/input-fields-customcss.png" alt="Input Field Custom CSS" />
+</div>
+
+
+## Applying Custom Styles To Individual Components
+
+To modify the colors of individual components, use their class names, which follow the format `_tooljet-<component_name>`. Here, the component name refers to the name of the component that is set in the application.
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/individual-class.png" alt="Individual Class Custom CSS" />
+</div>
+<br/>
+
+- The color of the Button component above can be changed using the code below:
+
+```css
+._tooljet-addIncomeButton button {
+    background-color: blue !important;
+}
+```
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/individual-customcss.png" alt="Individual Class Custom CSS" />
+</div>
+<br/>
+
+In conclusion, Custom CSS feature lets you override default styles with your own CSS. By providing the flexibility to apply both global and component-specific customizations, this feature enhances the visual coherence and branding of your apps. cs

docs/versioned_docs/version-2.36.0/widgets/circular-progressbar.md

@@ -4,13 +4,8 @@ title: Circular Progressbar
 ---
 # Circular Progressbar
 
-Circular Progressbar widget can be used to show progress in a progress circle.
+The Circular Progressbar component can be used to show progress in a progress circle.
 
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/widgets/circular-progressbar/cpb.png" alt="ToolJet - Widget Reference - Circular progress bar" />
-
-</div>
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
@@ -48,7 +43,7 @@ There are currently no exposed variables for the component.
 ## General
 ### Tooltip
 
-A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
+A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
 
 Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
 

docs/versioned_docs/version-2.39.0/app-builder/customcss.md

@@ -5,52 +5,103 @@ title: Custom Styles
 
 <div className='badge badge--primary heading-badge'>Available on: Paid plans</div>
 
-Custom Styles feature enables the implementation of theming on ToolJet apps, allowing users to inject their own CSS styling to override the default app styling. This feature fulfills the requirement of allowing users to easily customize the appearance of their apps.
-
-Custom Styles helps in maintaining consistent themes across the ToolJet apps, alleviating the repetitive burden of styling components whenever a new app is created. By enabling users to apply standardized styles, this feature ensures that each app adheres to a unified theme without the need to manually restyle the components from scratch. As a result, the ToolJet app development process becomes more efficient, and the visual coherence of the apps is preserved, providing users with a seamless experience across all applications.
+The Custom Styles feature in ToolJet allows users to apply their own CSS, overriding the default app styles. This enables easy customization of app appearance, and maintains consistent themes across all ToolJet apps. By using standardized styles, users avoid the repetitive task of manually styling components for each new app, enhancing development efficiency and ensuring visual coherence for a seamless user experience
 
 <div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/customcss-v2.gif" alt="Custom CSS" />
-
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/customcss-v2.gif" alt="Custom CSS" /> 
 </div>
 
-## Applying Custom Styles
+## Applying Custom Styles To All Components
 
-To add Custom Styles to ToolJet apps, users should follow these steps:
+Follow these steps to apply custom styles in your ToolJet apps:
 
-1. Go to the **Custom Styles** Page, accessible under **Workspace Settings** from the ToolJet dashboard.
- <div style={{textAlign: 'center'}}>
+- Navigate to the **Custom Styles** page from **Workspace Settings** on the ToolJet dashboard
 
- <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/settings-v2.png" alt="Custom CSS" />
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/custom-styles.png" alt="Custom CSS" />
+</div>
+<br/>
 
- </div>
+- To modify the default colors of components, use their class names, which follow the format `_tooljet-<component>`. 
 
-2. When creating a new app on ToolJet, the default button color is **blue**. If you wish to change the default button color to **red**, you must identify the class of the button component, which follows the format `_tooljet-<component>`.
- - The browser's inspector can also help you find the class of the component. Classes are added for both **pages** and **components**, and there are two types of selectors for classes: **Common** (`_tooljet-<component>`) and **Individual** (`_tooljet-<defaultComponentName>`).
- <div style={{textAlign: 'center'}}>
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/component-class.png" alt="Component Class" />
+</div>
+<br/>
 
- <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/selectors.png" alt="Custom CSS" />
+- You'll need to identify the specific sub-class(or HTML tags) of each component to target particular attributes. The browser's inspector will allow you to easily find the sub-class(or HTML tags) of the specific 
+properties. 
 
- </div>
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/button-class-subclass.png" alt="Sub-Class" />
+</div>
+<br/>
 
-3. Once the class (**`_tooljet-Button`**) is identified, navigate to the Custom Styles page and apply the desired CSS changes for that class, as shown in the following CSS code:
- ```css
- ._tooljet-Button button {
-     background: red !important;
- }
- ._tooljet-Button button:hover {
-     background: green !important;
- }
- ```
+- After locating the specific sub-class(or HTML tag), refer it in the **Custom Styles** section and add styling to it. For instance, for the Button component above, the the below CSS will change the background color:
 
-4. By applying this custom styles, all future instances of the app will have buttons with a red default color, and they will turn green on hover. This eliminates the need for users to individually edit button properties, streamlining the customization process.
- :::info
- Custom Styles are injected at the workspace level, ensuring consistent theming across all apps within the workspace.
- :::
+```css
+._tooljet-Button button {
+    background-color: #152A65 !important;
+}
+```
 
- <div style={{textAlign: 'center'}}>
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/button-component-customcss.png" alt="Button Custom CSS" />
+</div>
+<br/>
 
- <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/styledapp-v2.gif" alt="Custom CSS" />
+- Similarly, the code below can be used to change the background color of the Filter button on a Table component.
 
- </div>
+```css
+._tooljet-Table .table-card-header button {
+    background-color: #152A65 !important;
+}
+```
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/filter-button-customcss.png" alt="Filter Custom CSS" />
+</div>
+<br/>
+
+- The code below will change the font size and color of the Text Input and Number Input labels.
+
+```css
+._tooljet-TextInput p  {
+	color: #152A65 !important;
+    font-size: 16px !important;
+    font-weight: bold !important;
+}
+
+._tooljet-NumberInput p  {
+	color: #152A65 !important;
+    font-size: 16px !important;
+    font-weight: bold !important;
+}
+```
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/input-fields-customcss.png" alt="Input Field Custom CSS" />
+</div>
+
+
+## Applying Custom Styles To Individual Components
+
+To modify the colors of individual components, use their class names, which follow the format `_tooljet-<component_name>`. Here, the component name refers to the name of the component that is set in the application.
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/individual-class.png" alt="Individual Class Custom CSS" />
+</div>
+<br/>
+
+- The color of the Button component above can be changed using the code below:
+
+```css
+._tooljet-addIncomeButton button {
+    background-color: blue !important;
+}
+```
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/individual-customcss.png" alt="Individual Class Custom CSS" />
+</div>
+<br/>
+
+In conclusion, Custom CSS feature lets you override default styles with your own CSS. By providing the flexibility to apply both global and component-specific customizations, this feature enhances the visual coherence and branding of your apps. cs

docs/versioned_docs/version-2.39.0/org-management/workspaces/workspace-variables-migration.md

@@ -0,0 +1,62 @@
+---
+id: workspace-variables-migration
+title: Workspace Variables Migration Guide
+---
+
+
+Workspace variables are currently marked as deprecated, indicating that it will be removed in future releases. This guide will help you migrate from Workspace Variables to Workspace Constants. Workspace Constants are designed to be resolved on the server-side only, ensuring a high level of security. You can assign users to a specific role and provide create, update, and delete access to Workspace Constants based on the role. By default, the Workspace admin has full access to Workspace Constants.
+
+
+## Syntax
+
+The syntax for using **Workspace Constants** is different from **Workspace Variables**. For example, if you have a variables named **psql_host**, we used to use `%%client.psql_host%%` but for Workspace Constants, we use `{{constants.psql_host}}`. Since Workspace Constants are resolved only on the server-side, there is no option to use them in the client-side.
+
+## Migrating from Workspace Variables to Workspace Constants
+
+To migrate from Workspace Variables to Workspace Constants, follow these steps:
+
+- Access the ToolJet Dashboard and navigate to Workspace Settings.
+- Select the Workspace Constants tab.
+- Click on the **Create New Constant** button.
+- A drawer will appear. Enter the desired name and value for the constant.
+- Click the **Add Constant** button to save the constant.
+- Repeat the above steps for all the Workspace Variables.
+
+<div style={{textAlign: 'center'}}>
+    
+<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/workspace-const/create-constant-v2.gif" alt="Workspace constants: create"/>
+    
+</div>
+
+Once you have migrated all the Workspace Variables to Workspace Constants, you can replace the Workspace Variables in your apps with their corresponding Workspace Constants.
+
+### Replacing Client Workspace Variables with Workspace Constants
+
+- Navigate to the app or data source where you want to replace the Workspace Variables.
+- Replace the Workspace Variables with their corresponding Workspace Constants.
+- For example, if you have a Client Workspace Variable like `%%client.pi%%`, replace it with `{{constants.pi}}`.
+
+<div style={{textAlign: 'center'}}>
+<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/workspace-const/client-side-variable.gif" alt="Workspace constants"/>
+</div>
+
+### Replacing Server Workspace Variables with Workspace Constants
+- Navigate to the app or data source where you want to replace the Workspace Variables.
+- Replace the Workspace Variables with their corresponding Workspace Constants.
+- For example, if you have a Server Workspace Variable like `%%server.psql_host%%`, replace it with `{{constants.psql_host}}`.
+
+<div style={{textAlign: 'center'}}>
+<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/workspace-const/server-side-variable.gif" alt="Workspace constants"/>
+</div>
+
+
+### Deleting Workspace Variables
+
+Once you have migrated all the Workspace Variables to Workspace Constants, and tested your apps, you can delete the Workspace Variables. To delete a Workspace Variable, follow these steps:
+
+- Navigate to the Workspace Variables tab in the Workspace Settings.
+- Click on the delete icon next to the Workspace Variable you want to delete.
+
+<div style={{textAlign: 'center'}}>
+<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/workspace-const/delete-variable.gif" alt="Workspace constants"/>
+</div>

docs/versioned_docs/version-2.39.0/widgets/circular-progressbar.md

@@ -4,13 +4,7 @@ title: Circular Progressbar
 ---
 # Circular Progressbar
 
-Circular Progressbar widget can be used to show progress in a progress circle.
-
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/widgets/circular-progressbar/cpb.png" alt="ToolJet - Widget Reference - Circular progress bar" />
-
-</div>
+The Circular Progressbar component can be used to show progress in a progress circle.
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
@@ -48,7 +42,7 @@ There are currently no exposed variables for the component.
 ## General
 ### Tooltip
 
-A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
+A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
 
 Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
 

docs/versioned_docs/version-2.43.0/Enterprise/_category_.json

@@ -0,0 +1,5 @@
+{
+    "label": "Enterprise",
+    "position": 9,
+    "collapsed": true
+}

docs/versioned_docs/version-2.43.0/Enterprise/audit_logs.md

@@ -0,0 +1,159 @@
+---
+id: audit_logs
+title: Audit logs
+---
+
+<div className='badge badge--primary heading-badge'>Available on: Paid plans</div>
+
+
+The audit log is the report of all the activities done in your ToolJet account. It will capture and display events automatically by recording who performed an activity, what when, and where the activity was performed, along with other information such as IP address.
+
+<div style={{textAlign: 'center'}}>
+
+<img style={{ width:'100%', border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/audit_logs/logsnew-v2.png" alt="Audit logs" />
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+### Date Range
+
+Retrieve the log of events that occurred within the specified date and time range using the range picker. By default, the system loads 24-hour logs for the initial view. The maximum duration that can be specified for the "from" and "to" dates is 30 days.
+
+:::info
+Pagination at the bottom allows navigation through the pages, with each page displaying a maximum of 7 logs.
+:::
+
+<div style={{textAlign: 'center'}}>
+
+<img style={{ width:'100%', border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/audit_logs/filtersnew-v2.png" alt="Audit logs" />
+
+</div>
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+### Filter Audit Logs
+
+You can apply filters to the audited events based on the following criteria.
+
+#### Select Users
+
+Choose a specific user from the dropdown list to view all their activities.
+
+#### Select Apps
+
+The dropdown will display all the apps associated with your account. Select an app to filter the logs related to that particular app.
+
+#### Select Resources
+
+| <div style={{ width:"100px"}}> Resources </div> | <div style={{ width:"100px"}}> Description </div> |
+| ----------- | ----------- |
+| User | Filter all the User events like `USER_LOGIN`, `USER_SIGNUP`, `USER_INVITE`, AND `USER_INVITE_REDEEM`. |
+| App | Filter all the App events like `APP_CREATE`, `APP_UPDATE`,`APP_VIEW`,`APP_DELETE`,`APP_IMPORT`,`APP_EXPORT`,`APP_CLONE`. |
+| Data Query | Filters the events associated with Data Query like `DATA_QUERY_RUN`. |
+| Group Permission | All the events associated with Group Permissions will be filtered. Group Permissions include `GROUP_CREATE`, `GROUP_UPDATE`, `GROUP_DELETE`. |
+| App Group Permission | Within each group, you can set apps for read or edit privileges. These events get recorded as App Group Permissions. |
+
+#### Select Actions
+
+| <div style={{ width:"100px"}}> Actions </div> | <div style={{ width:"100px"}}> Description </div>|
+| ----------- | ----------- |
+| USER_LOGIN | This event is recorded everytime a user logins. |
+| USER_SIGNUP | This event is recorded everytime a new signup is made. |
+| USER_INVITE | You can invite users to your account from `Manage Users` section and an event is audited everytime an invite is sent. |
+| USER_INVITE_REDEEM | This event is recorded whenever an invite is redeemed. |
+| APP_CREATE | This event is recorded when a user creates a new app. |
+| APP_UPDATE | This event is recorded whenever actions like renaming the app, making the app public, editing shareable link, or deploying the app are made. |
+| APP_VIEW | This event is logged when someone views the launched app. (public apps aren't accounted for) |
+| APP_DELETE | This event is recorded whenever a user deletes an app from the dashboard. |
+| APP_IMPORT | This event is recorded whenever a user imports an app. |
+| APP_EXPORT | This event is recorded whenever an app is exported. |
+| APP_CLONE | This event is recorded whenever a clone of the existing app is created. |
+| DATA_QUERY_RUN | This event is logged whenever a data source is added, a query is created, or whenever a query is run either from the query editor or from the launched app. |
+| GROUP_PERMISSION_CREATE | This event is recorded whenever a group is created. |
+| GROUP_PERMISSION_UPDATE | This event is recorded whenever an app or user is added to or removed from a group, or the permissions for a group are updated. |
+| GROUP_PERMISSION_DELETE | This event is recorded whenever a user group is deleted from an account. |
+| APP_GROUP_PERMISSION_UPDATE | For every app added in to user group, you can set privileges like `View` or `Edit` and whenever these privileges are updated this event is recorded. By default, the permission of an app for a user group is set to `View`. |
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+### Understanding Log Information
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/enterprise/audit_logs/readinglogv2.png" alt="Audit logs" />
+
+</div>
+
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div>|
+| ----------- | ----------- |
+| action_type | This indicates the type of action that was logged in the event. Refer to [this](#select-actions) for more information on actions. |
+| created_at | Shows the date and time when the event was logged.  |
+| id | Each logged event is assigned a unique event ID. |
+| ip_address | Displays the IP address from which the event was logged. |
+| metadata | The metadata includes two sub-properties: `tooljet_version` and `user_agent`. `tooljet_version` shows the version of ToolJet used for the event, while `user_agent` contains information about the device and browser used. |
+| organization_id | Every organization in ToolJet has a unique ID associated with it, which is recorded when an event occurs. |
+| resource_id | Different [resources](#select-resources) have their respective IDs associated with them. These IDs are assigned when the resources are created. |
+| resource_name | Shows the name of the [resources](#select-resources) that were involved in the logged event. For example, if an app was created or deleted, it will display the name of that app. |
+| resource_type | Indicates the type of the [resources](#select-resources) involved in the logged event. |
+| user_id | Each user account in ToolJet has a unique ID associated with it, which is recorded when an event occurs. |
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+### Log File
+
+The file will contain all the data from audit logs. The log file can be created by specifying the path in the [environment variables](/docs/setup/env-vars). The log file is rotated on a daily basis and is updated dynamically every time a new audit log is generated.
+
+Learn more about **setting up the log file generation** [here](/docs/how-to/setup-rsyslog).
+
+#### Log Rotation
+
+The log file is configured to rotate on a daily basis. This means that a new log file will be created every day, ensuring efficient management and organization of audit data.
+
+#### Log File Path
+
+The path for the log file is defined using the `LOG_FILE_PATH` variable in the environment. It's important to understand that this path is relative to the home directory of the machine. For instance, if `LOG_FILE_PATH` is set to `hsbc/dashboard/log`, the resulting log file path will be structured as follows:
+```
+homepath/hsbc/dashboard/log/tooljet_log/{process_id}-{date}/audit.log
+```
+Here, `{process_id}` is a placeholder for the unique process identifier, and `{date}` represents the current date. This structured path ensures that audit logs are organized by both process and date, facilitating easy traceability and analysis.
+
+| <div style={{ width:"100px"}}> Variable </div>| <div style={{ width:"100px"}}> Description </div>                                                                |
+| -------- | --------------------------------------------------------------------------- |
+| LOG_FILE_PATH | the path where the log file will be created ( eg: tooljet/log/tooljet-audit.log) |
+
+<details>
+<summary>Example Log file data</summary>
+
+```bash
+{
+  level: 'info',
+  message: 'PERFORM APP_CREATE OF awdasdawdwd APP',
+  timestamp: '2023-11-02 17:12:40',
+  auditLog: {
+    userId: '0ad48e21-e7a2-4597-9568-c4535aedf687',
+    organizationId: 'cf8e132f-a68a-4c81-a0d4-3617b79e7b17',
+    resourceId: 'eac02f79-b8e2-495a-bffe-82633416c829',
+    resourceType: 'APP',
+    actionType: 'APP_CREATE',
+    resourceName: 'awdasdawdwd',
+    ipAddress: '::1',
+    metadata: {
+      userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36',
+      tooljetVersion: '2.22.2-ee2.8.3'
+    }
+  },
+  label: 'APP'
+}
+```
+
+</details>
+
+</div>
+

docs/versioned_docs/version-2.43.0/Enterprise/superadmin.md

@@ -0,0 +1,320 @@
+---
+id: superadmin
+title: Super Admin
+---
+
+<div className='badge badge--primary heading-badge'>Available on: Paid plans</div>
+
+A Super Admin is the user who has full access to all the Workspaces, Users, and Groups of an instance. An instance can have more than one Super Admin. A Super Admin has full control over other users' workspaces and can create users, groups, and other super admins.
+
+The user details entered while setting up ToolJet will have Super Admin privileges.
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## How Super Admin is Different from Admin
+
+| <div style={{ width:"100px"}}>Privilege </div>| Admin | Super Admin | 
+| --------- | ----- | ----------- |
+| Manage Users in their workspace (Invite/Archive/Unarchive) | ✅ | ✅ |
+| 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 Workspace Constants in their workspace | ✅ | ✅ |
+| [Manage data sources 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 constants)](#manage-workspace-setting-groupsssoworkspace-constants) | ❌ | ✅ |
+| [Manage all users from all the workspaces in the instance](#manage-all-users-in-the-instance) | ❌ | ✅ |
+| [Archive/Unarchive any user from all the workspaces in the instance](#archiving-a-user-from-all-the-workspaces-instance-level) | ❌ | ✅ |
+| [Reset password of any user](#reset-password-of-any-user) | ❌ | ✅ |
+| [Edit name of any user](#edit-name) | ❌ | ✅ |
+| [Make any user Super Admin](#make-the-user-super-admin) | ❌ | ✅ |
+| [Manage all workspaces in the instance(Archive/Unarchive)](#all-workspaces) | ❌ | ✅ |
+| [Restrict creation of personal workspace of users](#restrict-creation-of-personal-workspace-of-users) | ❌ | ✅ |
+| [Configure instance level login](#instance-login) | ❌ | ✅ |
+| [Enable Multiplayer editing](#enable-multiplayer-editing) | ❌ | ✅ |
+| [Implement White Labelling](#white-labelling) | ❌ | ✅ |
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## Super Admin features
+
+### Access any workspace
+
+If a user is a Super Admin, they can switch to any workspace created by any user within the instance using the Workspace Switcher located in the bottom left corner of the screen.
+
+The dropdown will display all workspaces, including those created by both Super Admins and any other users.
+
+<div style={{textAlign: 'center'}}>
+ <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/workspaceswitcher.png" alt="Superadmin: settings" />
+</div>
+
+### Create, Edit or Delete apps from any user's personal workspace
+
+Once the Super Admin access the workspace of any other user, they can create, edit or delete app on the workspace.
+
+This also includes - modifying folders and importing, exporting, or cloning apps to any user's workspace.
+
+### Archive/Unarchive Users
+
+Super Admin can not only archive/unarchive users/admins on their workspace but also from the workspaces of any other user.
+
+If a user is Super Admin, they just need to open the workspace in which they want to archive or unarchive a user. Then go to the **Workspace Settings** from the sidebar -> **Manage Users** -> **Archive/Unarchive** any user/admin
+
+<div style={{textAlign: 'center'}}>
+ <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/archiveusersa.png" alt="Superadmin: settings" />
+</div>
+
+###  Access ToolJet DB in any workspace
+
+Super Admins have access to the database of any user's workspace - just like Super Admins can access any application in any workspace. They have full access to modify or create any table in the ToolJet DB of any workspace.
+
+###  Manage Workspace Settings (Groups/SSO/Workspace constants)
+
+Super Admins have all the privileges that an Admin of a workspace have, Super Admins can:
+- **✅ Manage Groups**: Creating/Deleting/Updating a Group in any workspace
+- **✅ Manage SSO**: Full control over General Settings, Password login and other SSO options
+- **✅ Workspace Variables**: Adding, updating or deleting workspace variables
+- **✅ Workspace Constants**: Adding, updating or deleting workspace constants
+- **✅ Copilot**: Enabling or disabling Copilot
+- **✅ Custom Styles**: Adding or modifying custom styles
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## Settings
+
+Only Super Admins can access the Settings. To access the Settings page, click on the **⚙️** button and select **Settings** from the dropdown.
+
+- **[All Users](#all-users)**
+- **[All workspaces](#all-workspaces)**
+- **[Manage instance settings](#manage-instance-settings)**
+- **[License](#license)**
+- **[White labelling](#white-labelling)**
+
+<div style={{textAlign: 'center'}}>
+ <img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/settings.png" alt="Superadmin: settings" />
+</div>
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## All Users
+
+### Manage all Users in the Instance
+
+**All Users** settings can be used to check the list of all the users available on all the workspaces in the instance. Super Admins can also promote/demote any user to/from Super Admin from this page. They can also archive/unarchive any user at an instance level from this setting.
+
+<div style={{textAlign: 'center'}}>
+ <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/allusers1.png" alt="Superadmin: settings" />
+</div>
+
+### Archiving a User from all the Workspaces (Instance Level)
+
+Super Admins have the authority to deactivate any user at instance level. This will remove the user from all the workspaces in the instance.
+
+To archive a user, go to the **All Users** settings, click on the kebab menu next to the user that is to be archived and select **Archive** option. Once the user is archived, the status will change from **Active** to **Archived**. The user will not be able to login to any workspace in the instance.
+
+<div style={{textAlign: 'center'}}>
+ <img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/archiveinstance.png" alt="Superadmin: settings" />
+</div>
+
+<br/>
+
+**Unarchiving** a user from **All Users** settings will unarchive the user from the instance and not at workspace level. 
+
+**Info**: The user will be unarchived from instance level automatically if a workspace admin unarchives the user from their workspace.
+
+<div style={{textAlign: 'center'}}>
+ <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/unarchiveinstance.png" alt="Superadmin: settings" />
+</div>
+
+### Reset Password of any User
+
+Super Admins can reset the password of any user from the **All Users** settings. To reset the password, click on the kebab menu next to the user and select **Reset Password** option. A pop-up will appear asking either to auto-generate a password or to enter a new password. 
+
+### Edit User Details
+
+Super Admins can edit the details of any user from the **All Users** settings. To edit the details, click on the kebab menu next to the user and select **Edit user details** option. 
+
+#### Edit name
+
+On selecting the **Edit user details** option, a drawer will open from the right. Super Admins can edit the name of the user from this drawer. Once the changes are made, click on the **Update** button.
+
+#### Make the user Super Admin
+
+From the **Edit user details** drawer, Super Admins can make any user as Super Admin or remove any Super Admin from the **All Users** settings. To make a user Super Admin, toggle on the **Super Admin** radio button. The user will become Super Admin and the Type column will update from **`Workspace`** to **`Instance`**.
+
+<div style={{textAlign: 'center'}}>
+ <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/edituserdetailsinstance.png" alt="Superadmin: settings" />
+</div>
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## All Workspaces
+
+The All Workspaces tab provides a comprehensive view of all workspaces within the ToolJet instance. Super Admins can use this functionality to monitor and manage workspaces collectively, ensuring efficient administration and organization-wide oversight. 
+
+Super Admins have the authority to **archive** or **unarchive** workspaces of any user in the instance as needed. Archiving a workspace essentially sets it to an inactive state, removing it from active use. Conversely, unarchiving reactivates a previously archived workspace, making it accessible once again.
+
+<div style={{textAlign: 'center'}}>
+ <img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/workspaces1.png" alt="Superadmin: settings" />
+</div>
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+### Current Workspace
+
+The **Current Workspace** label will be displayed next to the workspace that the Super Admin has currently opened. If the Super Admin archives the current workspace, they will be prompted to switch to another active workspace to ensure continuous accessibility.
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+### Open Active Workspaces
+
+In the list of active workspaces, there is an option to open the workspace directly. This feature helps superadmins to quickly navigate to the workspace on the new tab of the browser and manage the workspace.
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+### Archive Workspaces
+
+The **Archive** button on the right of the workspace name allows Super Admins to archive the workspace. Once archived, the workspace will be moved to the **Archived Workspaces** section.
+
+**Impact**:
+- The apps on the archived workspace won't be accessable through the URL
+- Users will be logged out if they don't have access to any active workspace
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+### Archived Workspaces
+
+The **Archived** section displays a list of all archived workspaces. Super Admins can unarchive any workspace from this section by clicking the **Unarchive** button.
+
+<div style={{textAlign: 'center'}}>
+ <img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/workspaces2.png" alt="Superadmin: settings" />
+</div>
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## Manage Instance Settings
+
+<div style={{textAlign: 'center'}}>
+ <img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/instanceoptions.png" alt="Superadmin: settings" />
+</div>
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+### 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 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.
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+### Enable Multiplayer Editing
+
+Super Admins can enable multiplayer editing from the Manage Settings page. Once enabled, users will be able to edit the same app simultaneously resulting in real-time collaboration.
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+### Comments
+
+Super Admins can enable comments from the Manage Settings page. Once enabled, users will be able to collaborate by adding comments anywhere on the canvas.
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## White Labelling
+This feature allows you to customize the ToolJet instance with your own branding. You can change the logo, favicon, and the name of the instance.
+
+Check out the [White labelling](/docs/enterprise/white-label/) page for more details.
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## Instance Login
+
+Instance login configuration at the Settings level allows super admins to set up and manage the default login method for all workspaces within the instance. This ensures a standardized login experience unless individual workspace admins choose to configure a different method for their specific workspace.
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+### Access and Permissions
+
+Only super admins have the authority to configure **Instance login** settings. This ensures centralized control over the default login method across the entire instance.
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+### Super Admin URL
+
+This URL serves as a fail-safe in scenarios where password login is disabled, SSO is not configured, or a paid plan expires. Importantly, this URL exclusively supports password login and is accessible only by the super admin, preventing any unauthorized access.
+
+The default URL for super admin login is `https://<domain>/login/super-admin`. This URL can be accessed by the super admin to log in to the instance and manage the settings.
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+### Enable sign-up
+
+The "Enable Sign Up" option allows users to sign up without being invited. It is important to note that this feature includes both password login and SSO, providing a seamless onboarding experience for users.
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+### Password login
+
+Super admins can enable or disable password login for the entire instance. This setting ensures that all workspaces within the instance adhere to the same login method, unless individual workspace admins choose to configure a different method for their specific workspace.
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+### Enable Workspace Configuration
+
+Turning off this option restricts workspace admins from configuring the login method for their workspace. This configuration hides the Workspace Login option from the workspace settings tab.
+
+<div style={{textAlign: 'center'}}>
+ <img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/instancelogin.png" alt="Superadmin: settings" />
+</div>
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## License
+
+Manage the instance license via the **Settings** page. Super Admins have the capability to update the instance's license key from this page.
+
+Check out the [License](/docs/licensing) page for more details.
+
+</div>

docs/versioned_docs/version-2.43.0/Enterprise/white-label.md

@@ -0,0 +1,59 @@
+---
+id: white-label
+title: White Label
+---
+
+<div className='badge badge--primary heading-badge'>Available on: Paid plans</div>
+
+The White Label feature allows you to completely remove ToolJet's branding from the ToolJet platform, allowing you to replace it with your own customized logo, favicon and page title. This feature grants you full control over the visual identity of your ToolJet-powered application, ensuring a seamless and personalized user experience.
+
+With this feature, you gain the ability to rebrand the following key elements:
+
+- **Application Logo**: This includes the logo displayed on the login screen, dashboard, and app-editor.
+
+  <div style={{textAlign: 'center'}}>
+    <img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/white-label/whitelabeln1.png" alt="ToolJet - Enterprise - White label" />
+  </div>
+
+- **Favicon**: The small icon associated with your application. It is displayed in the browser tab.
+
+- **Page Title**: This is the text displayed in the browser tab. 
+
+Example, we have set a favicon image and page title as `Bon Ton` in the below image. 
+
+  <div style={{textAlign: 'center'}}>
+    <img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/white-label/title-and-favicon.png" alt="ToolJet - Enterprise - White label" />
+  </div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## Configuration
+
+To enable white labelling, click on the gear icon on the bottom left of the dashboard and select `Settings`. From the settings page, click on the `White labelling` tab. On the White labelling page, you'll be able to configure the following:
+
+- **Application Logo**: Add the URL of the image you want to use as your application logo. Preferred dimensions of the logo are: width `130px` and height `26px`.
+- **Favicon**: Enter the URL of the image you want to use as your application's favicon. Preferred dimensions of the favicon are: width `32px` and height `32px` or `16px` and height `16px`.
+- **Page Title**: Enter the text you want to display as your application's title. Preferred title length are 50-60 characters.
+
+<div style={{textAlign: 'center'}}>
+    <img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/white-label/settings.png" alt="ToolJet - Enterprise - White label" />
+</div>
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## ToolJet Cloud
+
+If you are using ToolJet Cloud, click on the gear icon on the bottom left of the dashboard and select `Settings`. From the settings page, click on the `White labelling` tab. On the White labelling page, you'll be able to configure the following:
+
+- **Application Logo**: Add the URL of the image you want to use as your application logo. Preferred dimensions of the logo are: width `130px` and height `26px`.
+- **Page Title**: Enter the text you want to display as your application's title. Preferred title length are 50-60 characters.
+- **Favicon**: Enter the URL of the image you want to use as your application's favicon. Preferred dimensions of the favicon are: width `32px` and height `32px` or `16px` and height `16px`.
+
+<div style={{textAlign: 'center'}}>
+    <img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/white-label/cloud1.png" alt="ToolJet - Enterprise - White label" />
+</div>
+
+</div>
+

docs/versioned_docs/version-2.43.0/actions/_category_.json

@@ -0,0 +1,5 @@
+{
+  "label": "Actions Reference",
+  "position": 7,
+  "collapsed": true
+}

docs/versioned_docs/version-2.43.0/actions/close-modal.md

@@ -0,0 +1,19 @@
+---
+id: close-modal
+title: Close modal
+---
+
+Use this action to close the modal that is already shown.
+
+Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
+
+:::info
+You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
+:::
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/actions/closemodal/closemodal2.png" alt="ToolJet - Action reference - Close modal" width="700" />
+
+</div>
+

docs/versioned_docs/version-2.43.0/actions/control-component.md

@@ -0,0 +1,102 @@
+---
+id: control-component
+title: Control component (Component Specific Actions)
+---
+
+Control component action invokes the component specific actions. Component specific actions are the actions that are exclusive actions for a particular component. Component specific actions can be triggered either through the event handlers or from the Run JavaScript code query.
+
+You can find the component specific actions for the specific component in their respective documentation. For example, you can find the component specific actions for the **Bounded Box** component in the [Bounded Box](/docs/widgets/bounded-box) documentation.
+
+<details>
+  <summary>Currently, Component specific actions are supported only by the below listed components.</summary>
+  <div>
+    <ul>
+    <li><a href="/docs/widgets/button#component-specific-actions-csa">Button</a></li>
+    <li><a href="/docs/widgets/checkbox#component-specific-actions-csa">Checkbox</a></li>
+    <li><a href="/docs/widgets/color-picker#component-specific-actions-csa">Color Picker</a></li>
+    <li><a href="/docs/widgets/dropdown#component-specific-actions-csa">Dropdown</a></li>
+    <li><a href="/docs/widgets/file-picker#component-specific-actions-csa">File Picker</a></li>
+    <li><a href="/docs/widgets/form#component-specific-actions-csa">Form</a></li>
+    <li><a href="/docs/widgets/icon#component-specific-actions-csa">Icon</a></li>
+    <li><a href="/docs/widgets/kanban#component-specific-actions-csa">Kanban</a></li>
+    <li><a href="/docs/widgets/link#component-specific-actions-csa">Link</a></li>
+    <li><a href="/docs/widgets/map#component-specific-actions-csa">Map</a></li>
+    <li><a href="/docs/widgets/modal#component-specific-actions-csa">Modal</a></li>
+    <li><a href="/docs/widgets/multiselect#component-specific-actions-csa">Multiselect</a></li>
+    <li><a href="/docs/widgets/radio-button#component-specific-actions-csa">Radio button</a></li>
+    <li><a href="/docs/widgets/table#component-specific-actions-csa">Table</a></li>
+    <li><a href="/docs/widgets/tabs#component-specific-actions-csa">Tabs</a></li>
+    <li><a href="/docs/widgets/text-input#component-specific-actions-csa">Text Input</a></li>
+    <li><a href="/docs/widgets/text#component-specific-actions-csa">Text</a></li>
+    <li><a href="/docs/widgets/textarea#component-specific-actions-csa">Text Area</a></li>
+    </ul>
+  </div>
+</details>
+
+:::info
+Check out the **[demo](https://youtu.be/JIhSH3YeM3E)** of Component specific actions demonstrated in one of our community call.
+:::
+
+## Using Component Specific Actions
+
+### Set a value for text input component using button's event handler
+
+- Drag a **Text Input** and a **Button** component onto the canvas.
+
+- Go to the **Inspector** on the left sidebar to check the exposed variables available for the `textinput1` component under the `components`. You'll see that the variable `value` is an empty string because the field value of the text input component is empty right now.
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Action reference - Control Component](/img/actions/controlcomponent/inspector.png)
+
+</div>
+
+- Now enter some value in the text input component and you'll see that the `value` in inspector has been updated.
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Action reference - Control Component](/img/actions/controlcomponent/updated.png)
+
+</div>
+
+- Now, click on the button's component handler to open up its properties in the right sidebar and then add a event handler for **On Click** event to trigger **Control Component** action. Select `textinput1` in component dropdown, `Set text` as Action, and in `Text` field enter the text that you want to update in the field value.
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Action reference - Control Component](/img/actions/controlcomponent/button.png)
+
+</div>
+
+- Now when you'll click on the button you'll see that the field value of the text input component has been updated with value that you set.
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Action reference - Control Component](/img/actions/controlcomponent/set.png)
+
+</div>
+
+
+### Clear value of text input component using JavaScript query
+
+- Let's clear the value that we set in the previous section, using Run JavaScript code. Create a new Run JavaScript Code query and call the component and the CSA that component provides.
+
+**Syntax:**
+```js
+await components.textinput1.clear()
+```
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Action reference - Control Component](/img/actions/controlcomponent/jsoption.png)
+
+</div>
+
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Action reference - Control Component](/img/actions/controlcomponent/clear.png)
+
+</div>
+
+- Finally, hit the **save and run** query button to fire up the query, and you'll see that the field value of the text input component has been cleared.
+

docs/versioned_docs/version-2.43.0/actions/copy-to-clipboard.md

@@ -0,0 +1,18 @@
+---
+id: copy-to-clipboard
+title: Copy to clipboard
+---
+
+Use this action to copy the text to the clipboard.
+
+Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
+
+:::info
+You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
+:::
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/actions/copytoclipboard/copy2.png" alt="ToolJet - Action reference - Copy to clipboard" width="700" />
+
+</div>

docs/versioned_docs/version-2.43.0/actions/generate-file.md

@@ -0,0 +1,56 @@
+---
+id: generate-file
+title: Generate file
+---
+
+# Generate file
+
+This action allows you to construct files on the fly and let users download it.
+
+## Options
+
+| Option | Description |
+|--------|-------------|
+| Type   | Type of file to be generated. Types: `CSV`, `Text` and `PDF` |
+| File name | Name of the file to be generated |
+| Data | Data that will be used to construct the file. Its format will depend on the file type, as specified in the following section |
+| Debounce | Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300` |
+
+:::tip
+Check how to run **[generate file action using RunJS](/docs/how-to/run-actions-from-runjs/#generate-file)**.
+:::
+
+### CSV Data Format
+
+To use the `CSV` file format, the data field should contain an array of objects. ToolJet assumes that the keys in each object are the same and represent the column headers of the CSV file.
+
+Example:
+
+```javascript
+{{
+  [
+    { name: 'John', email: 'john@tooljet.com' },
+    { name: 'Sarah', email: 'sarah@tooljet.com' },
+  ]
+}}
+```
+
+Using the above code snippet will generate a CSV file with the following content:
+
+```csv
+name,email
+John,john@tooljet.com
+Sarah,sarah@tooljet.com
+```
+
+### Text Data Format
+
+To use the `Text` file format, the data field should contain a string. 
+
+If you want to generate a text file based on an array of objects, you need to stringify the data before providing it. 
+
+For example, if you are using the table component to provide the data, you can enter **`{{JSON.stringify(components.table1.currentPageData)}}`** in the Data field.
+
+### PDF data format
+
+The PDF data format supports two types of input: either a `string` or an `array of objects`. When using an array of objects, the resulting PDF will display the data in a tabular format with columns and rows. On the other hand, if a string is provided, the generated PDF will consist of plain text.

docs/versioned_docs/version-2.43.0/actions/go-to-app.md

@@ -0,0 +1,18 @@
+---
+id: go-to-app
+title: Go to app
+---
+
+This action allows you to open any released ToolJet application when an event occurs. Only the apps that are released can be opened using this action.
+
+Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
+
+:::info
+You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
+:::
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/actions/gotoapp/gotoapp3.png" alt="ToolJet - Action reference - Open webpage" width="700" />
+
+</div>

docs/versioned_docs/version-2.43.0/actions/logout.md

@@ -0,0 +1,18 @@
+---
+id: logout
+title: Logout
+---
+
+This action allows you to log out of the application (ToolJet).
+
+Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
+
+:::info
+You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
+:::
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/actions/logout/logout2.png" alt="ToolJet - Action reference -  Logout" width="700" />
+
+</div>

docs/versioned_docs/version-2.43.0/actions/open-webpage.md

@@ -0,0 +1,18 @@
+---
+id: open-webpage
+title: Open webpage
+---
+
+You can use this action to open a webpage(on a new tab) for any event.
+
+Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
+
+:::info
+You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
+:::
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/actions/open-webpage/open2.png" alt="ToolJet - Action reference - Open webpage" width="700" />
+
+</div>

docs/versioned_docs/version-2.43.0/actions/run-query.md

@@ -0,0 +1,18 @@
+---
+id: run-query
+title: Run Query
+---
+
+This action allows you to fire queries when an event occurs.
+
+Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
+
+:::info
+You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
+:::
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/actions/run-query/run-query2.png" alt="ToolJet - Action reference -  Run Query" width="700" />
+
+</div>

docs/versioned_docs/version-2.43.0/actions/set-localstorage.md

@@ -0,0 +1,58 @@
+---
+id: set-localstorage
+title: Set localStorage
+---
+
+# Set localStorage
+
+This action allows you to specify a `key` and its corresponding `value` to be stored in local storage of the browser. Local storage can be useful in a lot of scenarios. Some of the most common use cases of the local storage includes:
+- Saving form values so that users don't accidentally lose them if they reload the page
+- Storing any kind of data that is not going to be transferred to the database
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## Example: Setting a Component Value Based on Local Storage
+
+1. Add **Text Input**, **Button** and **Text** components to the canvas.
+
+    <div style={{textAlign: 'center', marginBotton:'25px'}}>
+    <img className="screenshot-full" src="/img/actions/localstorage/add-components.png" alt="Add Components To The Canvas" />
+    </div>
+
+
+2. Select the Button, add a new event handler, and add a `Set local storage` action with `key` set to `localtest` and `value` set to `{{components.textinput1.value}}`. 
+
+    <div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/actions/localstorage/set-local-storage.png" alt="Set Local Storage" />
+    </div>
+
+    This will set a local storage value with `localtest` as the key and the value entered in the Text Input component as its value. 
+
+3. Create a `Run JavaScript code` query, and enter the code below: 
+
+    ```js
+    return localStorage.getItem("localtest");
+    ```
+    <div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/actions/localstorage/create-runjs-query.png" alt="Create RunJS Query" />
+    </div>
+
+    Click on the **Run** button in the Query Panel. This query will fetch the `localtest` local storage variable that we had set earlier. 
+
+4. Select the **Text** component. Under its `Text` property, enter `{{queries.runjs1.data}}`. Now, the Text component will display the value returned by the `Run JavaScript code` query - the local variable we had set earlier. 
+    <div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/actions/localstorage/update-text-component.png" alt="Update Value Of Text Component Based On Local Storage" />
+    </div>
+
+5. Select the Button component. Add a new event handler to it, add a `Run query` action, select `runjs1` as the query, and set a debounce of `300`.
+    <div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/actions/localstorage/update-text-on-button-click.png" alt="Updating Text On Button Click" />
+    </div>
+
+    Now, every time you click on the Button component, it will set the local storage value, and the Text component will display the value set in local storage. 
+
+    :::info
+    Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
+    :::
+
+</div>

docs/versioned_docs/version-2.43.0/actions/set-page-var.md

@@ -0,0 +1,36 @@
+---
+id: set-page-variable
+title: Set page variable
+---
+
+Page variables are restricted to the page where they are created and cannot be accessed throughout the entire application like regular variables.
+
+Use this action to establish a variable and assign a value to it within the [Multipage Apps](/docs/tutorial/pages).
+
+By default, the debounce field is left empty. However, you can input a numeric value to indicate the time in milliseconds before the action is executed. For example, `300`.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/actions/page/setpagevar2.png" alt="ToolJet - Action reference - Switch page" width="600"/>
+
+</div>
+
+## Using RunJS query to set page variable
+
+Alternatively, the set page variable action can be triggered via a RunJS query using the following syntax:
+```js
+await actions.setPageVariable('<variablekey>',<variablevalue>)
+```
+
+`variablekey` must be provided as a string (enclosed in quotes), while the `variablevalue` does not require quotation marks if it is a numerical value.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/actions/page/setpagevar33.png" alt="ToolJet - Action reference - Switch page" />
+
+</div>
+
+:::info
+For instructions on how to run actions from a RunJS query, refer to the how-to guide [Running Actions from RunJS Query](/docs/how-to/run-actions-from-runjs).
+:::
+

docs/versioned_docs/version-2.43.0/actions/set-table-page.md

@@ -0,0 +1,24 @@
+---
+id: set-table-page
+title: Set Table Page
+---
+
+Use this action to change the page index in the table widget.
+
+## Options
+
+| Option | Description |
+|--------|-------------|
+| Table   | Select table from the dropdown |
+| Page Index | Numerical value for the page index. ex: `{{2}}` |
+| Debounce | Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300` |
+
+:::info
+You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
+:::
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/actions/settablepage/page2.png" alt="ToolJet - Action reference - Open webpage" width="700" />
+
+</div>

docs/versioned_docs/version-2.43.0/actions/set-variable.md

@@ -0,0 +1,24 @@
+---
+id: set-variable
+title: Set variable
+---
+
+This action allows you to create a variable and assign a `value` to it.
+
+## Options
+
+| Option | Description |
+|--------|-------------|
+| Key   | Name(String) of the variable through which you can access the value |
+| Value | A value can be a string, number, boolean expression, array, or object |
+| Debounce | Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300` |
+
+:::info
+You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
+:::
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/actions/setvar/setvar2.png" alt="ToolJet - Action reference -Set variable" width="700" />
+
+</div>

docs/versioned_docs/version-2.43.0/actions/show-alert.md

@@ -0,0 +1,23 @@
+---
+id: show-alert
+title: Show alert
+---
+
+This action allows you to display an alert message. 
+
+You can set a custom **message** for the alert and choose a particular alert type.
+
+There are 4 types of alert messages - **Info**, **Success**, **Warning**, and **Error**.
+
+Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
+
+:::info
+You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
+:::
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/actions/show-alert/alert2.png" alt="ToolJet - Action reference -  Show Alert" width="700" />
+
+</div>
+

docs/versioned_docs/version-2.43.0/actions/show-modal.md

@@ -0,0 +1,18 @@
+---
+id: show-modal
+title: Show modal
+---
+
+Use this action to show the modal for an event.
+
+Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
+
+:::info
+You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
+:::
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/actions/showmodal/showmodal2.png" alt="ToolJet - Action reference - Show modal" width="700" />
+
+</div>

docs/versioned_docs/version-2.43.0/actions/switch-page.md

@@ -0,0 +1,55 @@
+---
+id: switch-page
+title: Switch Page
+---
+
+Utilize this action with various event handler to transition to a different page within the [Multipage App](/docs/tutorial/pages).
+
+By default, the debounce field is left empty. However, you can input a numeric value to indicate the time in milliseconds before the action is executed. For example, `300`.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/actions/page/switchpage2.png" alt="ToolJet - Action Reference - Page Switching" width="500"/>
+
+</div>
+
+## Query Params
+
+Query parameters can be passed through action such as `Switch Page`. The parameters are appended to the end of the application URL and are preceded by a question mark (`?`). 
+
+Query parameters are composed of key-value pairs, where the `key` and `value` are separated by an equals sign (`=`). Multiple query parameters can be included by clicking on the `+` button.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/actions/page/queryparam1.png" alt="ToolJet - Action Reference - Page Switching"/>
+
+</div>
+
+In the above screenshot, we have provided the `username` as the key and the value is `{{globals.currentUser.email}}` which gets the email of the signed in user dynamically. When the button is clicked to trigger the `Switch Page` event handler attached to it then the URL on the switched page will have the parameters.
+
+They are commonly used to provide additional information to the server or to modify the behavior of a web page. They can be used for filtering search results, pagination, sorting, and various other purposes.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/actions/page/queryparam2.png" alt="ToolJet - Action Reference - Page Switching"/>
+
+</div>
+
+## Using RunJS query to switch page
+
+Alternatively, the switch page action can be activated via a RunJS query using the following syntax:
+```js
+await actions.switchPage('<page-handle>')
+```
+
+:::info
+For instructions on how to run actions from a RunJS query, refer to the how-to guide [Running Actions from RunJS Query](/docs/how-to/run-actions-from-runjs).
+:::
+
+### Switch page with query params
+
+The switch page action can also be triggered along with query parameters using the following syntax:
+
+```js
+actions.switchPage('<pageHandle>', [['param1', 'value1'], ['param2', 'value2']])
+```

docs/versioned_docs/version-2.43.0/actions/unset-page-var.md

@@ -0,0 +1,27 @@
+---
+id: unset-page-variable
+title: Unset page variable
+---
+
+Utilize this action to clear a variable that was established using the [set page variable action](/docs/actions/set-page-variable).
+
+By default, the debounce field is left empty. However, you can input a numeric value to indicate the time in milliseconds before the action is executed. For example, `300`.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/actions/page/unsetpagevar2.png" alt="ToolJet - Action reference - Switch page" width="600"/>
+
+</div>
+
+## Using RunJS query to unset variable
+
+Alternatively, the unset page variable action can be triggered via a RunJS query using the following syntax:
+```js
+await actions.unsetPageVariable('<variablename>')
+```
+
+`variablename` is the key of the variable that was provided while creating the variable.
+
+:::info
+For instructions on how to run actions from a RunJS query, refer to the how-to guide [Running Actions from RunJS Query](/docs/how-to/run-actions-from-runjs).
+:::

docs/versioned_docs/version-2.43.0/actions/unset-variable.md

@@ -0,0 +1,23 @@
+---
+id: unset-variable
+title: Unset variable
+---
+
+This action allows you to remove the variable that was created using the set variable action.
+
+## Options
+
+| Option | Description |
+|--------|-------------|
+| Key   | Name(String) of the variable through which you can access the value |
+| Debounce | Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300` |
+
+:::info
+You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
+:::
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/actions/unsetvar/unsetvar2.png" alt="ToolJet - Action reference -Unset variable" width="700" />
+
+</div>

docs/versioned_docs/version-2.43.0/app-builder/canvas.md

@@ -0,0 +1,67 @@
+---
+id: canvas
+title: Canvas
+---
+
+Canvas is the center area of the ToolJet app builder where the application is built. You arrange the **components** by dragging them from the Components library(right-sidebar).
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/canvasnew.png" alt="App Builder: Canvas"/>
+
+</div>
+<br/>
+
+:::info
+- The Canvas height and width can be adjusted from the [Global Settings](/docs/app-builder/left-sidebar#global-settings).
+- When the [Pages drawer](/docs/tutorial/pages) on the left is opened or pinned, the canvas becomes horizontally scrollable.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/scrollnew.gif" alt="App Builder: Canvas"/>
+
+</div>
+:::
+
+### Arrange Components
+
+All the components are fully interactive in editor mode - to prevent interaction you can **click and hold** the **Component Handle** to change component's position.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/handlenew.png" alt="App Builder: Canvas"/>
+
+</div>
+
+### Resize Components
+
+Components on the canvas can be resized from the edges.
+
+You can precisely set the position of selected components using keyboard arrow keys after clicking the component handle.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/resize.gif" alt="App Builder: Canvas"/>
+
+</div>
+
+### Group Components
+
+ToolJet comes with flexible components to group other components together, such as **[Container](/docs/widgets/container/)** and **[Form](/docs/widgets/form/)**. When you drag and drop components in containers/forms they create a group of nested components. All components can be nested in this way.
+
+### Hide or Disable Components
+
+Hide or Disable a component by setting its **Visibility** or **Disabled** property to `true`. Click on the component handle to open **config inspector** on right side. These values can also evaluate to true based on a truthy value. For example, you can use the property of one component to toggle the Visibility property of another component dynamically, you just need to write a conditional statement. 
+
+For example: We want to disable a button when a checkbox is checked so we can simple use `{{components.checkbox1.value}}` in **Disable** property of the button. `{{components.checkbox1.value}}` evaluates to `true` when the checkbox is checked, and false when unchecked.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/hide.gif" alt="App Builder: Canvas"/>
+
+</div>
+
+### Clone Components
+
+You can clone existing components on the canvas by **cmd/ctrl + d**. Check other **[Keyboard Shortcuts](/docs/tutorial/keyboard-shortcuts)**.
+

docs/versioned_docs/version-2.43.0/app-builder/customcss.md

@@ -0,0 +1,107 @@
+---
+id: customstyles
+title: Custom Styles
+---
+
+<div className='badge badge--primary heading-badge'>Available on: Paid plans</div>
+
+The Custom Styles feature in ToolJet allows users to apply their own CSS, overriding the default app styles. This enables easy customization of app appearance, and maintains consistent themes across all ToolJet apps. By using standardized styles, users avoid the repetitive task of manually styling components for each new app, enhancing development efficiency and ensuring visual coherence for a seamless user experience
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/customcss-v2.gif" alt="Custom CSS" /> 
+</div>
+
+## Applying Custom Styles To All Components
+
+Follow these steps to apply custom styles in your ToolJet apps:
+
+- Navigate to the **Custom Styles** page from **Workspace Settings** on the ToolJet dashboard
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/custom-styles.png" alt="Custom CSS" />
+</div>
+<br/>
+
+- To modify the default colors of components, use their class names, which follow the format `_tooljet-<component>`. 
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/component-class.png" alt="Component Class" />
+</div>
+<br/>
+
+- You'll need to identify the specific sub-class(or HTML tags) of each component to target particular attributes. The browser's inspector will allow you to easily find the sub-class(or HTML tags) of the specific 
+properties. 
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/button-class-subclass.png" alt="Sub-Class" />
+</div>
+<br/>
+
+- After locating the specific sub-class(or HTML tag), refer it in the **Custom Styles** section and add styling to it. For instance, for the Button component above, the the below CSS will change the background color:
+
+```css
+._tooljet-Button button {
+    background-color: #152A65 !important;
+}
+```
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/button-component-customcss.png" alt="Button Custom CSS" />
+</div>
+<br/>
+
+- Similarly, the code below can be used to change the background color of the Filter button on a Table component.
+
+```css
+._tooljet-Table .table-card-header button {
+    background-color: #152A65 !important;
+}
+```
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/filter-button-customcss.png" alt="Filter Custom CSS" />
+</div>
+<br/>
+
+- The code below will change the font size and color of the Text Input and Number Input labels.
+
+```css
+._tooljet-TextInput p  {
+	color: #152A65 !important;
+    font-size: 16px !important;
+    font-weight: bold !important;
+}
+
+._tooljet-NumberInput p  {
+	color: #152A65 !important;
+    font-size: 16px !important;
+    font-weight: bold !important;
+}
+```
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/input-fields-customcss.png" alt="Input Field Custom CSS" />
+</div>
+
+
+## Applying Custom Styles To Individual Components
+
+To modify the colors of individual components, use their class names, which follow the format `_tooljet-<component_name>`. Here, the component name refers to the name of the component that is set in the application.
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/individual-class.png" alt="Individual Class Custom CSS" />
+</div>
+<br/>
+
+- The color of the Button component above can be changed using the code below:
+
+```css
+._tooljet-addIncomeButton button {
+    background-color: blue !important;
+}
+```
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/individual-customcss.png" alt="Individual Class Custom CSS" />
+</div>
+<br/>
+
+In conclusion, Custom CSS feature lets you override default styles with your own CSS. By providing the flexibility to apply both global and component-specific customizations, this feature enhances the visual coherence and branding of your apps. cs

docs/versioned_docs/version-2.43.0/app-builder/examples/accessing-values.md

@@ -0,0 +1,62 @@
+---
+id: accessing-values
+title: Accessing and Utilizing Values
+---
+
+ToolJet's flexibility in integrating dynamic data within applications is facilitated through the ability to use custom code, and access and manipulate values derived from components, queries, globals. You can use double curly braces `{{}}` in the app-builder to access values or enter JavaScript code.
+
+## Accessing Values
+
+You can check all the accessible values using the left sidebar's **[Inspector](/docs/how-to/use-inspector/)** tab. This functionality can be handy to check data returned by queries and components on the canvas and reference it in queries or components. Inspector also displays other values like global values, variables, page variables, etc. 
+
+![Check Available Values Using Inspector](/img/tooljet-concepts/writing-custom-code/inspector.png)
+
+### Example Scenarios
+
+**Query Data Access**:
+- **Purpose**: Retrieve sales data from a query.
+- **Implementation**: Use the expression `{{queries.getSalesData.data}}` to fetch data from the `getSalesData` query.
+
+**Component Data Access**:
+- **Purpose**: Access data from a selected row in a table.
+- **Implementation**: Use the expression `{{components.table1.selectedRow.id}}` to get the ID of the selected row in `table1`.
+
+**Accessing Globals**
+- **Purpose**: Access global settings and variables predefined in the ToolJet environment.
+- **Implementation**: To check the current theme and adjust styles dynamically, use:
+`{{globals.theme.name}}`
+
+## Writing Custom Code
+
+ToolJet supports embedding custom JavaScript directly within the app's interface.
+
+### Example Scenarios
+
+**Dynamic Background Color**:
+   - **Purpose**: Set the background color of a Button component based on the theme.
+   - **Implementation**: In the properties panel, click on **fx** next to the `Background color` setting. Enter `{{globals.theme.name == "light" ? "#375FCF" : "#FFFFFF"}}` to conditionally set the color.
+
+**Conditional Button Enablement**:
+   - **Purpose**: Enable a Button component based on user input.
+   - **Implementation**: Under the Button's `Disable` property, click on **fx** and enter `{{components.form1.data.textinput1.value == "" ? true : false}}` to disable it when the specified text input in the Form component is empty.
+
+## More on the Left Sidebar
+
+The left sidebar in ToolJet is a hub for navigation and application configuration, featuring several options including Pages, Inspector, Debugger, and Global Settings.
+
+### Key Features
+
+- **Pages**: Manage multiple pages within a single application, enhancing organizational structure and user navigation.
+  
+- **Inspector**: Inspect data linked to queries and components, essential for debugging and data manipulation.
+
+- **Debugger**: Track and display errors during query execution, providing insights into application issues.
+
+- **Global Settings**: Configure application-wide settings such as app slug, header visibility, and maintenance mode.
+
+## Practical Tips
+
+- Use the Inspector to ensure correct data bindings and troubleshoot data flow issues.
+- Leverage the Debugger to maintain smooth operation and quick error resolution.
+- Adjust Global Settings to tailor app behavior to specific user or organizational needs.
+

docs/versioned_docs/version-2.43.0/app-builder/examples/create-queries.md

@@ -0,0 +1,142 @@
+---
+id: create-queries
+title: Creating Queries
+---
+
+The Query Panel at the bottom of the app-builder enables the creation and management of queries for interacting with connected data sources. This includes performing API requests, querying databases, and applying transformations or data manipulations using JavaScript and Python.
+
+The Query Panel consists of two sections:
+- **Query Manager** on the left, which displays a list of all the created queries.
+- **Query Editor** on the right, which is used to configure the selected query.
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-queries/query-panel-preview.png" alt="Create a query" />
+</div>
+
+## Creating a New Query
+- Click on the **+ Add** button in the Query Panel to open a menu listing the available data sources.
+- Choose a data source to set the context for the new query.
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-queries/data-source-list.png" alt="Data Source List" />
+</div>
+
+### Configuring the Query
+- You can choose from low-code operations or write an SQL statement, depending on the data source. 
+
+- For instance, you will have to choose the **Table name** and **Operations** (List Rows, Create Row, Update Rows, Delete Rows, Join Tables) for a ToolJet Database. 
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-queries/low-code-query-builder.png" alt="Low Code Query Builder" />
+</div>
+
+- And for PostgreSQL, you will have to choose between SQL mode or GUI mode to craft your query. 
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-queries/sql-query-builder.png" alt="SQL Query Builder" />
+</div>
+
+- At the top of the Query Editor, you can click on the query name area to input a descriptive name, like `fetchUsers`.
+
+- If your query requires parameters, add them using the `+` button near the **Parameters** label.
+
+**Example**: For a PostgreSQL query named *fetchUsers* that is fetching data from the *allUsers* table, you might set a parameter to a single user by passing in the id parameter.
+
+```sql
+SELECT * FROM allUsers WHERE id = {{parameters.id}}
+```
+
+Here, `{{parameters.id}}` is a parameter that you can define by clicking on the **+** icon on the Query Panel header next to the `Parameters` label.
+
+## Query Examples
+
+Let's look at some examples with a PostgreSQL data source with a database table named *feature_requests*.
+
+### Reading Data 
+- Create a query named *getAllRequests* that selects all records from the `feature_requests` table.
+
+```sql
+SELECT * FROM feature_requests;
+```
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-queries/read-data.gif" alt="Read Data" />
+</div>
+
+- You can scroll down and see the returned data in the **Preview** section.
+
+- Binding the returned data to components is a straightforward process. For instance, to add the returned data of the *getAllRequests* query to a Table, simply reference the query in the `Data` property of the Table component:
+
+```js
+{{queries.getAllRequests.data}}
+```
+
+### Inserting Data 
+- Define a query `addNewRequest` to insert a new item into the `feature_requests` table.
+
+```sql
+INSERT INTO feature_requests (id, title, description, votes, priority)
+VALUES (10, 'Toggle Component', 'We need a toggle component in future release.', 0, 2);
+```
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-queries/insert-data.png" alt="Insert Data" />
+</div>
+
+You can insert values from the components in queries. For instance, the above code can be updated to pick values from the components by using the double curly braces to pass the component values:
+
+```sql
+INSERT INTO feature_requests (id, title, description, votes, priority)
+VALUES (10, `{{components.textinput1.value}}`, `{{components.textinput2.value}}`, 0, 2);
+```
+
+You can apply the same principles to upcoming examples.
+
+### Updating Data 
+
+To update existing data:
+
+**Example**: Set up a query `updateRequest` to modify details of an existing product based on the id of the selected product in the Table component.
+
+```sql
+UPDATE feature_requests
+SET 
+    title = 'Updated Feature Title',
+    description = 'Updated Feature Description',
+    votes = 15,
+    priority = 2
+WHERE id = `{{components.table1.selectedRow.id}}`;
+```
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-queries/update-data.png" alt="Update Data" />
+</div>
+
+
+### Deleting Data 
+To delete data:
+
+**Example**: Craft a query `deleteRequest` that removes a product from the database based on a parameter.
+
+```sql
+DELETE FROM feature_requests WHERE votes < {{parameters.minimumVotes}};
+```
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-queries/delete-data.png" alt="Delete Data" />
+</div>
+
+## Using Transformations and Events
+
+**Transformations**: After fetching data, you might want to format it (e.g., filtering out unnecessary fields or converting data types). ToolJet allows using JavaScript or Python for these transformations.
+
+**Event Handling**: Link queries with application events for dynamic interactions. For example, in the *updateRequest* query, you can set up an event to automatically run the *getAllRequests* query right after *updateRequest*. This ensures that the application retrieves and displays the updated data in the relevant components.
+
+## Advanced Settings and Debugging
+
+**Preview and Run**: Use the `Preview` button to test queries and view results in raw or JSON format before executing them within the app using the `Run` button.
+
+**Configuration Settings**:
+- **Run this query on application load?**: Decide if the query should execute automatically when the app loads.
+- **Request confirmation before running query?**: Set up confirmations for query operations to prevent accidental data changes.
+- **Show notification on success?**: Configure notifications to inform users of successful operations. You can customize this property's notification message content and display duration.

docs/versioned_docs/version-2.43.0/app-builder/examples/create-ui.md

@@ -0,0 +1,161 @@
+---
+id: create-ui
+title: Creating UI
+---
+
+ToolJet offers a variety of pre-built components that streamline the development process and allow for rapid prototyping and deployment of internal tools. This guide is focused on building a basic UI for a Support Desk Dashboard application.
+
+## Creating the Header
+- Drag and drop a **Text** component on the top left of the canvas. 
+- Click on the component to open its Properties Panel on the right and add **Support Desk Dashboard** under its `Data` property.  
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-ui/add-header-text.png" alt="Add header text" />
+</div>
+
+You can see all the available properties of a component in the Properties Panel. You can manage the functionality and styling properties of the component in the Properties Panel.
+
+- Change its font size to 24, font weight to bold and color to blue(hex code - `#408FCC`). 
+- Add another Text component below it and enter `Track and manage all your tickets in one place` under its `Data` property.
+- Change its font size to 14 and color to grey (hex code - `#9B9B9B`).
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-ui/add-sub-header-text.png" alt="Add sub header text" />
+</div>
+
+## Support Tickets Counter
+- Drag and drop **Statistics** component next to it. 
+- Under its `Primary value label`, enter `Created` and enter a number under `Primary value`. 
+- Change its Primary label color and Primary text color to blue(`#4A90E2`).
+- Disable `Hide secondary value` 
+- Add 2 more Statistics components for Pending and Closed tickets. 
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-ui/add-statistics.png" alt="Add statistics" />
+</div>
+
+## Tickets Table
+- Add a **Table** component on the canvas. 
+- Navigate to its Properties Panel on the right and change its `Border Radius` to 10.  
+- Under its `Data` property, add the below dummy data:
+
+```js
+{{ [{
+    ticketId: "TCK1001",
+    customerName: "Jane Doe",
+    issueType: "Login Issue",
+    priority: "High",
+    status: "Open",
+    lastUpdated: "2024-04-12"
+  },
+  {
+    ticketId: "TCK1002",
+    customerName: "John Smith",
+    issueType: "Payment Failure",
+    priority: "Medium",
+    status: "Pending",
+    lastUpdated: "2024-04-11"
+  },
+  {
+    ticketId: "TCK1003",
+    customerName: "Alice Johnson",
+    issueType: "Feature Request",
+    priority: "Low",
+    status: "Closed",
+    lastUpdated: "2024-04-10"
+  },  {
+    ticketId: "TCK1004",
+    customerName: "Sarah Dunsworth",
+    issueType: "Feature Request",
+    priority: "High",
+    status: "Closed",
+    lastUpdated: "2024-04-10"
+  },
+] }}
+```
+
+- Add a **Text** component above it and enter **Tickets** under its `Data` property.
+- Change its font size to 14 and color to grey (hex code - `#9B9B9B`).
+- Under the `Columns` section, click on the columns and change their `Column name` properties to update the column name. For instance, change "ticketId" to "ticket ID", "customerName" to "customer name", etc. 
+
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-ui/add-table.png" alt="Add table component" />
+</div>
+
+
+
+## Adding a New Page
+- Click on **Pages** on the left sidebar - there will be a *Home* page by default. Rename the 
+- Click on the `+` icon to create a new page and rename the new page to <i>Customers</i>.
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-ui/create-new-page.png" alt="Add new page" />
+</div>
+
+- Click and drag to select all components on the *Dashboard* page, copy them (CMD+C for Mac and Cntrl+C for Windows) and paste (CMD+V for Mac and Cntrl+V on Windows) them in the <i>Customers</i> page.
+
+
+- For the **Text** component for **Tickets**, change the `Data` property to **Customers**.
+- Add the below data under the Table's `Data` property.
+```js
+{{[
+    {
+        id: 1,
+        name: "John Doe",
+        email: "john.doe@example.com",
+        phone: "+1234567890",
+        status: "Active",
+        issuesResolved: 0
+    },
+    {
+        id: 2,
+        name: "John Smith",
+        email: "jane.smith@example.com",
+        phone: "+1234567891",
+        status: "Inactive",
+        issuesResolved: 0
+    },
+    {
+        id: 3,
+        name: "Alice Johnson",
+        email: "emily.johnson@example.com",
+        phone: "+1234567892",
+        status: "Active",
+        issuesResolved: 1
+    },
+    {
+        id: 4,
+        name: "Michael Brown",
+        email: "michael.brown@example.com",
+        phone: "+1234567893",
+        status: "Inactive",
+        issuesResolved: 4
+    },
+    {
+        id: 5,
+        name: "Sarah Dunsworth",
+        email: "michael.brown@example.com",
+        phone: "+1234567893",
+        status: "Active",
+        issuesResolved: 1
+    }
+]}}
+```
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-ui/update-new-page.png" alt="Update new page" />
+</div>
+
+## Changing the Theme
+
+Click on the **Settings** button on the left sidebar. The `App mode` property will be set as `Auto` by default. Switch the `App mode` property to dark. Now when you preview the app, you can see that the app has a dark color scheme. 
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-ui/dark-color-scheme.png" alt="Dark mode" />
+</div>
+
+
+When you keep the `App mode` as auto, it will follow the color scheme of the browser.
+
+
+This guide has outlined the steps to create a Support Desk Dashboard UI using ToolJet's components. You now have a visually appealing interface that will help manage and track support tickets efficiently. Continue to explore ToolJet to learn about adding functionality to the UI. 

docs/versioned_docs/version-2.43.0/app-builder/examples/sharing-apps.md

@@ -0,0 +1,60 @@
+---
+id: sharing-apps
+title: Previewing, Testing and Sharing Apps 
+---
+
+ ToolJet's App-Builder provides critical tools for app preview, development and deployment. Let's take a look at how you can use it throughout the development process.
+
+## Preview
+You can use Preview to ensure the app functions correctly on both mobile and desktop platforms.
+
+- Open the ToolJet App-Builder and navigate to your app.
+- Click the `Preview` icon located at the top-right corner to enter preview mode.
+- Use the **Mobile** and **Desktop** view options to toggle between different screen settings.
+- Observe component behavior and layout differences across devices.
+- Adjust component visibility using the `Show on mobile` and `Show on desktop` options under the component's Properties Panel.
+
+## Multi-Environment Testing
+Simulate app behavior in various stages of the development lifecycle (Development, Staging, Production).
+
+**Steps**:
+1. Select the desired environment from the Env dropdown menu in the top-bar.
+2. Make necessary changes and use the Version Manager to handle different versions.
+3. Preview the app to ensure it behaves as expected in the chosen environment.
+
+## Share
+
+### Releasing App
+To release an app to the users, you need to promote it to `Production` environment. Once you are in `Production`, the `Promote` button will have the `Release` label. Once you click on `Release` and confirm, the application will be released.
+
+### Making App Public
+You can share the application with external users via a user-friendly, accessible URL.
+
+- Click the `Share` button on the top-bar.
+- In the Share modal, toggle on `Make application public` to allow access without a ToolJet login.
+- Edit the default URL slug to a more memorable and relevant one for easier access.
+- Copy the newly customized URL and distribute it to your intended audience.
+
+This provides external users easy and direct access to the application, enhancing reach and usability.
+
+<!-- ## Embedding the App into a Website
+
+**Objective**: Integrate the ToolJet app within an existing web application to provide seamless user interaction.
+
+**Steps**:
+1. Ensure the app is set to public or set `ENABLE_PRIVATE_APP_EMBED` to `true` in the `.env` file for private apps.
+2. Navigate to the Share modal and copy the embeddable link.
+3. Paste the embed link into the `iframe` tag of your website's HTML code.
+
+**Benefit**: Users can interact with the ToolJet app directly from your website, improving the user experience and retaining user engagement. -->
+
+
+### Efficient Development with Gitsync
+
+Gitsync can be used to maintain application version control and facilitate collaborative development.
+
+- Click on the `Gitsync` icon in the top-bar.
+- Follow the prompts to connect your ToolJet app with a GitHub repository.
+- Utilize git operations to manage app development across different branches and versions.
+
+Read more about Gitsync **[here](/docs/gitsync)**.

docs/versioned_docs/version-2.43.0/app-builder/examples/using-code.md

@@ -0,0 +1,76 @@
+---
+id: using-code
+title: Using Custom Code
+---
+
+In ToolJet, code serves as a powerful means to enhance and customize your applications. From complex logic implementations using **Run JavaScript code** or **Run Python code** queries to simple dynamic expressions with `fx`, the versatility is immense. Below is a basic demonstration of how you can leverage code within ToolJet.
+
+Let's take a look at different examples on how to use code. 
+
+## Using fx to Dynamically Change Properties of a Component:
+- Drag and drop a **Number Input** component and a **Button** component on the canvas.
+- Click on the **Button** component, navigate to its Properties Panel on the right and click on the `fx` button next to the `Disable` condition.
+- Enter the below code under the `Disable` condition:
+```js
+{{components.numberinput1.value ? false : true}}
+//replace numberinput1 with the name of your check box component
+```
+Now if there is no value entered in the Number Input component, the button will be disabled.
+
+You can apply the same principles to programmatically set a range of properties.
+
+#### Examples:
+1. To change the color of the Button component based on a Text Input field, enter the below code under the color property of the Button component:
+```js
+{{components.textinput1.value == "available" ? '#375FCF' : '#FF0000'}}
+//replace textinput1 with the name of your check box component
+```
+
+2. To change the visibility of an Image component based on a Checkbox component, enter the below code under the Visibility condition of the Image component:
+
+```js
+{{components.checkbox1.value ? true : false}}
+//replace checkbox1 with the name of your check box component
+```
+
+## Table Transformations to Change Cell Value
+- Go to the Properties Panel of a Table component, under `Columns`, click on a column name. 
+- Under `Transformations`, the default value will be `{{cellValue}}`. Add JavaScript code to update the cell value dynamically. 
+- For instance, to round off a value, you can use the below code:
+```js
+{{cellValue > 4.5 ? 5 : 4}}
+```
+
+## Transforming Data Returned by a Query Using Run JavaScript code:
+- Click on the **Add** button in the Query Panel and select **Run JavaScript code** 
+- Use the below code to execute a query, access its data and transform it:
+
+```js
+await queries.restapi1.run();
+// replace restapi1 with your query name
+
+let value = queries.restapi1.getData();
+// replace restapi1 with your query name
+
+function filterProductsByBrandAndRating(value.products, brand, minRating) {
+     return products.filter(product => product.brand === brand && product.rating >= minRating);}
+        return filterProductsByBrandAndRating(value.products, "Apple", 4.5)
+//use JavaScript code to refine the data        
+```
+
+## Use Moment.js to Add Current Date to the Datepicker Component
+- Select the Datepicker component and go to its Properties Panel. Under `Default value`, enter the below code:
+```js
+{{moment().format('DD/MM/YYYY');}}
+```
+The above code will add today's date as the default in DD/MM/YYYY format.
+
+## Show Data Based on the Logged-in User.
+
+- Click on the **Inspector** in the left side-bar and expand the `Globals` accordion to check all the values available under global. These properties can be used to make your app more dynamic. 
+- For instance, if there is a Button component used to update IT Ticket Requests, you can click on **fx** next to the component's `Visibility` property and enter the below code to make the button visible only when admins access it:
+```js
+{{globals.currentUser.groups.includes("admin") ? true : false }}
+```
+
+The examples provided are just a starting point for leveraging ToolJet's custom code capabilities. You have the flexibility to fully tailor your applications using our comprehensive custom coding features.

docs/versioned_docs/version-2.43.0/app-builder/examples/variables.md

@@ -0,0 +1,49 @@
+---
+id: variables
+title: Variables
+---
+
+During application development, managing state and user interactions effectively are crucial for creating a seamless user experience. This involves keeping track of various data points, filtering data based on the user, tracking user preferences, navigation history, and more. In this context, variables and page variables allow developers to store and manage variables within an application dynamically.
+
+## Setting Variables and Page Variables
+
+Setting variables and page variables can be done in two ways - through events or by using **Run JavaScript code** queries. 
+- To set variables through events, add a new event handler and select `Set variable` as the action. Under `Action Options` you can define the Key and Value of the variable. Similarly, for page variables you can use the `Set page variable` action. 
+- To set variable through `Run JavaScript code` query, use the `setVariable(key, value)` function. Use `setPageVariable(key, value)` function for page variables.
+
+## Example Use-Case for Page Variable:
+**Tracking the number of times a user visits a page:**
+- Create a `Run JavaScript code` query and enter the below code and name it *countVisits*:
+
+```js 
+function incrementPageVisit() {
+    if (!page.variables.visitCount) {
+        actions.setPageVariable('visitCount', 1);
+    } else {
+        actions.setPageVariable('visitCount', Number(page.variables.visitCount) + 1);
+    }
+}
+
+incrementPageVisit();
+```
+
+- Add a new page to your application named `Product Listing`.
+- Add an `Event Handler` on the newly created page, select `On page load` as the Event and `Run Query` as the Action. Under `Query`, select the *countVisits* query that we created in the previous step. 
+- Now, every time a user lands on the `Product Listing` page, the *CountVisits* query will run and the `visitCount` data will be updated.
+
+## Example Use-Case for Variables:
+**Preventing the appearance of loading state when the query data is loading:**
+
+You can prevent the appearance of any kind of loading state by filling the Table component with data using a variable. You can update this variable when the data update query runs successfully. 
+
+Below are the steps to achieve this when you are updating the data and don't want the Table component to display a loader.
+
+- Create two queries - *getData* and *updateData*
+
+- Add a `Query Success` event to the *getData* query and select the **setVariable** action to save the returned data in a variable (you will have to define the key and value for this, value will be the returned data i.e. queries.getData.data). Name the variable *loadedData*.
+
+- Enter `{{variables.loadedData}}` under the Table component's `Data` property.
+
+- In the *updateData* query, add two `Query Success` events. The first event should run the *getData* query and the second event should update the variable that you had created in the first step with the data returned by the *getData* query.
+
+Now, the Table will continue to display the data stored in *loadedData*. This prevents any loading indicators from appearing on the Table component when the data is being fetched or updated.

docs/versioned_docs/version-2.43.0/app-builder/import-export-apps.md

@@ -0,0 +1,46 @@
+---
+id: importing-exporting-applications
+title: Importing and Exporting Applications
+---
+
+This documentation explains the process of exporting and importing applications in ToolJet.
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## 1. Exporting Applications
+
+- Navigate to the dashboard.
+- Click on the settings icon located in the top right corner of the application.
+- Click on the **Export app** button.
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/import-export-apps/export-app-button-v2.png" alt="Export App Button" />
+</div>
+
+- If you select `Export All`, all the versions of the application will be exported in JSON format. If you select `Export selected version`, only the selected version will be exported in JSON format. 
+- Ticking the `Export ToolJet table schema` checkbox will also export the related ToolJet Database table schemas with your application. In this case, when you import the application in a workspace, the related ToolJet Database tables will also be created.
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/import-export-apps/export-options-v2.png" alt="Export App Options" />
+</div>
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## 2. Importing Applications
+
+- Navigate to the dashboard.
+- Click on the ellipses on the **Create new app** button and select `Import`.
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/import-export-apps/import-button-v2.png" alt="Import App Button" />
+</div>
+
+- After clicking on `Import`, choose the relevant JSON file that you previously downloaded during the application export process.
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/import-export-apps/select-app-to-import.png" alt="Select App To Import" />
+</div>
+
+</div>

docs/versioned_docs/version-2.43.0/app-builder/left-sidebar.md

@@ -0,0 +1,98 @@
+---
+id: left-sidebar
+title: Left-sidebar
+---
+
+Left-sidebar has the following options:
+
+- **[Pages](#pages)**
+- **[Inspector](#inspector)**
+- **[Debugger](#debugger)**
+- **[Global Settings](#global-settings)**
+- **[Comments](#comments)**
+- **[Theme switch](#theme-switch)**
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/leftnew.png" alt="App Builder: Left-sidebar"/>
+
+</div>
+
+## Pages
+
+Pages allows you to have multiple pages in a single application, making your ToolJet applications more robust and user-friendly.
+
+Check the detailed documentation for **[Pages](/docs/tutorial/pages)**.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/pagesnew.png" alt="App Builder: Left-sidebar"/>
+
+</div>
+
+## Inspector
+
+The Inspector can be used to inspect the data of the **queries**, properties and values of the **components** that are there on the canvas, ToolJet's global variables and the variables that have been set by the user.
+
+Check the detailed guide on **[using Inspector](/docs/how-to/use-inspector)**.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/inspectornew.png" alt="App Builder: Left-sidebar"/>
+
+</div>
+
+## Debugger
+
+Debugger records any errors that occur during the execution of queries. For instance, if a database query fails because the database is unavailable or if a REST API query fails due to an incorrect URL, the errors will be captured and shown in the debugger. Additionally, the debugger provides pertinent information associated with the error alongside the error message.
+
+If you wish to prevent the debugger from closing, you can simply click on the pin icon located in the top-right corner. By doing so, the debugger will stay open until you decide to unpin it. 
+
+To clear all the errors on the debugger, you can click on the `Clear` button.
+
+Debugger consists of two main sections:
+
+1. **All Log:** In this section, you can view a comprehensive list of all the logs generated during the execution of the application. These logs may include various types of messages, such as success messages, warning, and error messages.
+
+2. **Errors:** This section specifically focuses on displaying the error messages that occurred during the program's execution. These error messages indicate issues or problems that need attention, as they may lead to unexpected behaviors of the application. 
+
+## Global Settings
+
+To configure the app's global settings, click on the kebab menu(three vertical dots) on the left of the app name. Global settings include:
+
+- **Unique app slug**: The unique slug of the application. This slug is used in the URL of the application. By default, the slug is the `app id` of the application. You can change the slug to a custom value. For example, if the slug is `7b56293b-be5a-401f-8806-b71625f8ee0d` you can change it to `<unique-name>` then the new URL of the application will be `https://app.tooljet.com/<workspace-name>/apps/<unique-name>/`
+- **App link**: The link to the application. This link can be used to share the application with other users of the workspace. If you want to share the application with users outside the workspace, you can make the application public from the **[Share](/docs/app-builder/share)** modal.
+- **Hide header for launched apps**: Toggle this on to the hide the tooljet's header when the applications are launched
+- **Maintenance mode**: Toggle this on to put the application in maintenance mode. When in **maintenance mode**, on launching the app, the user will get an error message that **the app is under maintenance**.
+- **Max width of canvas**: Modify the width of the canvas in **px** or **%**. The default width is `1292` px.
+- **Canvas background**: Enter the hex color code or choose a color from the picker to change the background color of the canvas. You can also click on the **fx** to programmatically set the value.
+- **App mode**: Select between three theme modes - Auto (default, adapts to browser settings), Light (brighter interface for well-lit conditions), and Dark (reduces eye strain in low light). 
+- **Export app**: Click on the [Export app](/docs/dashboard/#export-app) button to export the application as a JSON file. You can import this JSON file in any other workspace to use the application.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/globalsettings-v2.png" alt="App Builder: Left-sidebar"/>
+
+</div>
+
+## Comments
+
+Comment anywhere on the canvas and collaborate with other users in the workspace. Click on the comments button to enable it and then drop comment anywhere on the canvas.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/commentnew.png" alt="App Builder: Left-sidebar"/>
+
+</div>
+
+## Theme Switch
+
+Use the theme switch button to toggle ToolJet between light and dark modes.
+
+While developers can access the current theme's value through global variables using `{{globals.theme.name}}`, it is not currently feasible to change the theme programmatically.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/theme.png" alt="App Builder: Left-sidebar"/>
+
+</div>

docs/versioned_docs/version-2.43.0/app-builder/overview.md

@@ -0,0 +1,15 @@
+---
+id: overview
+title: Overview
+---
+
+# App-Builder: Overview
+
+ToolJet's App Builder allows you to build applications. ToolJet's app builder has the following major components:
+
+- **[Topbar](/docs/app-builder/topbar)**: Configure app settings such as application name, layout, app environment, version management, Gitsync and much more.
+- **[Canvas](/docs/app-builder/canvas)**: Arrange and customize components to build the user interface of your app.
+- **[Left-sidebar](/docs/app-builder/left-sidebar)**: Manage [pages](/docs/tutorial/pages), [inspect](/docs/how-to/use-inspector) components, queries, or variables, and [debug](/docs/app-builder/left-sidebar#debugger) errors.
+- **[Components library](/docs/app-builder/components-library)**(right sidebar): Drag and drop components, modify their properties, and style them.
+- **[Query Panel](/docs/app-builder/query-panel)**: Create, edit, and manage queries from various **[datasources](/docs/data-sources/overview)**.
+- **[Preview](/docs/app-builder/preview)**: Preview your application.

docs/versioned_docs/version-2.43.0/app-builder/preview.md

@@ -0,0 +1,12 @@
+---
+id: preview
+title: Preview
+---
+
+You can preview your app by clicking on the `Preview` icon on the top-right of the App-Builder.
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/preview/preview-mode.png" alt="App In Preview Mode"/>
+</div>
+
+Once you are in preview mode, you can change preview settings to test the app in different settings. Change the version of the app and switch between different versions to see how they compare. You can also select **Mobile** or **Desktop** view to see how the components are displayed in different screen settings.

docs/versioned_docs/version-2.43.0/app-builder/query-panel.md

@@ -0,0 +1,218 @@
+---
+id: query-panel
+title: Query Panel
+---
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+The Query Panel, located at the bottom of the app-builder, allows you to create and manage queries to interact with connected **data sources**. It provides the capability to perform API requests, query **[databases](/docs/data-sources/overview)**, and apply **[transformations](/docs/tutorial/transformations)** or data manipulation using **[JavaScript](/docs/data-sources/run-js)** and **[Python](/docs/data-sources/run-py)**.
+
+The Query Panel consists of two sections:
+- The **[Query Manager](#query-manager)** on the right side, which displays a list of all the created queries.
+- The **[Query Editor](#query-editor)**, used to configure the selected query.
+
+<div style={{textAlign: 'center'}}>
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui3/qpanel.png" alt="Query Panel" />
+</div>
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+## Query Manager
+
+The Query Manager on the left lists all the queries that have been created in the application. Query Manager helps in managing the queries that have been created.
+
+<div style={{textAlign: 'center'}}>
+    <img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/query-panel-preview-v2.png" alt="Query Panel" />
+</div>
+
+
+The `+ Add` button on the Query Manager is used to add new queries in the application. When Add button is clicked, a menu will open with a list of options for creating a query from the available data sources.
+
+### Sort and Filter Queries
+On the top of Query Manager, there is button to Sort or Filter queries. The button allows you to select from the following options:
+
+**Filter:**
+- By Data source
+
+**Sort:**
+- Name: A-Z
+- Name: Z-A
+- Type: A-Z
+- Type: Z-A
+- Last modified: oldest first
+- Last modified: newest First
+
+Next to the filter is the search box that can be used to search for a specific query.
+
+### Edit, Copy and Delete Queries 
+
+On hovering on a query name, you can see the edit, copy and delete buttons. 
+The edit button lets you rename the query, the delete button lets you delete the selected query, and the duplicate button duplicates the selected query.
+
+</div>
+
+## Query Editor
+
+Query Editor provides the functionality to construct queries either through a low-code interface or by manually entering the query text.
+
+:::info
+The changes made in the query panel will be saved automatically.
+:::
+
+<div style={{textAlign: 'center'}}>
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui3/queryeditor.png" alt="Query Panel" />
+</div>
+
+
+<div style={{paddingTop: '24px', paddingBottom: '24px'}}>
+
+### Query Name
+
+Apart from the query editor, the query name is displayed at the top of the query panel. Click on it to make edits and customize the query name as needed.
+
+<div style={{textAlign: 'center'}}>
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui3/queryrename.gif" alt="Query Editor" />
+</div>
+
+</div>
+
+<div style={{paddingTop: '24px', paddingBottom: '24px'}}>
+
+### Custom Parameters
+
+Custom parameters provide a convenient method for passing variables to a query. To add parameters, simply click the **+** button next to the Parameters label in the top bar of the query editor.
+
+For each parameter, you need to specify:
+- **Name**: The identifier for the parameter.
+- **Default value**: This value can be a constant string, number, or object.
+
+**Syntax for utilizing the parameter:** Employ `parameters.<identifier>` in your query. It's important to note that parameters can only be utilized within the specific query where they are defined.
+
+Learn more about **[Using Custom Parameters](/docs/how-to/use-custom-parameters)**.
+
+<div style={{textAlign: 'center'}}>
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui3/queryparams.png" alt="Custom Parameters" />
+</div>
+
+</div>
+
+<div style={{paddingTop: '24px', paddingBottom: '24px'}}>
+
+### Preview
+
+The Preview button allows you to preview the data returned by the query. The data is displayed in the preview section at the bottom of the query panel, aiding in query debugging without triggering the query in the app.
+
+Data preview is available in two formats: **Raw** and **JSON**. Click the clear button to reset the preview data.
+
+<div style={{textAlign: 'center'}}>
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui2/preview.gif" alt="Query Editor" />
+</div>
+
+</div>
+
+<div style={{paddingTop: '24px', paddingBottom: '24px'}}>
+
+### Run
+
+The Run button triggers the query, causing it to interact with the application. This action differs from the `Preview` feature.
+
+<div style={{textAlign: 'center'}}>
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui2/run.gif" alt="Query Editor" />
+</div>
+
+</div>
+
+<div style={{paddingTop: '24px', paddingBottom: '24px'}}>
+
+### Query Configuration
+
+Query Configuration allows you to set vital values that are necessary to generate a response from a database. These configurations may include but are not limited to:
+
+- `Data source`: Name of the data source 
+- `Operation`: The kind of operation you want to perform (For e.g., `List collections`,`Find one`, `Find many`,etc.) 
+
+The set of configuration options you get depend on the type of data source. 
+
+<div style={{textAlign: 'center'}}>
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui2/params.png" alt="Query Editor" />
+</div>
+
+#### Data Source
+
+The primary and default parameter for all queries is **data source**. This option enables the selection of the appropriate data source for your query.
+
+In cases where multiple data sources of the same type are connected, easily switch the query's data source using the dropdown menu.
+
+<div style={{textAlign: 'center'}}>
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui2/switch.png" alt="Query Editor" />
+</div>
+
+</div>
+
+<div style={{paddingTop: '24px', paddingBottom: '24px'}}>
+
+### Transformation
+
+Queries can be enhanced with transformations to modify the query results. ToolJet supports transformations using two programming languages: JavaScript & Python. Refer to the detailed documentation on **[Transformations](/docs/tutorial/transformations)** for more information.
+
+<div style={{textAlign: 'center'}}>
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui2/transform.gif" alt="Query Editor" />
+</div>
+
+</div>
+
+<div style={{paddingTop: '24px', paddingBottom: '24px'}}>
+
+### Settings
+
+<div style={{textAlign: 'center'}}>
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui2/settings.png" alt="Query Editor" />
+</div>
+
+#### Run this query on application load?
+
+Enabling this option executes the query every time the app is loaded.
+
+#### Request confirmation before running the query?
+
+Enabling this option displays a confirmation modal, prompting for a `Yes` or `No` before firing the query.
+
+#### Show notification on success?
+
+Enabling this option shows a success toast notification when the query is successfully triggered. Customize the **success message** and **notification duration** in milliseconds.
+
+</div>
+
+<div style={{paddingTop: '24px', paddingBottom: '24px'}}>
+
+### Events
+
+Event handlers can be added to queries for the following events:
+
+- **Query Success**
+- **Query Failure**
+
+Event handlers link actions in your application for smoother operation. Here's an example:
+
+Scenario: You have two queries:
+
+- *getTodos*: Fetches your to-do list.
+- *deleteTodos*: Removes a to-do item.
+- Event Handler:  A Query Success event handler on deleteTodos that runs getTodos after a deletion.
+
+The Result:
+- User deletes a to-do.
+- The event handler refreshes the to-do list.
+- The component displaying the to-do data will be update with the lates data.
+
+:::info
+Learn more about [Event Handlers and Actions](/docs/widgets/overview#component-event-handlers).
+:::
+
+<div style={{textAlign: 'center'}}>
+    <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui2/events.png" alt="Query Editor" />
+</div>
+
+</div>