Hi ,
Im using KPI template in my dashboard where i have 5 main tiles (Revenue,Orders,Backlog,DMMG Revenue,Ontime Delivery) and 5 Detail pages with charts in it.
When the user clicks on each tile it opens the corresponding detail pages ,where in detail pages we were using chart icons to switch between the charts .
Everything is working fine till now. Only the issue is that in some 2detail pages(Revenue detail and orders detail pages) we need to show bar charts as start up and in rest 3details pages(DMMG Revenue Detail,Backlog Detail & Ontime Delievery detail pages) we need to show column charts on opening or when switched to detail pages . On switching to detail pages the chart icons shows either bar charts or column charts as selected for all the details pages .
I need to show Bar chart icons selected for 2 detail pages(Revenue detail and orders detail pages) on switching to detail page from main page and to show column chart icons as selected for remaining detail pages(DMMG Revenue Detail,Backlog Detail & Ontime Delievery detail pages).
I have used below scripts but it was not working and shows either Bar charts icons as selected or Column chart icons as selected when switched to detail pages.
// Set Toolbar Selection "On Startup" event
g_toolbar_mode = "BAR";
REV_BUTTON_BAR.setCSSClass(REV_BUTTON_BAR.getCSSClass() + " B_ACTIVE");
BUTTON_INIT_BUTTONS.onClick();
g_toolbar_mode = "BAR";
ORD_BUTTON_BAR.setCSSClass(ORD_BUTTON_BAR.getCSSClass() + " B_ACTIVE");
BUTTON_INIT_BUTTONS.onClick();
g_toolbar_mode = "BAR";
DMMG_BUTTON_COLUMN.setCSSClass(DMMG_BUTTON_COLUMN.getCSSClass() + " B_ACTIVE");
BUTTON_INIT_BUTTONS.onClick();
g_toolbar_mode = "BAR";
BACKLOG_BUTTON_COLUMN.setCSSClass(BACKLOG_BUTTON_COLUMN.getCSSClass() + " B_ACTIVE");
BUTTON_INIT_BUTTONS.onClick();
g_toolbar_mode = "BAR";
ONTIME_BUTTON_COLUMN.setCSSClass(ONTIME_BUTTON_COLUMN.getCSSClass() + " B_ACTIVE");
BUTTON_INIT_BUTTONS.onClick();
==============================================================================================
// Toolbar Button ("BUTTON_INIT_BUTTONS " i.e. Button component added and below is script for "On Click)
/* Revenue */
REV_BUTTON_COLUMN.setCSSClass("ICON_CHART_COLUMN");
REV_BUTTON_BAR.setCSSClass("ICON_CHART_BAR");
REV_BUTTON_TABLE.setCSSClass("ICON_TABLE");
if (g_toolbar_mode == "TABLE") {
REV_BUTTON_TABLE.setCSSClass(REV_BUTTON_TABLE.getCSSClass() + " B_ACTIVE");
}
if (g_toolbar_mode == "BAR") {
REV_BUTTON_BAR.setCSSClass(REV_BUTTON_BAR.getCSSClass() + " B_ACTIVE");
}
if (g_toolbar_mode == "COLUMN") {
REV_BUTTON_COLUMN.setCSSClass(REV_BUTTON_COLUMN.getCSSClass() + " B_ACTIVE");
}
/* orders */
ORD_BUTTON_COLUMN.setCSSClass("ICON_CHART_COLUMN");
ORD_BUTTON_BAR.setCSSClass("ICON_CHART_BAR");
ORD_BUTTON_TABLE.setCSSClass("ICON_TABLE");
if (g_toolbar_mode == "TABLE") {
ORD_BUTTON_TABLE.setCSSClass(ORD_BUTTON_TABLE.getCSSClass() + " B_ACTIVE");
}
if (g_toolbar_mode == "BAR") {
ORD_BUTTON_BAR.setCSSClass(ORD_BUTTON_BAR.getCSSClass() + " B_ACTIVE");
}
if (g_toolbar_mode == "COLUMN") {
ORD_BUTTON_COLUMN.setCSSClass(ORD_BUTTON_COLUMN.getCSSClass() + " B_ACTIVE");
}
/*DMMG */
DMMG_BUTTON_COLUMN.setCSSClass("ICON_CHART_COLUMN");
DMMG_BUTTON_BAR.setCSSClass("ICON_CHART_BAR");
DMMG_BUTTON_TABLE.setCSSClass("ICON_TABLE");
if (g_toolbar_mode == "TABLE") {
DMMG_BUTTON_TABLE.setCSSClass(DMMG_BUTTON_TABLE.getCSSClass() + " B_ACTIVE");
}
if (g_toolbar_mode == "BAR") {
DMMG_BUTTON_BAR.setCSSClass(DMMG_BUTTON_BAR.getCSSClass() + " B_ACTIVE");
}
if (g_toolbar_mode == "COLUMN") {
DMMG_BUTTON_COLUMN.setCSSClass(DMMG_BUTTON_COLUMN.getCSSClass() + " B_ACTIVE");
}
/* BACKLOG */
BACKLOG_BUTTON_COLUMN.setCSSClass("ICON_CHART_COLUMN");
BACKLOG_BUTTON_BAR.setCSSClass("ICON_CHART_BAR");
BACKLOG_BUTTON_TABLE.setCSSClass("ICON_TABLE");
if (g_toolbar_mode == "TABLE") {
BACKLOG_BUTTON_TABLE.setCSSClass(BACKLOG_BUTTON_TABLE.getCSSClass() + " B_ACTIVE");
}
if (g_toolbar_mode == "BAR") {
BACKLOG_BUTTON_BAR.setCSSClass(BACKLOG_BUTTON_BAR.getCSSClass() + " B_ACTIVE");
}
if (g_toolbar_mode == "COLUMN") {
BACKLOG_BUTTON_COLUMN.setCSSClass(BACKLOG_BUTTON_COLUMN.getCSSClass() + " B_ACTIVE");
}
/*ONTIME DELIEVERY */
ONTIME_BUTTON_COLUMN.setCSSClass("ICON_CHART_COLUMN");
ONTIME_BUTTON_BAR.setCSSClass("ICON_CHART_BAR");
ONTIME_BUTTON_TABLE.setCSSClass("ICON_TABLE");
if (g_toolbar_mode == "TABLE") {
ONTIME_BUTTON_TABLE.setCSSClass(ONTIME_BUTTON_TABLE.getCSSClass() + " B_ACTIVE");
}
if (g_toolbar_mode == "BAR") {
ONTIME_BUTTON_BAR.setCSSClass(ONTIME_BUTTON_BAR.getCSSClass() + " B_ACTIVE");
}
if (g_toolbar_mode == "COLUMN") {
ONTIME_BUTTON_COLUMN.setCSSClass(ONTIME_BUTTON_COLUMN.getCSSClass() + " B_ACTIVE");
}
======================================================================================
I have added below scripts for corresponding chart icons i.e. Rvenue,Orders,backlogs,DMMG Revenue and Ontime Delivery
ex: for revenue chart icons buttons On Click:
REV_BUTTON_COLUMN:
RV_CHART_DETAILS_COL.setVisible(true);
RV_CHART_DETAILS_BAR.setVisible(true);
RV_CROSSTAB_DETAILS.setVisible(false);
g_toolbar_mode = "COLUMN";
BUTTON_INIT_BUTTONS.onClick();
REV_BUTTON_BAR:
RV_CHART_DETAILS_COL.setVisible(false);
RV_CHART_DETAILS_BAR.setVisible(true);
RV_CROSSTAB_DETAILS.setVisible(false);
g_toolbar_mode = "BAR";
BUTTON_INIT_BUTTONS.onClick();
REV_BUTTON_TABLE:
RV_CHART_DETAILS_COL.setVisible(false);
RV_CHART_DETAILS_BAR.setVisible(false);
RV_CROSSTAB_DETAILS.setVisible(true);
g_toolbar_mode = "TABLE";
BUTTON_INIT_BUTTONS.onClick();
============================================================================
Please find the screenshot below where the chart is displaying as column chart where as chart icon is selected as bar chart icon.
Please let me know where im doing wrong and help out.
Thanks & Regards ,
Babu.