Fast & Efficient Podio App Searching

We all have some massive apps in our Podio setups that we need to use on a regular basis. Something like this:

Trying to find the specific item you're looking for can be a real pain. Podio's built-in search does not allow you to search a specific field and if you have to find items in such an app on a regular basis, you might find yourself dipping into your emotional support vodka before noon.

There is a better Way

What we really want, is a simple table where we can search on any field:

This is easily done using a ProcFu mini app with a Data Sync into your MySQL database.

If you don't already have MySQL connected to your ProcFu account - please read this first.

Step 1 - Podio App

The first thing we're going to do is just create a regular Podio-based mini app on this table.

For your start screen, select Podio as authentication, and click on the "+" to create the second screen:

For the main list screen, select the Podio app, and select all fields you want to show:

Step 2 - Convert to SQL

Now, click on the blue database icon next to the app name:

Our friendly helper, Prockie, will pop-up in the bottom right corner and offer to convert this to a SQL sync'ed screen for you:

Click on OK Sure and you'll be presented with a list of MySQL connections to create the sync in, or if you've already created a sync for this app, you'll be given that sync as an option.

After selecting the sync or the connection for a new one, Prockie will convert the screen to a SQL screen:

Now, if you save and launch this app, the experience is much faster, but searching is still limited to all fields, instead of individually by field:

Step 3 - Make Searchable

Back in the mini app editor, click on the blue table icon next to the table name of the screen:

This time, Prockie will offer to build filter for your table:

Click on OK Sure and the where and order by clauses will be replaced by tokens, and behaviours will added to the Before Process and On Render events:

(If you want to see the reference for the PfJs class, please refer to the docs).

Step 4 - Finishing Touches

To make the whole app full-width, add this to the footer of the screen:

<style>
/* make the whole screen wider */
.pfmcappwrapper { max-width: 96vw !important; }
</style>

It would look like this:

And lastly, to open the item in Podio when a row is clicked, add this to the end of the On Render code:

/* when a row is clicked, open the item in Podio in a new tab */
$("table.pftable tbody tr", target).off("click").on("click", function(){
	var id = $(this).attr("data-i");
	window.open("https://podio.com/x/y/item/"+id);
});

The full On Render code would look like this:

Result

If you now save and launch the app, you'll have a nice table view of your Podio app data:

And the best part is that you can not only search by individual fields, but super-fast, and still click through to the item in Podio.

Now just bookmark this app, and leave the emotional support vodka for after work 😆