Merge pull request #9141 from ToolJet/release/database-1.1

Release: Database 1.1 + Community (v2.43.0)

.version

@@ -1 +1 @@
-2.42.0
+2.43.0

docs/docs/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/docs/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/docs/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.