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

Making Partial Connected Webforms for Podio

- Posted in Uncategorized by

Podio has webforms built in, which allows easy creation of items. The problem arises when you want a specific person to provide some data. Having a form create a new item (a) doesn't allow editing of existing data, and (b) doesn't allow for an easy mechanism to identify who filled in the form.

I've seen many attempts to work around this by giving people a new form to fill in which requests the needed data, including email address. Then there are a bunch of GlobiFlow flows that try to find the original customer record by email address, hoping that this person used the same address on the form, and that there are no duplicates in the system.

There is a better way ...

Simple Connected Forms

What we want is a mechanism to send a form to someone to fill out that:

  • is already an item in Podio
  • is already identified
  • allows the person to edit existing data
  • allows you to choose which fields they can see & edit
  • prevents them from changing important ID data

Basically we want a mechanism that sends the person an email similar to:

And the resulting page lets them edit certain fields only, while preserving existing data:

The Setup

First thing we need is an app in Podio to store users. For this demo, we're just using a single app that has everything:

The "Action" category field is going to act like a button to initiate the process. The fields for Question 1 to 3 are fields we want the contact to fill in. The "Internal Use Password" field is going to contain the unique identifier which will be sent as part of the email to add some security to our form so people can't willy-nilly edit any item in the app.

The Widget

We're going to need a ProcFu HTML widget to serve the form content. The code is pretty straight forward and well commented and should be easy to follow:

// configuration
$survey_app_id = 1234567;
$password_field = "internal-use-password";

// require valid link
$PFUI->requireAuth(["method"=>"link", "app_id"=>$survey_app_id, "link_field_id"=>$password_field, "link_url_param"=>"id"]);

// are we returning from filling out the form?
if ( $PFUI->context == "complete" ) {
    $PFUI->html('<h3>Thank You</h3>');
    $PFUI->html('<p>Thank you for submitting the survey. Someone will follow up with you soon.</p>');
    $PFUI->render();
}

// show edit form
$PFUI->html('<p>Please complete the fields below:</p>');
$PFUI->item(["mode"=>"edit", "app_id"=>$survey_app_id, "item_id"=>$PFUI->getLoggedInItemId(), 
             "fields"=>["question-1", "question-2", "question-3"],
            "onsubmit"=>"complete"]);
$PFUI->render();

Basically we're expecting the widget to receive the id in the URL, and ensure it's valid. If it is, then show the person a form with Questions 1 to 3 and let them edit the content for that item.

The Flows

Next, in GlobiFlow, we need to set up an external link page:

It basically just shows an iframe of the ProcFu widget we created earlier and is passing the unique ID to it. We're also including our iframe fixer javascript to make the iframe behave as well as possible:

'<iframe src="https://procfu.com/widgets/html/widget_id?id=' . [(Survey) Internal Use Password] . '"></iframe>
<script src="https://procfuwidgets.b-cdn.net/pfui/pf_iframe_fixer.js"></script>'

You could easily expand this flow to do other things as you now know that the person clicked on the link they were provided.

The next flow we need is on update of an item to send an email when the "Send" category button is clicked:

This just basically sends an email to ask the person to click on a link, which will show them the external GlobiFlow page with the ProcFu widget content.

The Result

The end result is as follows:

1) You have a user record created somehow (obviously you'll adapt this to your specific requirements, right?)

2) You go to the record and click on the "Send" button

3) The user receives an email

4) The user clicks on the link in the email and gets the form to complete

5) The user updates the fields as needed and saves the form

6) The record in Podio is updated accordingly

More

This demo is meant to demonstrate the concept of allowing users / customers / contacts / people, to be able to fill in forms that don't represent an entire app, that can have pre-defined data, and that are already linked in Podio, and all without having to make them log in with a password.

You can take this concept and extrapolate it to your specific needs and business setup.

Comments