MasterDetail function in WIX Showcase

Sometimes you want to be able to have master detail views in your applications. Since there is no connected property to bind datasets in WIX yet we can accomplish this using this trick.

Let’s say we have a table and a dataset with courses in it and then another dataset with attendees in. When we click on a course we would like to connect and show all attendees from a course.


The datasets are binded to the above tables, table1 and table2. When we click on table1 that row is selected (demands that you specify row-select in table settings). Get the title and also add a field in the second dataset with courseTitles to connect to.


The first table which we connect to table1.


The second table which we connect to table2.
Let’s add the code on a page level now.

import wixData from ‘wix-data’;

$w.onReady(function () {

console.log("page is loaded");	 
}); 

export function table1_onRowSelect(event) {
//Get the selected rows title property
let selectedRowTitle = event.rowData[“title”];
console.log(selectedRowTitle);

wixData.query("secondDatasetName").eq("connectedFieldName", selectedRowTitle).find().then((results) => { 
	let items = results.items; 
	$w("#table2").rows = items; 
	console.log("Rows added"); 
	
	}); 

}

Very easy, works like a charm. Happy coding in WIX.

very nice!
we’re actually going to release an option to do this with no coding, but this is the exact way to do this right now.

1 Like

That would blow me away, is there any kind of roadmap with ETA for us to read. I would be great to know when planing projects, wix or some other platform. I would love to know more if something is coming in october or january– isch.