In this article
Canvas Switch changes visuals based on data, offering conditional formatting and toggling. Enhance tiles with data-responsive customizations.
Introduction to the Canvas Switch
The canvas switch allows you to dynamically change text and images on the canvas based on specific values. This feature enables a high degree of customization and adaptability, allowing for visual elements to be altered in response to data changes, without the need for complex coding or configuration. Features of the switch include the following:
Conditional Formatting: Change colors, fonts, padding, background, borders, and navigation based on conditional logic.
Self-Referencing Values: Apply conditions to values that reference their own state, enabling dynamic visual feedback.
Toggle Switch: Activate or deactivate switches without losing configuration, allowing for temporary changes or testing.
Adding a Switch to a Value Tile
Click the value tile you want add a switch to.
In the Value Tile Settings, click the + icon next to "Switch".
Click the + New Condition button.
Define the condition by selecting a value using the "When" drop-down, and then entering a number in the threshold field.
Apply customization using the "Format", "Alignment", "Padding", "Background", "Border" and "Navigation" options. This setup mirrors what is offered in Value Settings.
-
Preview the switch by clicking the back arrow. You can make changes to the switch by clicking the settings icon. To remove the switch from the value tile, click the trashcan icon. To copy a switch, right click on it in the canvas and select "Copy switch.
Tip: Navigate between conditions using the "Previous" and "Next" arrows within the condition setup page.
Note
A value tile switch is only ever based on the value of that same tile, so unlike text and image tile switches, the selection of a value is not required for switches added to value tiles.
(Optional): Click the + New Condition button to continue adding conditions to the switch. Clicking this button opens the new condition setup.
Value Tile: Example Switch
In the example below, the font color of the value tile will change to green when it is greater than 7.
Adding a Switch to a Text Tile
Note
You must first add a value to the canvas before adding a switch to the text tile. Ensure that values are properly labeled so they are easy to find when using them in a switch later.
Click the text tile you want add a switch to.
In the Text Tile Settings, click the + icon next to "Switch".
Using the "Value Tile" drop-down, select a previously added value from the canvas. This can be changed later.
Click the Done button.
Define the condition by selecting a value from the "When" drop-down, and then entering a number in the threshold field.
Using the "Content" field, enter the new text that you want to replace the existing text when the switch condition is met.
Apply customization using the "Format", "Alignment", "Padding", "Background", "Border" and "Navigation" options.
Preview the switch by clicking the back arrow. You can change the associated value by using the "Value Tile" drop-down, and make further changes to the switch by clicking the settings icon. To remove the switch from the text tile, click the trashcan icon.
(Optional): Click the + New Condition button to continue adding conditions to the switch. Clicking this button opens the new condition setup.
Text Tile: Example Switch
In the example below, the text tile will change to "New Text" and the color will change to green when the linked value is greater than 7.
Adding a Switch to an Image Tile
Note
You must first add a value to the canvas before adding a switch to the text tile. Ensure values are properly labeled so they are easy to find when using them in a Switch later on.
Click the image tile you want add a switch to.
In the Image Tile Settings, click the + icon next to "Switch".
Using the "Value Tile" drop-down, select a previously added value from the canvas. This can be changed later.
Click the Done button.
Define the condition by selecting a value from the "When" drop-down, and then entering a number in the threshold field.
Using the "Image URL" field or File library, select the new image that you want to replace the existing image when the switch condition is met.
Apply customization using the "Padding", "Background", "Border" and "Navigation" options.
Preview the switch by clicking the back arrow. You can change the associated value by using the "Value Tile" drop-down, and make further changes to the switch by clicking the settings icon. To remove the switch from the image tile, click the trashcan icon.
(Optional): Click the + New Condition button to continue adding conditions to the switch. Clicking this button opens the new condition setup.
Image Tile: Example Switch
In the example below, the image tile will change from an image of a red circle to an image of a green circle when the linked value is greater than 7.