Sync row click with Filter and other elements

[Flogge]

Hey folks,

How can I create a sync between rows in a table and a dropdown (single-select)
Use case: A user clicks a row in a table (just the row, no button, no bells or whistles at best) which has an ID column. The ID of the clicked row should be automatically selected in a single-select dropdown (aka “Filter” I assume). Some other content of the row should be displayed inside other (HTML, Form) elements.
Background: I don’t want to use the inline-edit feature of tables but have the user select a row and display editable information in a larger visualization element and have it seved via Microservice from there.

[johannesheininger]

Hi Flogge,
I personally stumbeld of this myself once I wanted to build something like a master-detail view, which sounds very similar to your description.
I also think what we both miss is that the value clicked by the user in a row gets acutally pushed to a filter like a user would select a value via mouse click in this fitler or table header dropdown.

"rowFilter": {
      // "variableConfig": [
      //   {
      //     "column": "",
      //     "variableName": ""
      //   }
      // ],
      "syncSetConfig": [
        {
          "column": "country_ioc"
        }
      ]
    }

Currently in my case I could make use of the variableConfig and use the value in a SQL but it is not covering everything I think.

Overall thank you for you input and I will take this with me to the development team and for now I summarized it like “Allow the rowFilter at a table not just “populate” a syncSet but also “activate” a syncSet so other features can be leveraged on top of it like layout change”

If you are interested here my app to provide a sceleton for a Master-Detail View

JSON code of my example App

{ "version": "0.100", "screens": [], "layouts": [ { "id": "master_only", "type": "fixedGrid", "config": { "dim": { "x": 24, "y": 24 }, "containers": [ { "id": "titlePos", "pos": { "x": 1, "y": 1 }, "size": { "w": 24, "h": 4 } }, { "id": "chart1", "pos": { "x": 1, "y": 5 }, "size": { "w": 24, "h": 8 } } ] }, "cellPadding": "5px", "placements": [ { "containerId": "titlePos", "elementId": "welcomeTitle" }, { "containerId": "chart1", "elementId": "master_country_data" } ] }, { "id": "master_detail", "type": "fixedGrid", "config": { "dim": { "x": 24, "y": 24 }, "containers": [ { "id": "titlePos", "pos": { "x": 1, "y": 1 }, "size": { "w": 24, "h": 4 } }, { "id": "chart1", "pos": { "x": 1, "y": 5 }, "size": { "w": 24, "h": 8 } }, { "id": "chart2", "pos": { "x": 1, "y": 13 }, "size": { "w": 20, "h": 12 } } ] }, "cellPadding": "5px", "placements": [ { "containerId": "titlePos", "elementId": "welcomeTitle" }, { "containerId": "chart1", "elementId": "master_country_data" }, { "containerId": "chart2", "elementId": "detailed_country_data" } ] } ], "datasources": [ { "id": "master_country_data", "origin": "datatable", "config": { "dataId": "fc6aa062-b9e0-4a1e-b2fa-40095bda3c04", "schema": "table", "filterOptions": { "distinctValues": true, "enabled": true }, "dataOptions": { "sql": "" } } }, { "id": "detailed_country_data", "origin": "datatable", "config": { "dataId": "4c53b898-7a29-45c4-82e4-91a791025ea7", "schema": "table", "filterOptions": { "distinctValues": true, "enabled": true } } } ], "elements": [ { "id": "welcomeTitle", "type": "html", "config": { "html": "<h1>Hello World!</h1>" } }, { "id": "master_country_data", "type": "table", "source": "master_country_data", "navigation": [ { "to": "master_detail_pag", "label": "to master detail direct" } ], "config": { "rowFilter": { // "variableConfig": [ // { // "column": "", // "variableName": "" // } // ], "syncSetConfig": [ { "column": "country_ioc" } ] } }, "syncSets": [ { "syncSetId": "country_ioc_syncSet", "publishFilters": true, "applyFilters": false } ] }, { "id": "detailed_country_data", "type": "table", "source": "detailed_country_data", "navigation": [ { "to": "home", "label": "back to master only directly" } ], "syncSets": [ { "syncSetId": "country_ioc_syncSet", "publishFilters": false, "applyFilters": true } ] } ], "pages": [ { "id": "home", "label": "Home", "screens": [ { "layout": "master_only", "conditions": { "syncSets": { "country_ioc_syncSet": { "country_ioc": { "present": false } } } } }, { "layout": "master_detail", "conditions": { "syncSets": { "country_ioc_syncSet": { "country_ioc": { "present": true } } } } } ] }, { "id": "master_detail_pag", "screens": [ { "layout": "master_detail" } ] } ], "endpoints": [], "syncSets": [ { "id": "country_ioc_syncSet", "sources": [ "master_country_data", "detailed_country_data" ], "joins": [ { "datasource": "master_country_data", "columns": [ "country_ioc" ] }, { "datasource": "detailed_country_data", "columns": [ "country_ioc" ] } ] } ], "partials": [], "customElementPacks": [], "customHooks": [] }

Data Tables of the App to be created and used