mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-27 08:27:23 +00:00
48f1a9f1df
* revamp quickstart guide and add topics to ToolJet concepts * add new guides using floik * add new items to tooljet concepts * update writing custom code concept * make UI enhancements and update the getting started guide * update tooljet concepts and add new topics * merge with dev and misc enhancements * create render * enhance formatting in access values concept * updates to quickstart guide and concepts * fix proofreading errords and update docs * revert versions and doc settings * add platform overview page and fix issues with floik demo sizing * add padding to badges and update workflows screenshot * add latest docs to the previous version * remove versions to preview on render * remove old getting started guide from next and 2.25 * add homepage slug
36 lines
1.6 KiB
Markdown
36 lines
1.6 KiB
Markdown
---
|
|
id: how-to-access-values
|
|
title: How to Access Values?
|
|
---
|
|
|
|
|
|
In ToolJet, double curly braces `{{}}` can be used to retrieve data returned by queries, access values related to components and pass custom code. You can see the list of all accessible values in the **[Inspector](/docs/how-to/use-inspector/)** tab in the left sidebar.
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
<img style={{padding: '10px'}} className="screenshot-full" src="/img/tooljet-concepts/writing-custom-code/inspector.png" alt="Check Available Values Using Inspector" />
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
|
|
|
### Accessing Values
|
|
|
|
The **queries** keyword can be used to access data returned by queries. For example:`{{queries.getSalesData.data}}`
|
|
|
|
Similarly, the **components** keyword can be used to access data in the components and other component-related variables. For example: `{{components.table1.selectedRow.id}}`.
|
|
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
|
|
|
### Writing Custom Code
|
|
|
|
You can write custom JavaScript code to set colors, enable or disable toggles and more by passing in JavaScript code inside double curly braces. To change Background Color of a button based on the light or dark theme using **fx** (next to properties in configuration panel), you can use a code that returns a string value of hex code. <br/>
|
|
|
|
For example, `{{globals.theme.name == "light" ? "#375FCF" : "#FFFFFF"}}`
|
|
|
|
Similary, to enable or disable a button based on user input using **fx**, you can write a JavaScript code that returns true or false. <br/>
|
|
|
|
For example, `{{components.form1.data.textinput1 == "" ? true : false}}`.
|
|
|
|
</div>
|