I have made some new cards on the landing page based off the existing cards. When you click the donuts' sections, they update the list below them to show the records. With the cards I added, I am not sure how to make them behave the same. For example, if you click the donut of the interaction card, the interaction records it is displaying should appear in the list in the lower red box of the attached image
I don't remember ever trying to programmatically set the list that gets displayed - but see my final remark on this, below, because it looks like this should be easy to do.
The following example doesn't do that, but sets the list filter instead. Setting the list itself should be about the same.
In this example the user can click on a site in a doughnut visualization to filter the adjacent list to just records for that site. They can click other visualizations to enable, or clear, similar filter clauses.
Note I'm not suggesting there isn't a simpler way to do this. It's just what I figured out at the time.
I used the Visualization Clicked event to call a Client Script.
Here's the signature on that script. Note that we are setting the siteName state variable.
/**
* @Param {params} params
* @Param {api} params.api
* @Param {any} params.event
* @Param {any} params.imports
* @Param {ApiHelpers} params.helpers
*/
function handler({api, event, helpers, imports}) {
// User has clicked a segment in the Sites pie chart. Payload is like this:
//
// {
// "title": "Device Count by Site",
// "params": {
// "listTitle": "Device Count by Site",
// "table": "your_table_here",
// "query": "u_status!=retired^ORDERBYDESC$AGGREGATE$^u_site.u_name=Cookeville",
// "workspaceConfigId": "",
// "wordWrap": false,
// "disableQuickEdit": true
// },
// "type": "pie",
// "renderer_type": "layout"
// }
var siteName = event.payload.params.query.split("u_site.u_name=")[1];
api.setState("siteName", (siteName===api.state.siteName) ? "" : siteName );
}The list's filter is written in script, and is driven in part by the siteName state variable (among others):
Here's the scripted property value. The user can click on various visualizations to filter by any combination of site name, model name and device status.
/**
* @Param {params} params
* @Param {api} params.api
* @Param {any} params.imports
*/
function evaluateProperty({
api
}) {
var filter = "";
var dirty = false;
// (Optional) filter by status
if (true && api.state.deviceStatus /* not null, not empty */ ) {
filter += dirty ? "^" : "";
filter += "u_status=" + api.state.deviceStatus;
dirty = true;
}
// (Optional) filter by model name
if (true && api.state.modelName /* not null, not empty */ ) {
filter += dirty ? "^" : "";
filter += "u_model.u_name=" + api.state.modelName;
dirty = true;
}
// (Optional) filter by site
if (true && api.state.siteName /* not null, not empty */ ) {
filter += dirty ? "^" : "";
filter += "u_site.u_name=" + api.state.siteName;
dirty = true;
}
return filter;
}
It looks like the table you display can be determined through a scripted property. So it should be possible to set/switch the list the same way I set the list's filter above.
