Tag: pagebook

How to switch between pages in a pagebook by clicking on panels and calling a global script in SAP Business Objects Design studio

Share Button

Dashboard with page book and left panels to select page

Dashboard with page book and left panels to select page

In this application the four panels on the left represent 4 main KPI areas. When you click on any of them, the color of the panel goes darker and the purple left bar (also a panel) is made visible to show it is the one is selected.
So, once a panel is selected, you need to make sure all other 3 panels show in a lighter color, that the other purple bars are hidden, that the specific purple bar to the left of the selected panel is made visible and that the selected panel goes darker. One last action is to activate the specific page in a page book and it will show in the main part of the dashboard.
You could accomplish this by having a similar script on every On Click event of every one of the panels, or better yet, modularize in a global script and pass parameters to it such as panel to activate, purple panel to make visible and page index to activate on page book:
(Note: the panels are named PANEL_SA_MAIN, PANEL_CE_MAIN, PANEL_OE_MAIN, and PANEL_PE_MAIN. The purple panels have similar names with _LEFT as a suffix)
Actions on click

Actions on click

So, on the On Click of the four panels:
Panel 1 On Click script:

GLOBAL_SCRIPTS_1.panelToggle(PANEL_SA_MAIN, PANEL_SA_LEFT, 0, 0);

Panel 1 On Click script:

GLOBAL_SCRIPTS_1.panelToggle(PANEL_CE_MAIN, PANEL_CE_LEFT, 1, 1);

Panel 1 On Click script:

GLOBAL_SCRIPTS_1.panelToggle(PANEL_OE_MAIN, PANEL_OE_LEFT, 2, 2);

Panel 4 On Click script:

GLOBAL_SCRIPTS_1.panelToggle(PANEL_PE_MAIN, PANEL_PE_LEFT, 3, 3);
On Click code example
On Click code example

And on the global scripts section we have a script named panelToggle

panelToggle Script
panelToggle Script

And the code is quite simple, the first parameter PanelOn is the name of the panel to turn on, the second parameter PanelVisible is the left purple panel to make visible, the third parameter pageOn is the corresponding index of the page in the page tab we want to activate and the fourth parameter FA is a global variable that is also set for further use in other areas of the dashboard.

panelToggle Script Code
panelToggle Script Code
//Turn lighter / invisible for all
PANEL_SA_MAIN.setCSSClass("mypanelOff");
PANEL_SA_LEFT.setVisible(false);
PANEL_CE_MAIN.setCSSClass("mypanelOff");
PANEL_CE_LEFT.setVisible(false);
PANEL_OE_MAIN.setCSSClass("mypanelOff");
PANEL_OE_LEFT.setVisible(false);
PANEL_PE_MAIN.setCSSClass("mypanelOff");
PANEL_PE_LEFT.setVisible(false);
//Turn visible / darker selected ones
panelOn.setCSSClass("mypanelOn");
panelVisible.setVisible(true);
//Select page
PAGEBOOK_1.setSelectedPageIndex(pageOn);
indexFA = FA;

In lines 2-9 All main panels color are set to a lighter color by setting the CSS Class to “mypaneloff” and all left panels are hidden (setVisible(false)).
In lines 11-12 the specific panel is set to a darker color (mypanelon) and the corresponding left purple panel is made visible.
In line 14 the specified page is selected on the PAGEBOOK object and
In line 15 the global variable FA is set.

By modularizing code in a global script we reduce the amount of code to maintain and review and make the whole code easier to understand and debug.

You can watch an explanatory video on this topic on this link

Share Button