Podio Quick Trick: Better App Navigation

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.

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.

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.

http://Podio.com/workspace/app/item/4#fieldid

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

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.

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";

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/my-test-company-y1mdn92ih7/reiflow-crm-v3/apps/properties/items/3

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";
a.link("https://podio.com/my-test-company-y1mdn92ih7/reiflow-crm-v3/apps/leads/item/3");

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.**

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.

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

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!