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

How to... in Coda

Search
Difficuty
Tool
Image
Description
1
1. Beginner
Definitions tables
image.png
Create a new "Def::Tables section" for all key definitions. Useful for lookup values in your tables such as categories.
2
1. Beginner
Definitions folder: to group and hide all app mechanics
image.png
Create a to house all key document definitions tables.
In my case I have two additional definition tables for colors, and for gradient patterns.
3
1. Beginner
Cell "Bubble formatting": with colors
image.png
image.png
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
4
1. Beginner
Code Block text formatting
image.png
image.png
Really useful for showing code snippets within your text fields.
I used it to style the SVG code formats in my table
5
1. Beginner
Clearly delineate all formula columns with naming convention plus conditional formatting
image.png
image.png
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)
6
1. Beginner
Create interactive dropdown and checkbox controls
image.png
image.png
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

7
1. Beginner
Simple interactive table filters
image.png
image.png
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
8
2. Intermediate
Colored square → in dropdown lists

image.png
image.png
Start with a color definition table:
Use the following formula to create a colored rectangle:
Concatenate(
_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]
9
2. Intermediate
Visual Gradient dropdown selection with colors
image.png
image.png
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
10
2. Intermediate
Create and use formula variables in a table row, with separate named columns.
image.png
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
11
2. Intermediate
FORMAT formula - to create programmatic formatted text.
image.png
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

12
2. Intermediate
CONCATENATE formula - Used to join multiple fields together in a single output
image.png
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()

13
2. Intermediate
Create a programmatic contrast text color - for text overlaid on a colored object
image.png
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.
if(
(([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]")
14
3. Advanced
Create programmatic custom color gradients
image.png
Create custom programmatic color gradients.
You can find the logic and formulas in the table.
ALL CREDIT TO CREDIT: who created this approach at
15
3. Advanced
Measure & Debug inefficient formula
image.png
image.png
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

16
3. Advanced
Disable calculations, so you can restore a previous. version
image.png
image.png
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).
17
3. Advanced
Render SVG image (from programmatically created text)
image.png
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 TEMPLATE - ROOT -->
<svg width="{2}" height="{3}"
viewBox="0, 0, {2}, {3}"
xmlns="http://www.w3.org/2000/svg">
{1} <!-- SVG BODY -->
</svg>
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
17
Count




/

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