Podio Quick Tip – App Section Headers

From it’s flexibility to it’s ease of use, there are a lot of great things about Podio. As a software developer it’s not all great…there are some issues I have with it. One of those issues is that there is no easy way to break up long App forms that contain a lot of fields.

One such example of this is a Property (or leads) App that could reach to 30 or more fields. Not being able to group those fields into sections makes information tough to find quickly. What we need is a Podio App Section Header!

Below is an example of my Property Details App form. There are a total of 52 fields! Do me a favor and try and find the field What is your asking price?.  It takes me a minute even though I know it’s some where in the middle of the form. 

Like I said before, Podio does not have a method for grouping your fields. Sure you could break each section into different Apps but that would be a PITA for sure. My solution is much simpler.

The idea is to re-purpose one of the Podio predefined field types to create a line break (or even just a gap). There are really only 2 field types (Category and Calculation) fields that can be used.

My first attempt was to use a category field. My goal was to create a gap between groups in order to visually break up the different sections of the form.

The setup for this is very easy…

1. Drag a Category field to a spot in-between two of your groups
2. Add a Label that describes the group below it
3. Remove all Category Items

In the template editor what you should have is something like in the image below.

After saving the template, here is what you will get. Notice how you see the extra white space between the sections.

While this solution is simple and does provide a visual gap between sections, I find it kind of ugly and only marginally effective. Additionally, since this is a category field, Podio will also auto-create a filter item along the left side. Only a minor annoyance and you can delete it, but it is useless.

My next attempt was to use a calculation field. Since you can output text in a calculation field I felt it could be the solution I was looking for. I’ll go through this one step at a time because there are a few things to consider.

1. Add the Calculation Field

Put this field where you want your group section to start.

2. Add the text you want to use for the heading

Any text that you out put in a calculation field must be surrounded by double quotes (“).

"— Group Property Details —"

Now if you went to save this right now you would get an error telling you that The calculation field must reference at least one other field.  It cannot be entirely based on static data, such as strings or numbers.

To get around this minor annoyance you can just add in a dummy variable and assign it a value from one of the existing fields.

var a = @Address

"— Group Property Details —"

Now you’ll be able to save and you’ll get something that looks like the below image.

That is much better then the category field example above, but I still think it looks terrible.

3. Add Formatting

We are in luck, because the calculation field supports something called markdown syntax. This means we can do some formatting and make it look nice.

The Heading

Let’s start off by making the group heading text actually a heading. We can do this using Markdown Syntax by putting a single pound sign (#) before the text like so…

var a = @Address

"# Group Property Details"

I decided to take out the dashes before and after the heading because I thought it looked better. The text will now be bold and slight larger then the rest of the text. Here is what this now looks like…

Horizontal Line

The next thing i’d like to add is a horizontal line to create even more of a visual cue that a new section is starting here. We can do that by adding a new line (“\n”) and also three dashes (“---”). Let me show you…

var a = @Address

"# Group Property Details"
+ "\n ---"

I’ll cover this a bit later, but the + sign is used to concatenate two strings of text. I could have put this all on one line (“# Contacts \n ---”) but it is much easier to read if I break up the different parts of the string.

Group Description

The last part that I like to add to my section headers is a short description.  It says what the group is but also serves to help catch your eye even more as you scroll through the form.

To do this we add another line break (“\n”) and then the text.

var a = @Address

"# Group Property Details"
+ "\n"
+ "---"
+ "\n"
+ "The **Group Property Details** section is where you can add add information about the property."

That is pretty much it. If you noticed i surrounded the phrase Group Property Details with ** and **. In markdown these characters will make the phrase bold. So here is how this will look…

Now this I like!

One thing that I didn’t mention is that you need to have a value in the Calculation field label on the left side. You can use what ever you want, I chose to use a ‘>’ symbol.

Here is a look at what my entire form looks like with the calculation field section groups inserted. Do you think it looks better?

You can use Markdown in any Podio field that displays text and doesn’t have the formatting toolbar.  So basically you can use them in Comments and Calculation Fields.

Headers

There isn’t much noticeable difference between the different levels of headings in Podio.  The Header 1 (#) works best in my opinion.

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

Links

Use this to insert links into your headings.  For instance, you can put a link to the Tax Assessor’s website in the heading.  This way you can just click the link to quickly go there to grab the properties tax info.

[example link](http://example.com/)

Underlines

These create a full width underline.  3 or more or each will get you a line.

---  dashes
*** asterisks
___ underscores

Emphasis

*Emphasis*  = Emphasis
_Emphasis_ = Emphasis
**Emphasis** = Emphasis
__Emphasis__ = Emphasis
**__Emphasis__** = Emphasis
~~Emphasis~~ = Emphasis

More…

If you want to see what else you can do, go over to this cheat sheet 

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

 

This solution isn’t perfect however or I’m sure Podio would call it a feature and have a write up about it. Calculation fields by nature only run their calculations after there is data in the fields…in other words, after an item has been created.

What this means is that when we are adding a new item the section group headings will not show. What you see is a “—” value. This means there is no value.

To me…I don’t think this is a big deal. Generally when I’m adding a new item I’m going through each field one by one. So when I’m done, I save the record and close out. When I go back in the section group headings are now there.