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

Building a Podio User Portal with ProcFu

- Posted in Uncategorized by

A common business requirement is to allow external customers to interact with Podio data. With the new $PFUI class in ProcFu it couldn't get any easier to allow your website visitors to interact with Podio data.

In this example, we're going to allow customers to:

  • log in
  • edit their profile
  • view their projects and add comments and files to active projects
  • create new projects

The demo is available here.

Note that to make the demo easier to use for demonstration purposes, we're allowing you to create your own account, which basically is a webform and a GlobiFlow flow that generates a password and sends it to you. In your production system you may wish to only manually provision new users.

This portal will also be fully embedded in your website. It's all generated via a ProcFu HTML Widget and simply iframed on your website.

So, customers will be able to log in:

Once logged in, they will see a list of current projects on a simplified dashboard:

From here, they can edit their profile:

Add a new project:

And view and comment on existing projects:

Go ahead - try the DEMO

Part 1 - Podio Setup

The first thing we need is a customers app in Podio:

The important parts here are the Email Address and the MD5 password. We don't want to be storing a customer's real password, so we'll only store the MD5 hash of it. And don't worry - the md5() function is available in GlobiFlow.

Here's the basic flow that creates a password and sends it to the user via email:

Since we want customers to be able to view and comment on existing projects, as well as create new ones, we also need a Projects App in Podio:

Most of the fields are totally up to you. The only important field here is the relationship field back to our customers app (called "Customer" in this case).

Part 2 - the PF Widget

Next, we'll need a code block in ProcFu configured to an HTML widget.

I'm leaving out some stuff for clarity here, like configuration and basic HTML and CSS production. Here is the full source for the widget for reference.

All the initialization and session handling is done by the PFUI class, so there's little that we need to do except handle the logic.

First, we are going to want to ensure that the person is logged in:

// require login
$userRecordId = $PFUI->requireAuth(["method"=>"password", "app_id"=>$user_app_id, "user_field_id"=>$user_app_email_field, "pass_field_id"=>$user_app_pass_field, "pass_type"=>"md5"]);

If the user is not logged in, they will get a login window and in order to log in, there needs to be a matching record in the users app in Podio.

Now that we know that the user is logged in, we want to show some basic options:

// OK - we're logged in
$PFUI->html('<div>Logged in as: '.$PFUI->getLoggedInUsername().' ( ');
$PFUI->link(["title"=>"Projects", "onclick"=>""]);
$PFUI->html(" | ");
$PFUI->link(["title"=>"Edit Profile", "onclick"=>"profile"]);
$PFUI->html(" | ");
$PFUI->link(["title"=>"Log Out", "onclick"=>"logout"]);
$PFUI->html(" )</div><br>");

If the user clicked on the edit profile link, we need to let them do just that:

// edit profile
if ( $PFUI->context == "profile" ) {
    $PFUI->html("<h3>Edit Profile</h3>");
    $PFUI->item(["mode"=>"edit", "app_id"=>$user_app_id, "item_id"=>$userRecordId, "fields"=>["title", "name", "about", "podio-user-type"], "readonly"=>["title"]]);
    $PFUI->render();
}

If they clicked on a Project, show them the project and let them comment on it:

// page: view project
if ( $PFUI->context == "project" ) {
    $project = pf_podio_item_as_field_array($PFUI->getCurrentItem());
    $PFUI->html('<h3>Project: '.$project['title'].'</h3>');
    $PFUI->item(["mode"=>"view", "app_id"=>$project_app_id, "fields"=>["title", "status", "details"], "onsubmit"=>"", "showfiles"=>true, "showcomments"=>true, "allowcomment"=>true, "allowcommentfiles"=>true]);
    $PFUI->render();
}

And if they clicked on the new Project button, let them create one:

// page: NEW project
if ( $PFUI->context == "newproject" ) {
    $PFUI->html("<h3>Create New Project</h3>");
    $PFUI->item(["mode"=>"create", "app_id"=>$project_app_id, "fields"=>["title", "status", "details", "customer"], "values"=>["customer"=>$userRecordId, "status"=>"New"], "hidden"=>["customer", "status"], "onsubmit"=>"", "allowfiles"=>true]);
    $PFUI->render();
}

If we get to this point in the code, the user hasn't clicked on anything, so they're on the default page, so show them a list of their existing projects:

$PFUI->html("<h3>Your Projects</h3>");
$PFUI->startDelayed("projects");
$PFUI->table(["type"=>"related", "item_id"=>$userRecordId, "app_id"=>$project_app_id, "fields"=>["title", "status"], "onclick"=>"project"]);
$PFUI->button(["title"=>"+ Add Project", "onclick"=>"newproject"]);
$PFUI->endDelayed();

$PFUI->render();

The reason we're using startDelayed()/endDelayed() is because it can take a while to load the project list, so to keep the interface more responsive, we will let this be populated via ajax after the page completes.

That's it for ProcFu. Now we just need to add this to our website.

Part 3 - the Website

To add this widget to our website, we'll simply iframe the widget:

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

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

And that's it. You now have a portal for customers to log in and interact with LIVE Podio data.

Go ahead - try the DEMO

Here is the full source for the widget.

Happy hacking :-)

Comments