Master Detail Sheets in Podio

Many data structures in Podio consist of Master-Detail views. Like Invoices and Invoice Line Items, or Timesheets and Time Log Entries. In Podio, these can be cumbersome to deal with. What we usually see, eg:

When what we really want is:

Fortunately, this is not only possible, but quite easy to implement with ProcFu mini apps and Podio SuperMenu.

The Mini App

Create a new mini app and ensure that the iFramed option is set on the Config tab:

Next, for the authentication screen, set it to Podio so that anyone with Podio access can use it:

To be able to reference related line items, we need to create an invoice screen. This screen will not be used, but must be present in the mini app:

To build the spreadsheet screen, we will need the ID of the master app first. You can get this in the developer options of the app in Podio (note: we need the ID of the MASTER app, not the DETAIL app, eg Invoices, not Invoice Line Items).

Now create an app summary screen for the Detail screen:

Set it as a spreadsheet display, and choose the columns to show. Also make sure that you choose items from "Related Item" and choose the Master app.

I've locked Sub-Total here because it's a calculation field, but you'll need to choose the fields according to your specific setup.

I've also added a small style tag to the header to make the spreadsheet look a little more similar to the Podio UI:

<style>
* { font-size: 13px; }
.pfui .tabsheet { max-height: unset; height: 100vh; }
</style>

One important element is the default for the relationship field back to the master app. In this case, it's "Invoice", which is a relationship field back to the Invoice app.

We're defaulting it to @[pf_app_item:26368380] where 26368380 is the ID of the Invoice (Master) app (change it to YOUR master app ID).

We also need to add one line of code in the Before Process Event:

The code is:

current_app_items[26368380] = url_parameters.itemid

Where 26368380 again is the ID of the Invoice (Master) app (change it to YOUR master app ID).

And we're expecting a URL parameter called "itemid" which we'll pass from Podio.

What we're really doing here, is telling ProcFu that when this screen loads, to get the value of the passed "itemid" parameter, which will be the item ID of a Master item (like Invoice), and set it as the current Master item. We have to do this because there's no selection screen to choose an invoice - we're basically dropping right down to the Detail items, but this requires a related Master item.

Add the Sheet to SuperMenu

Now that we have an app that will show a spreadsheet of related items, we need to add this to Podio so that the SuperMenu will show it.

Add a new calculation field to the Master app:

The actual calculation in this case is:

// @Unique ID
"[line items](https://procfu.com/widgets/mcapp/AmEqDXSTCJUu?itemid=@podio_item_id#globiflowiframe:250)"

You will need to change the URL of the ProcFu mini app to the URL of the Mini App you created in the previous step.

Also note that we're giving the URL parameter "itemid" the value @podio_item_id. The SuperMenu will automatically replace this token with the actual current item ID before creating the iframe.

The part #globiflowiframe:250 is what tells SuperMenu to convert the link to an actual iframe. In this case we're giving it a height of 250 pixels, so you can adjust this as you see fit.

And the only reason we're adding the unique ID in a comment in the first line is because Podio doesn't let you create calculations without any tokens. You could use any field token here.

The Result

The resulting spreadsheet that is iframed in the Podio Master Items is fully functional:

• You can create new items with CTRL+SHIFT+I

• You can edit all rows right there - no need to navigate to the individual Detail records.

• All relationship fields are drop-downs with search.

• All Podio users with SuperMenu will have this functionality.

• All edits in Podio are done as the logged in user.