Pushing Podio

Fun Experiments pushing Citrix Podio to the limit so you can get more done.
... with a little help from GlobiFlow, ProcFu, and other friends ...

Display a Podio View on your Website (Advanced)

- Posted in Uncategorized by

Showing Podio data on a website is a common requirement. I'll be doing a series of posts on this topic going from simple to advanced.

There be some advanced code ahead. For a really simple way to include a view on your website, see this post instead.

In this simple case, we're just going to show a table on your website. In future, we'll be authenticating customers and letting them edit data, but for starters, this should get us used to the concept of adding content to your site.

The end result will be something along the lines of:

The Data

Assuming you have an app in Podio that has the data you wish to display, grab the app_id and the view_id.

Then create a custom code block in ProcFu to return this view as HTML:


$app_id = 123456; $view_id = 2345678; $ret = call_pf_script("podio_view_get.pf", ["app_id" => $app_id, "view_id" => $view_id, "raw" => 0]); $data = json_decode($ret, true); $html = <<<'EOF' <table class="table table-sm table-hover"> <thead> <th>Item</th> <th>Status</th> <th class="text-right">Price</th> </thead> <tbody> EOF; foreach ( $data as $row ) { $html .= '<tr><td>' . $row['title'] . '</td>'; $html .= '<td>' . $row['status'] . '</td>'; $html .= '<td class="text-right">' . $row['price'] . '</td></tr>'; } $html .= <<<'EOF' </tbody> </table> EOF; return $html;

Note the classes that I'm using here. This is because I have bootstrap on my site to make things pretty. Whatever framework or CSS you have, you'll need to adjust this accordingly.

Next, on the Acct page, create a new HTML Website Widget to run your code block. Use a sensible amount for cache expires to minimize the number of Podio API calls required but still give you up-to-date data. For example, 300 would give you 5 minutes of cache time.

Then, grab the URL of the widget:

https://procfuwidgets.b-cdn.net/html/eSaPxsr9qJPf

The Website

Firstly, make sure that you're loading jQuery on your site somewhere. The line in your HTML should look something like:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

The version is not terribly important, but it must be there.

Next, add a div to your page where you want the Podio content to be displayed, and give it a unique ID:

    <div id="pfcontent">
        <img src="/img/progress-bar.gif">
    </div>

And lastly, add a piece of JavaScript to fetch the widget and populate your div:

<script>
var pfwidgeturl = "https://procfuwidgets.b-cdn.net/html/eSaPxsr9qJPf"; // CHANGE THIS TO YOUR WIDGET
$(function() {
    $("#pfcontent").load(pfwidgeturl, function(){
    });
});
</script>

And Voila! Your site now has the Podio View on it:

Comments