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 - Authentication

For your start screen, select Podio as authentication. No other options need to be set.

Step 2 - MySQL

Under the main menu, select Data Syncs (this gets you to https://procfu.com/syncs/)

Click on the “Create New Sync” button.

Choose your app in Podio and the SQL connection you set up earlier.

Then hit “Save”.

Depending on how many items you have in your app, it may take a while for the sync to complete, but you can continue building your app in the mean time.

Step 3 - Synced SQL App

For the main list screen, select the synced copy of your Podio app as the source, and select all fields you want to show:

Also include a WHERE clause of is_deleted=0 to eliminate deleted items since ProcFu’s data syncs only do soft deletes.

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 4 - Make Searchable

Back in the mini app editor, change the WHERE clause to:

`is_deleted`=0 AND @[pf_custom:sqlsrch]

And change the ORDER BY to:

@[pf_custom:sqlordr]

This basically adds anything in the sqlsrch custom token to the where clause, and orders the results by what’s in the sqlordr token at run-time.

In Before Process, add:

custom_tokens.sqlsrch = json_to_sql_where_pf(url_parameters.sqlsrch)
custom_tokens.sqlordr = col_to_sql_order_by_pf(url_parameters.sqlordr, "`item_id` DESC")

And in On Render, add:

PfJs.sqlSearchTable(target, "item_id");

This is using some helper JS to take anything in URL called sqlsrch and convert it to a proper SQL WHERE clause, and anything in the URL called sqlordr and convert it to a proper SQL ORDER BY clause.

The PfJs.sqlSearchTable call dynamically adds the column headers to the table.

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

Step 5 - 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>

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 😆