mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-22 22:17:55 +00:00
63 lines
3.2 KiB
Markdown
63 lines
3.2 KiB
Markdown
|
---
|
||
|
|
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.
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
### 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.
|
||
|
|
|