Pushing Podio
Search

Display a Podio View on your Website

Showing Podio data on a website is a common requirement. With the new $PFUI class in ProcFu it couldn’t get any easier to allow your website visitors to interact with Podio data.

Demo

Here’s a live demo of this in action .

The Data

For this post, we’re using an app in Podio that has the data we wish to display in a view.

All we need is the app_id and the view_id from Podio.

Simple Table

To embed a view can be done with just 2 lines of code. Yes! TWO lines only.

Simply create a custom code block in ProcFu and configure an HTML widget for that code block, and use the following code:

$PFUI->table(["type"=>"view", "app_id"=>12345, "view_id"=>23456, "fields"=>["title", "status", "price"]]);
$PFUI->render();

Note: you’ll need to substitute your own app_id, view_id, and field list. The field list is actually optional, but Podio often returns fields not defined in the view, so it’s a good idea to include it.

The result is a table of the Podio view:

And the easiest way to get this onto your own website is simply to iframe the widget:

<iframe src="https://procfuwidgets.b-cdn.net/html/widget_id"></iframe>

Make sure to change the widget_id to your own.

We also want the iframe to behave nicely, so we’ll include our general iframe fixer library:

<iframe src="https://procfuwidgets.b-cdn.net/html/widget_id" ></iframe>
<script src="https://procfuwidgets.b-cdn.net/pfui/pf_iframe_fixer.js"></script>

Add Password Protection

If you want to add simple password protection to your widget content, you can do that with a single line: $PFUI->requireAuth(["method"=>"simple", "password"=>"pass"]);

So now, your source will look like this:

$PFUI->requireAuth(["method"=>"simple", "password"=>"pass"]);
$PFUI->table(["type"=>"view", "app_id"=>12345, "view_id"=>23456, "fields"=>["title", "status", "price"]]);
$PFUI->render();

And you will be prompted for the password to see the view:

Again, make sure you change the app_id and view_id for your own app, but more importantly, notice that we only have 3 lines of code here!

Click through to Detail

Sometimes you want to allow people to click through to the detail record for your view items. That’s very easily done as well.

With this code:

if ( $PFUI->context == "detail" ) {
    $PFUI->html("<h3>Record Details</h3>");
    $PFUI->item(["mode"=>"view", "app_id"=>12345]);
    $PFUI->render();
}
$PFUI->html("<h3>Click for Details</h3>");
$PFUI->table(["type"=>"view", "app_id"=>12345, "view_id"=>23456, "fields"=>["title", "status", "price"], "onclick"=>"detail"]);
$PFUI->render();

Users will see the table as before:

But when clicking on a row, will see the full details of the item in Podio:

OK, OK. It took 8 whole lines of code to achieve this, but 2 are an if statement and 2 are headings, so I’ll only count 4 :-)

Demo

Here’s a live demo of this in action .

(c) 2024 Globi Web Solutions | Join the Discussion in our Podio Workspace.

x