In this tutorial I’m going to expand on the Jump Link trick I showed you in a previous post. I discovered this trick because I was looking for a way to more easily find fields on a Podio App form that had a lot of fields. That trick lead me to create a navigation menu that consisted of Jump Links. Each one of those links would bring me to a section header (Create those here).
Here is an example of what I’m talking about…
Create Your First Jump Link
In this video I show you how to create your first jump link. If you had any trouble following my previous post that explained how to do this, here is a video.
Below is the calculation field formula you can use for creating your first Jump Link. One difference from the video above is that I created a variable to hold the url value. I found that when creating the full menu, it was easier to handle the different parts.
var text = 'Lead Data';
var url = 'https://podio.com/my-test-company-y1mdn92ih7/reiflow-crm-v3/apps/properties/items/';
detail.link(url + @Unique Id + '#lead-data') The Full Navigation Menu
Now that we have a single Jump Link created, the next step is to create the other Jump Links that we want for our Navigation Menu. This is basically an exercise in cutting and pasting. Though I do show you exactly where to find the Field Id (in the App’s Developer section).
Here is the Calculation field code that I used to create the Navigation Menu.
var detail = 'Details';
var workup = 'Workup';
var offer = 'Offers';
var contract = 'Contracts';
var deal = 'Deals';
var url = 'https://podio.com/my-test-company-y1mdn92ih7/reiflow-crm-v3/apps/properties/items/';
detail.link(url + @Unique Id + '#field')
+ ' | ' + workup.link(url + @Unique Id + '#field-2')
+ ' | ' + offer.link(url + @Unique Id + '#field-3')
+ ' | ' + contract.link(url + @Unique Id + '#field-4')
+ ' | ' + deal.link(url + @Unique Id + '#field-5');
There is nothing really tricky about this code. I couple of the things you might be wondering about are…
| + | concatenates to strings together |
| ‘ | Signifies the start/end of a string. |
| var | declares a variable where we will store the link text |
| variable.link(stuff) | .link() is the variable property that allows us to make it a link |
| | | This is just a Pipe character that I use to separate the links. You could use any character you like. |
| @Unique Id | The Podio token that gives us the Items Unique ID |
| #field-id | This is the fields external id |
| ; | signifies the end of a code statement. |
Final Thoughts
This was one of my favorite tricks that I’ve discovered so far with Podio. It’s simple but brings big improvements to in app navigation. One minor issue is that jump links only work if you are currently viewing the app. If you bookmark an url that contains the jump code at the end (http://…#field-id) it will not work for some reason. What you’ll get is a blank app page. I think this is just a bug in Podio, so maybe it will be fixed in the future.
Hopefully you have found this tip helpful. If you have any questions, please leave a comment below. I will answer them all.