Getting Fancy with MySQL and Behaviours

In this app we're going to introduce "Behaviours" and also use MySQL to overcome some of the Podio API shortcomings.

The app is pretty straight-forward: It allows vendors to log in with a username and password, and view and pay invoices. It's a scaffold for basing real apps on.

Vendors

The Vendors app in Podio is very simple.

You can add as many fields as you need in your situation. I'm just using the bare-bones basics required for the demonstration.

Invoices

The Invoices app is a standard invoice app with a relationship back to the Vendor's app.

Again, you can have as many fields as you need. You could also have separate payments apps, etc. This is just to get us started.

Mini App

The mini app is equally light. Basically we just need to authenticate the user, show them their invoices, and provide a mechanism to allow them to start the payment process.

Authentication

For authentication, we'll use the email and password fields from the Vendors app.

In this case, we're not encoding the password, but in a real environment, I highly recommend using the MD5 hash version for the password for added protection.

Trick#1: Custom Tokens

The first trick we're going to employ is to create a custom token. When a vendor logs in, we'll store the vendor name in a token, which we can then re-use throughout the app.

custom_tokens.vendor_name = auth_item.title

We then use this token in the App Header to show the vendor name as a heading.

### @[pf_custom:vendor_name]

Trick#2: Calling a GlobiFlow webhook

The second trick will be to call a GlobiFlow webhook when someone logs in, and send over the vendor name. A lot more can be sent, and you can do just about anything in any behaviour (eg on Auth Fail).

data = json_encode(["v"=>auth_item.title])
remote_curl("https://secure.globiflow.com/catch/83231r821981n3m", "POST", [], data, 0)

It will make more sense in context of the screenshot of the start screen behaviours:

Note that each behaviour will show you in it's comments what data is available, and whether it's a ProcScript or JavaScript event.

Invoice List

Now that authentication is taken care of, we want to show the logged-in vendor their invoices. A bit of a pain point here is that in a mini app, we can show items related to the logged in user, but with no search option. We can also show all app items with a search option, but that would show invoices for other vendors too.

This is a limitation with the Podio API, and not much can be done about this. But we can easily work around this using MySQL.

Trick#3: MySQL

Using MySQL will not only enable us to have a search option on related items, but it's also a LOT faster than the Podio API.

First, set up a MySQL sync for the Invoices app in GlobiFlow:

Next, set up a MySQL table summary screen to show the invoices:

Notice that we're again using the custom token we created in Trick#1 which contains the vendor's name, in the WHERE clause.

vendor="@[pf_custom:vendor_name]"

When logging in, the vendor now has a searchable list of their invoices.

Invoice Details

The last screen to build out, is the invoice details screen. This will be a Podio Item Detail screen again.

NB: It is important to note that the list screen from mysql passes the Podio Item ID to the detail screen.

You'll also notice some extra styles in the header. This is in preparation for the next trick 😃

Trick#5: Passing Variables

Back to behaviours, in the Before Render event, we'll take the invoice number and total amount and put them into variables for later use.

Here's the code:

amount = 0
foreach ( current_item.fields as field ) {
  if ( field.external_id == "amount" ) amount = field.values[0].value
}
my_variables.inv_no = current_item.title
my_variables.amount = amount

It's worth noting that since these variables can be passed to JavaScript, they are not secure. Don't store sensitive stuff here. They also cannot be changed from inside JavaScript (only from ProcScript events).

Trick#6: Custom Dynamic Styling

In the On Render (JavaScript) event, we can now use our variables, and do everything javascript can do.

We'll use this opportunity to:

1. Colour code the status of the invoice (green for paid, red for overdue, etc)

2. Provide a PayPal link to pay the invoice if it's not paid

The payment method and functionality is up to you. I'm just using PayPal here because it's easy to set up and can be customized with the invoice number and amount.

var button = '<span class="ppbutton"><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=BUTTON_ID_HERE&amount=';
button += my_variables.amount;
button += '&item_name=';
button += my_variables.inv_no;
button += '" method="POST"><img src="https://www.paypalobjects.com/en_GB/i/btn/btn_paynow_LG.gif"></a></span>';

And to colourize the status, we'll just use jQuery:

$(".pf-catpill").each(function(){
  if ( $(this).text() == "Paid" ) $(this).addClass("invpaid");
  if ( $(this).text() == "Due" ) $(this).addClass("invdue").after(button);
  if ( $(this).text() == "Overdue" ) $(this).addClass("invoverdue").after(button);
});

Here's a screenshot of this:

Now, paid invoices show with a green paid category value:

... and unpaid invoices show in orange or red, along with a payment button:

Happy Coding