Podio Quick Trick: Better App Navigation

Scott CostelloAll, Blog, Featured

From the first time using Podio I noticed that the navigation from App to App, Item to Item is not very intuitive. That also goes for moving about in a long app form. In a prior blog post, I showed you how to create section headers using the calculations fields. While that tip helped break up the form, it still would be nice to be able to more quickly get to a section you want.

In this post, I’m going to show you exactly how to do that. It uses a little HTML, but if you have ever created a hyperlink then you will have no problems at all.

Jump Links Explained

I’m not quite sure what these types of links are called, I’ve seen them referred to as in-page links or bookmark links. I like to call them Jump Links. Basically because they are used to jump to a specific section on a page.

The way it works is that every element (label, headline, paragraph) on a webpage can be identified by an ID or NAME attribute.  If you look at the actually html for a headline they will look like this..

<h2 id="headline1">Headline Text</h2>

The part that says id=”headline1″ is the ID attribute, with headline1 being the value. Every field in Podio contains an ID tag just like this. So you can create Jump Links to any field you want.

The Link Structure

Now that you understand how to identify your target, we need to setup the link. But before we get into the HTML and subsequently the Podio Calculation field, I want to show you a quick way to test this out.

Basically you just append to the end of the webpage address a # sign PLUS the ID of the field you want to jump too.


Take a look at the video below to see a demonstration of me doing exactly this.

Podio Calculation Field Jump Link

Now that you understand the basics of how a Jump Link works, I want to show you how to create those links in a Podio Calculation Field. It is not that hard, but there are a few parts to understand.

Link Text What will be displayed in the Calculation Field
App Url The web address of the App
Unique ID: The Id token of the App Item
Field ID What field we want to jump to

The Unique ID and Field Id elements are necessary in order to make the jump link unique to each item and field.  You will see how they play in a second.

So again the structure of the jump link will be something like this…

http://{app url}/{item unique id}#{field id}

You are probably wondering…How do you figure out what each element should be? Great question! Let me show you

Link Text

The Link Text is simply that. It is the text that you want to display for the link. In the calculation field, I like to store the Text in a variable. This has a few advantages in that it helps you keep things organized. In addition the variable has properties that you can easily use to create a link.

var myLink = "Click Here";
var declares that the variable name is coming next
myLink is the variable
= says i’m setting the variable to what is coming next
Click Here is the text that i’m assigning to the variable
; Tells the calculation field that it’s the end of the line of code.

App Item Url

The App Item Url is the web address of an App Item. If you navigate to an app, then click into one of the Items, you can see the App Item Url in your web browsers address area.

The easiest thing to do is go to one of your app items and just highlight and copy this web address. This is mine…

https://podio.com The base url for all things podio. Will always be https://podio.com
/my-test-company-y1mdn92ih7 Your Organization Name plus some unique characters that i’m not sure what they are.
/reiflow-crm-v3 Your Workspace (any spaces replaced with dashes)
/apps This just signifies that the next section will be an App name. Will always be apps
/properties Your App Name (any spaces replaced with dashes)
/items This just signifies that the next section will be your item id. Will always be items
/3 This is the Unique ID for the App Item you are viewing.

Now taking this into a Podio Calculation field, we would assign this link to the variable we created in the previous section using the variable’s Link() property.

var a = "Click Here";

Unique Id

Lucky for us, Podio provides us with a token for this Id….@Unique ID

The Unique Id is the identification number that is given to the Item when you first create it in an app. It is a sequential number starting at 1. This Unique ID is App specific, meaning that every app will have an item with a Unique ID of 1, 2, 3 etc.

Like I showed you in the previous section about the App Item Url, the Unique ID is in the last section of the url…

https://podio.com/my-test-company-y1mdn92ih7/reiflow-crm-v3/apps/leads/items/3 <= Unique ID

Lucky for us, Podio provides us with a token for this Id….@Unique ID

Let’s take this to a podio calculation field now..

var a = "Click Here";
a.link("https://podio.com/my-test-company-y1mdn92ih7/reiflow-crm-v3/apps/leads/items/" + @Unique ID);

What I did here was remove the “3” at the end of the url. This 3 was the hard coded Unique ID. I then added on the Podio Token for the Unique Id…@Unique ID.

One other thing to notice is that the link() property expects a string. This just means we have to surround the url with double quotes (“{url}”).

Field Id

Lastly we have the Field Id. Each field in an app has a Field Id given to it called the External_Id. This ID is based off the label you give to the field.

The label I’ve given to this field is Motivation Level. So the Field ID will be motivation-level.

Notice that spaces are replaced with dashes (-). Additionally it is in all lower case.

A few things to note…

  1. The Field Id is assigned to the field based off what you Initially gave to the field.  If you go back and change the label, the Field Id will still be what it originally was.  Meaning…If I change the label for my Motivation Level field to “Level of Motivation”, the Field Id will still be motivation-level.
  2. Podio does provide you with a place where you can see exactly what all the Field Ids (external ids) are for an app.  To find it you go into your App , click on the wrench.  Then select Developer…

    Then scroll down and you’ll see the App Fields section. What we are looking for is the External Id value for the field.

Now all we have to do is take that Field Id (External Id) and tack it onto the end of our link. We can do that like this…

var a = "Click Here";
a.link("https://podio.com/my-test-company-y1mdn92ih7/reiflow-crm-v3/apps/leads/items/" + @Unique ID + "#motivation-level");

THAT IS IT! You can now go test out your Jump Link.

** Please Note…If you cut and paste any of my code here, you will have to make sure and retype in the @Unique ID token. Podio does not allow you to paste those in.**

Final Points

Being able to quickly jump down to a section of my Podio App forms has gone a long way in improving the Podio experience. I recommend putting any jump links in the second field on your form. If you put them first, they will come through as the item description in any relationship field. Just looks ugly.

Share this Post

What’s Next?

Take a look at the bonus tutorial below to take this trick to the next level!

Bonus Tutorial: Create a Full Navigation Menu

One of the cool things you can use Jump Links for is creating a full Navigation Menu. In the animation at the top of this post you can see how I implemented this. It’s really pretty simple!

I put together a short tutorial on how exactly to do this. Click the button below to go through the tutorial and create one yourself!

Go to the FREE Tutorial!
Scott Costello
Follow me