Skip to main content

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 properties 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.