Skip to content
Gallery
How to Highlight Current Page
Share
Explore

icon picker
How to Highlight Current Page



Check out this Coda Community Post.
In it, which showcases how to create a dynamic navigation bar, full of wonderful insights.
In that same thread, Community Champion added crucial advise on how to implement the highlighting of the current page.
created a sample document, in which he showcased his approach, which you can find here
The doc you’re reading right now merely “translates” demo into a step-by-step user guide on how to implement his trick. I have slightly adjusted the formulas that in order to emphasize the particular set-up of this trick.
Create a Table, titled “Navigation”. Populate it with the following columns:
“Name”, type Text
here, manually refer to each page within your doc.
(This can be automated with the Doc Explorer pack, as outlined by in the above cited community post). For now, our focus does not lie on automating the task but understanding the process.
“Page Link”, type formula
This retrieves each page’s, can you guess it, link and converts it to text.
“Go to page”, type Button
button action: OpenWindow(thisRow.[Page link])
“Button Unselected”, type formula
ie this is how the current page will be displayed in the navigation pane, if the user is NOT currently on this page
Create a button using the formula, ie ​Button(thisRow.[Go to Page], thisRow.Name, alertType: "None")
“Button Selected”, type formula
ie this is how the current page will be displayed in the navigation pane, if the user IS currently on this page
Create a button using the formula, ie ​Button(thisRow.[Go to Page], thisRow.Name, color: "Yellow", alertType: "None")
NavigationTable
Name
Page link
Go to Page
Btn unsel
Btn sel
1
/_suoFc
Go to Page
2
/_suusJ
Go to Page
There are no rows in this table
Create a “Navigation Bar”, which you will then copy and paste to each page of the doc
Create a NamedFormula, titled ThisPage. (Coloring used for Emphasis only). Set it to formula:
“” (That’s right, the formula is two quotes) Now, if we would stop here, the formula would be displayed like this:
[ ]
These empty brackets would mess up our doc’s looks, so instead, we are looking for a way to show a blank grey area for this NamedFormula. We achieve this by heeding Paul D’s advice and heading over to , and pressing the button for “Copy to Clipboard”
image.png
Then, we head over to our Canvas NamedFormula, type in the beginning quote “, paste in our selection (ie Ctrl+v) and type in our ending quote “. Give a name to your NamedFormula and it will now no longer display empty brackets, but solely blank space. Before:
[ ]
After:
Create a Named Formula, titled it eg “Navigation”. Set it to this formula:
NavigationTable.ForEach( If( ThisPage.ObjectLink().ToText().Right(5) = CurrentValue.[Page link].ToText().Right(5), CurrentValue.[Btn sel], CurrentValue.[Btn unsel] ) ).Concatenate() ​
Explanation of the formula used:
This Formula looks to the Table Navigation, and then, for each row within said Table, it checks
Let’s look at the last 5 characters of the Page Link.
Are they the same as the last 5 Character of an object residing on this very page? (ie, converting the empty NamedFormula ThisPage into an objectlink.totext() and then retrieving the last 5 characters)?
If they are a match (meaning if the Page Link matches that particular page’s Object’s Objectlink), then display this particular page as the selected button (ie in yellow).
If they are not a match, then display this particular page as the unselected button (ie in our case, without any color assigned).
Explanation of the process applied:
The NamedFormula ThisPage is empty, ie it contains no information to display. But it IS an object residing on a page. Therefore, if we use it in the formula ThisPage.ObjectLink() it will return the page on which the object resides.
Hence, if we copy and paste this Navigation Bar to each page of the doc, the NamedFormula will duplicate, (ie it will be called ThisPage 2 on the second page, ThisPage 3 on the third page, etc.
The NamedFormula “Navigation” will make sure to display the customized button (in our case, with the color yellow) whenever a certain page’s Object Link EQUALS the Object Link of the “empty” NamedFormula on the same page.
Hence, this approach does not parse any data from the URL-parameters. The way I think of it is that it does not retrieve on which page the user currently resides. Rather, it will show at all times on each page that particular button in color, where the page’s objectlink equals the ThisPage-NamedFormula’s object link. (TL;DR: The Navigation Bar on Page 2 will always show the Button for Page 2 highlighted in yellow, REGARDLESS of whether the user is currently perusing Page 1 or Page 2 or Page 3. BUT, much like a wood that makes no sound if it falls and no one is around to hear it (or does it?!), no one will see the yellow button unless they are ON that page.

This is the resulting Navigation bar (which you’ll copy and paste on each page)
(Do make sure to copy and paste BOTH elements, as per this screenshot ​
image.png
If you’re wondering why no button shows up in yellow above: It’s because the page “Navigation Table” is not present in the Table “NavigationTable”.


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.