video_master_detail_spreadsheet

For video: https://youtu.be/B5J8I2KYHlw

Video showing how to show an editable spreadsheet-like table of related items in a Podio app. In this example we have invoice items showing in an invoices app, but this technique is applicable to any master-detail relationship setup.

Some of the code used in the video:

-------------------------------
Spreadsheet and button styling:
-------------------------------

<style>
* { font-size: 13px; }
.pfui .tabsheet { max-height: unset; height: 100vh; }
button.mybtnsmll {
    padding: 0.1em 0.5em;
    margin-left: 0;
    margin-right: 1em;
}
</style>

-------------------------------
Invoice Field Default Value:
-------------------------------
@[pf_app_item:APP_ID_OF_YOUR_INVOICE_APP]

-------------------------------
Before Process event:
-------------------------------
current_app_items[APP_ID_OF_YOUR_INVOICE_APP] = url_parameters.itemid

-------------------------------
On Render code:
-------------------------------
var $btn = $("#btnadd");
if ( $btn.length == 0 ) {
	addButton();
}

function addButton() {
	$(".tabsheet").append('<button id="btnadd" class="mybtnsmll primary">+New</button>');
	$(".tabsheet").append('<button id="btnrefresh" class="mybtnsmll">Refresh</button>');
	$("#btnadd").on("click", function(e){
		e.preventDefault();
		e.stopImmediatePropagation();
		pfSheetWrapper.insertTabRow($(".tabsheet").first().attr("id"));
	});
	$("#btnrefresh").on("click", function(e){
		e.preventDefault();
		e.stopImmediatePropagation();
		document.location.reload();
	});
}

-------------------------------
Invoice App Line Items Calculation Field:
-------------------------------
// @Unique ID
"[line items](https://procfu.com/widgets/mcapp/MINI_APP_URL_ID?itemid=@podio_item_id#globiflowiframe:250)"