How to use selectedRow in TabbedContainer/View

App Building
1

Hello,
Setup

  • I have a tabbedContainer with 8 `Views.
  • Each View contains a Table with the records that correspond to a specific Stage.
  • When a record is selected, I want the filter the "details" to display only the information related to the selected record in the table.

The variable for accomplishing this for ONE table is clear - {tablename.selectedRow.data.columnName}

How can I accomplish the same thing for a selected row in a specific view in a tabbed container? I expected "selectedRow" to be an option here, such that the variable would look like {tabbedContainer.currentViewKey.data.columnName}

Image

Grateful if anyone can point me in the right direction.

Thanks!

2

I'm confused, why not just reference each table as you mention? Like: {{ tablename.selectedRow.data.columnName }}

So it would be:
{{ table1.selectedRow.data.columnName }}
{{ table2.selectedRow.data.columnName }}

etc...

I'm not aware of a way to access the table data through the tabbedContainer component.

3

Thanks for responding @benbarry.

Here is a screenshot that hopefully illustrates what I am trying to accomplish.
Screenshot

4

I think I understand. So, you only want to filter based on one of the tables in the tabbed container at a time? Whichever one is in the currently active tab?

5

I think you'd need to do some kind of logic like this:

{{ tabbedContainer1.currentViewKey == "Connect" ? table1.selectedRow.data.id : table2.selectedRow.data.id }}

Or, since you have so many tabs, I'd probably do a transformer with a switch statement to return the value for the active table you're interested in. Something like:

switch ({{ tabbedContainer1.currentViewKey }}) {
  case "All":
    return {{ table1.selectedRow.data.columnName }};
    break;
  case "New":
    return {{ table2.selectedRow.data.columnName }};
    break;
  case "Connect":
    return {{ table3.selectedRow.data.columnName }};
    break;
  default:
    return [];
}
3 Likes
6

Thanks @benbarry this worked perfectly!