How to Highlight Current Page

Explore

How to Highlight Current Page
How to Highlight Current Page

Tips : a Dynamic syncblock-like Navigation Bar for your document across pages! Nice. I did something similar here. How to Create Cool Nav Buttons · Navigation Buttons (coda.io) community.coda.io⁠

⁠

Common nav Coda doc by Paul Danyliuk coda.io⁠

⁠

Check out this Coda Community Post.

In it, which

Quentin_Morel⁠

showcases how to create a dynamic navigation bar, full of wonderful insights.

In that same thread, Community Champion

Paul_Danyliuk⁠

added crucial advise on how to implement the highlighting of the current page.

⁠

Paul_Danyliuk⁠

created a sample document, in which he showcased his approach, which you can find here

The doc you’re reading right now merely “translates”

Paul_Danyliuk⁠

demo into a step-by-step user guide on how to implement his trick. I have slightly adjusted the formulas that

Paul_Danyliuk⁠

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

Quentin_Morel⁠

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

⁠

Hyperlink(thisRow.Name.ToText()⁠

)

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

NavigationTable

Name

Page link

Go to Page

Btn unsel

Btn sel

⁠

Page 1

⁠

/_suoFc

Go to Page

⁠

Page 1

⁠

Page 1

⁠

Page 2

⁠

/_suusJ

Go to Page

⁠

Page 2

⁠

Page 2

⁠

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

emptycharacters.com⁠

, and pressing the button for “Copy to Clipboard”

⁠

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)

⁠

⁠⁠ Page 1 ⁠ ⁠ ⁠⁠ Page 2 ⁠ ⁠ ⁠

⁠

‎

⁠

(Do make sure to copy and paste BOTH elements, as per this screenshot

⁠

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.

How to Highlight Current PageHow to Highlight Current Page

How to Highlight Current Page
How to Highlight Current Page