Date Granularity Affecting Title Widget
I am using this solution from intapiuser: https://community.sisense.com/t5/knowledge-base/change-date-granularity-of-a-widget-using-blox/ta-p/8916 to try and get a widget that this BloX affects to update the title of the widget. Attached is the image of the example I am trying to achieve. So if the user picks Years or Months or Days then the title will change by Number of Orders by Years/Months/Days Respectively
I have attempt to create code that would affect the widget title listening to dynamicGranSwap from the Action we created from the above post but to no avail.
widget.on('ready', function(w) {
function updateTitle(granularity) {
let granularityLabel = {
"years": "Year",
"quarters": "Quarter",
"months": "Month",
"weeks": "Week",
"days": "Day"
};
let newTitle = `Number of Orders by ${granularityLabel[granularity]}`;
console.log("Updating Title to:", newTitle); // Debugging
w.title = newTitle;
w.refresh();
}
prism.$scope.$on("dynamicGranSwap", function(event, data) {
console.log("Received Granularity Change:", data); // Debugging
if (data && data.dategran) {
updateTitle(data.dategran);
}
});
updateTitle("weeks");
});Any suggestions DRay Liliia_DevX rapidbisupport harikm007
I found a solution:
You can provide exact titles that you want to update on your side, then set a timeout so that the title updates with what you choose.
// Holds the chosen granularity from the selected button, e.g., 'months' const dategran = payload.dategran; var widgetIds = payload.data.widgetToModify; // Define title mapping const titleMap = { "years": "Number of Orders by Years", "quarters": "Number of Orders by Quarters", "months": "Number of Orders by Months", "weeks": "Number of Orders by Weeks", "days": "Number of Orders by Days" }; // Change the background color for unselected buttons payload.widget.style.currentCard.actions.forEach(function (i) { i.style["background-color"] = '#D3D3D3'; }); // Change the background color for the selected button payload.widget.style.currentCard.actions .filter(i => i.dategran == dategran)[0].style["background-color"] = "#f2B900"; // Redraw the BloX widget to reflect changes payload.widget.redraw(); // For each widget in the affected list, update the granularity first payload.widget.dashboard.widgets.$$widgets .filter(i => widgetIds.includes(i.oid)) .forEach(function (widget) { // Change the X-axis granularity (original working code) widget.metadata.panels[0].items[0].jaql.level = dategran; // Apply changes to update granularity first widget.changesMade('someEvent', ['metadata', 'properties_changed']); // Refresh to ensure the granularity update is applied before changing the title widget.refresh(); // **Ensure title updates AFTER granularity change is applied** setTimeout(() => { widget.title = titleMap[dategran] || "Number of Orders"; widget.changesMade('title_changed'); widget.refresh(); }, 100); // Short delay ensures X-axis granularity update is completed first }); // Emit an event for further dynamic changes if needed prism.$scope.$emit("dynamicGranSwap", { dategran: dategran });
