Hi,
I'm trying to replicate a workspace similar to the "Service Operation Workspace", but I'm unsure how to create a Widget Data Grid that can display and reflect data from the Donut Chart (as seen in the picture). Is there a specific component for this? Additionally, I'd like to know how to create a button that allows users to switch between group data. Any help or suggestions would be greatly appreciated.
Hii
Here is the procedure to list the data based the visualization selected dynamically.
1. First "Enable Drilldown"
- In the Donut Visualization Component "Configure" tab.
- Under "Data Update" Section. Toggle the "Enable Drilldown". (which makes to store the selected visualization data in an event [Visualization Item Selected] ).
2. In the "Events" Tab.
- The "Visualization Item Selected" event only stores the Grouped By value. For ex: if report is grouped by state then it stores it display value you have selected.
- {value: 6, elements: Array(1), groupBy: Array(1), color: undefined, cssColor: undefined}
- And stores the count of records.
- We can also extract the "title" of the report.
- Based on the title, State (Group By), i have dynamically build query using client scripts.
Here is the code:
function handler({ api, event, helpers, imports }) {
var states = {
incident: [
{ id: "1", label: "New" },
{ id: "2", label: "In Progress" },
{ id: "3", label: "On Hold" },
{ id: "6", label: "Resolved" },
{ id: "7", label: "Closed" },
{ id: "8", label: "Canceled" }
],
sc_task: [
{ id: "1", label: "Open" },
{ id: "2", label: "Work in Progress" },
{ id: "-5", label: "Pending" },
{ id: "3", label: "Closed Complete" },
{ id: "4", label: "Closed Incomplete" },
{ id: "7", label: "Closed Skipped" }
],
task_sla: [
{ id: "achieved", label: "Achieved" },
{ id: "completed", label: "Completed" },
{ id: "breached", label: "Breached" },
{ id: "cancelled", label: "Cancelled" },
{ id: "paused", label: "Paused" },
{ id: "in_progress", label: "In progress" }
]
};
// 1️⃣ Use local variable for table instead of relying on state updates immediately
var table;
if (api.state.title === 'Catalog tasks assigned to you' || api.state.title === 'Catalog tasks assigned to your team') {
table = 'sc_task';
} else if (api.state.title === 'Incident SLAs' || api.state.title === 'Incident SLAs Team') {
table = 'task_sla';
} else {
table = 'incident';
}
// Store in state AFTER for consistency
api.setState('table', table);
// 2️⃣ Use local variable for match
var displayState = api.state.test.elements[0];
var match = states[table].find(function(item) {
return item.label === displayState;
});
if (match) {
api.setState('state', match.id);
}
// 3️⃣ Use table & match.id directly — not re-reading state
var filter = '';
if (table === 'incident') {
if (api.state.title === 'Incidents assigned to you') {
filter = 'assigned_toDYNAMIC90d1921e5f510100a9ad2572f2b477fe^state=' + Number(match.id);
} else if (api.state.title === 'Incidents assigned to your team') {
filter = 'assignment_groupDYNAMICd6435e965f510100a9ad2572f2b47744^state=' + Number(match.id);
} else if (api.state.title === 'Unassigned incidents') {
filter = 'assignment_groupDYNAMICd6435e965f510100a9ad2572f2b47744^assigned_toISEMPTY^state=' + Number(match.id);
}
} else if (table === 'sc_task') {
if (api.state.title === 'Catalog tasks assigned to you') {
filter = 'assigned_toDYNAMIC90d1921e5f510100a9ad2572f2b477fe^state=' + Number(match.id);
} else if (api.state.title === 'Catalog tasks assigned to your team') {
filter = 'assignment_groupDYNAMICd6435e965f510100a9ad2572f2b47744^assigned_toISEMPTY^state=' + Number(match.id);
}
} else if (table === 'task_sla') {
if (api.state.title === 'Incident SLAs') {
filter = 'task.assigned_toDYNAMIC90d1921e5f510100a9ad2572f2b477fe^stage=' + match.id;
} else if (api.state.title === 'Incident SLAs Team') {
filter = 'task.assignment_groupDYNAMICd6435e965f510100a9ad2572f2b47744^stage=' + match.id;
}
}
// 4️⃣ Finally set query
api.setState('query', filter);
}
----->Here, we have set the "dynamic filter" value in client state parameter - query.
3. Below the report component, select the List Component in the component properties give table and filter(client state parameter).
