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
1.9 KiB
| id | title |
|---|---|
| using-fx | Using the FX Functionality |
Clicking on the fx symbol in ToolJet opens up a code editor that allows you to write custom JavaScript expressions. You can find fx in the configuration panel on the right, next to various properties and settings of a component.
With fx, you can perform calculations or set conditional logic to dynamically configure the components without leaving the ToolJet interface. It's an invaluable tool for adding complexity and interactivity to your applications.
Toggle Button
When using fx buttons associated with toggle buttons, the expected output of the code you enter should be a boolean value - true or false. For example, the below code will check whether the entered age entered in the number input field of the form is above 18, the button component will be enabled or disabled based on it.
{{components.form1.data.numberinput1.value>18? false : true}}
For other cases, the expected value is a string. For example, If you are setting Text color, Background Color, Loader Color, etc. You need to pass in a JavaScript code that returns a hex code as a string.
Access all Variables, Queries, and Components
The expressions you write in the code editor available after clicking on fx lets you access all the variables, queries, and components within your application. This allows you to create intricate relationships between different parts of your app, making it more responsive and user-friendly.