Skip to content
[template] Map application - Visualize geo clustering & heatmaps

How to... in Coda

1. Beginner
Definitions tables
Create a new "Def::Tables section" for all key definitions. Useful for lookup values in your tables such as categories.
1. Beginner
Definitions folder: to group and hide all app mechanics
Create a to house all key document definitions tables.
In my case I have two additional definition tables for colors, and for gradient patterns.
1. Beginner
Cell "Bubble formatting": with colors
In the table, the maps and geo columns are each formatted different colors, helping to easily see that green geos are part of the world map.
I love this awesome new bubble formatting feature:
Create a conditional formatting color scheme in the definition table (image 2).
When you create "lookup" column format in a separate table, it will style the object "bubbles" with the same color scheme as your conditional format
1. Beginner
Code Block text formatting
Really useful for showing code snippets within your text fields.
I used it to style the SVG code formats in my table
1. Beginner
Clearly delineate all formula columns with naming convention plus conditional formatting
When your users interact with your app, or when you're using columns in your tables for formula etc, it's helpful to be able to spot at a glance which columns are formula-driven, and which ones take manual input.
Column naming convention:
For easier formula reference, I use the convention of adding underscore "_" to the start of the name.
For user visibility: I also add "(ƒ)" to the end of the title

Conditional formatting (see image 2):
Create a new custom format using the "display" column
Leave "contains" field blank
Select the drowdown for which columns to format, and select all the formula ones (conveniently, they all have _underscore)
1. Beginner
Create interactive dropdown and checkbox controls
Make your docs interactive with these easy steps:
Easily add a range of controls by hitting "/" anywhere in a doc section → then add a "SELECT" or "MULTIPLE SELECT" dropdown or a checkbox (or date range, etc)
Right click on the new control, and change the name to something logical, ideally witha prefix so you can easily search for it (e.g. chk_show_labels or slt_gradient)
No reference the new name you created in any formula, be it in the doc itself, in a table column, or in a table column filter formula

1. Beginner
Simple interactive table filters
Easily create interactive filters (dropdown selections, checkboxes, etc) by:
Right click the column you want to filter → "+ interactive fitler" (see image 2)
I like to add a text header: "Filter:", then I like to format the filter row using "Block quote" so that it clearly stands out visually
2. Intermediate
Colored square → in dropdown lists

Start with a color definition table:
Use the following formula to create a colored rectangle:
_Color(thisRow.[Hex value], "■")," ",
thisRow.Category, " ",
thisRow.[Color text])
To use it in a select list, change the column formatting to "Select list" → add a custom list → and add the formula:
= [def:Colors].[Display column]
2. Intermediate
Visual Gradient dropdown selection with colors
To create a visual dropdown selector with the image (in this case the color gradient), you:
Create an image column (in my case gradient) in the lookup table that you refer to later
Create a Selector Component → Give it a usable name: "slt_gradient"
Now in the body of your section, simply hit "=", then add the formula: slt_Gradient.Display_GRADIENT to refer to the image column
2. Intermediate
Create and use formula variables in a table row, with separate named columns.
Create model assumptions in a table.
Create a new table - e.g.
Add a row with a logic name, and give it a title (in the table display column) - e.g. World_config
Add new columns with the variable names you need for your application
Whenever you need them in your formula / app, you simply type "@", then the row name (world_config), which should autocomplete. Then type "." and find the column name that you want as a variable
2. Intermediate
FORMAT formula - to create programmatic formatted text.
Fantastic formula to create programmatic text output using variables. This is how I create programmatic text content, that gets turned into images via Coda's SVG rendering.
Start with a text "template" (the first formula input). Here's what I used to great the SVG image text.
<rect x="{1}" y="{2}" width="{3}" height="{4}" fill="{5}" />
The subsequent variables in the format formula get substituted into the text template, replacing the values "{X}" in numerical order

2. Intermediate
CONCATENATE formula - Used to join multiple fields together in a single output
Concatenate lets you take multiple inputs (for instance, a number of filtered rows from a table) and combine them into a single text field.
I use Concatenate to combine the SVG markup text from multiple rows, into a single compiled SVG blob:
[TableName].filter([some condition]).[Column name].Concatenate()

2. Intermediate
Create a programmatic contrast text color - for text overlaid on a colored object
This nifty formula takes a hex color, and creates an appropriate contrast text color, so that if you're programmatically changing the color of any object, the text will always be legible.
(([HexColor].middle(2,2).ToNumber(16) * 299)
+ ([HexColor].middle(4,2).ToNumber(16) * 587)
+ ([HexColor].middle(6,2).ToNumber(16) * 114))
/ 1000 > [Contrast_Threshold_Variable], "[Dark_Color_Hex]","[Light_Color_hex]")
3. Advanced
Create programmatic custom color gradients
Create custom programmatic color gradients.
You can find the logic and formulas in the table.
ALL CREDIT TO CREDIT: who created this approach at
3. Advanced
Measure & Debug inefficient formula
While building this sheet, I had some trouble with formula that were written poorly, resulting in a very slow app.
Luckily the Coda team thought of that - you can find the somewhat hidden "Debug calculations" feature::
"Gear" settings menu → Document Map → "3 dot" menu at the top right of the slide-out screen → "Debug calculations". See image 1
Then hit "Start measuring", and change things in your doc. It will show you how long each formula takes in the doc, letting you find inefficiency. See image 2

3. Advanced
Disable calculations, so you can restore a previous. version
If you create a doc that freezes and becomes non-functional - because your formula or very bad, or very circular - You can "disable calculations", which will let you then go to "Version history" (image 2) and pick an earlier version of your doc that worked.
Two ways you can disable calculations:
Add "?nocalc=true&disableAsync=true#_lumdR" to the doc URL, and reload in a new tab
Hacky: Open the Debug Calculation side bar. Now copy the URL, close the old tab, and open the copied URL in a new tab. The second coda renders, and the "Start measuring" button becomes available, click it QUICKLY. If you caught it before the doc fully loads and start calculating, it will start measuring the time of your formula. And after about 30 seconds, a "disable calculations" red link will appear (Image 1).
3. Advanced
Render SVG image (from programmatically created text)
Coda can render SVG-formatted text as an image, allowing you to add any kind of visualization to your app.
Image( Concatenate("data:image/svg+xml,", [Composed SVG]))

To create the Composed SVG, you create SVG formatted markup code ().
You can create it using the technique laid out here:
@FORMAT formula - to create programmatic formatted text.
<svg width="{2}" height="{3}"
viewBox="0, 0, {2}, {3}"
{1} <!-- SVG BODY -->
Now you can render the image you've created anywhere in your doc you want (including in a column in a table), using formula above
There are no rows in this table


Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
) instead.