This website uses Cookies. Click Accept to agree to our website's cookie use as described in our Cookie Policy. Click Preferences to customize your cookie settings.
USE CASE:
Tabber provides the ability to allow users to show and hide widgets based on their interaction with the dashboard.
We can use blox to accomplish the same thing. The advantage to this approach is more flexibility in how you use and display tabber, the downside is that there is more of an initial set up cost.
If you need a more customizable tabber solution, follow along.
STEP 1: MAKE YOUR WIDGETS TO BE TABBED.
Start like you would if you were making a tabber by populating the dashboard with all the widgets you will be showing/hiding. Create a text file of all the widget ids and which widget they belong to, it will be handy for the next steps.
For this example I created 3 pivot tables, each showing revenue along a different dimension (Category, Brand, and Age)
STEP 2: MAKE THE BLOX WIDGET
Create a new blox widget. Add a dropdown menu to allow people to choose which view they want.
In this example, we have three different views of the same data, one by category, one by brand, and one by age. We add each as an option to our drop down.
Now we need to make our custom action.
STEP 3: CUSTOM ACTION
payload.data.selectVal gets us the value of whatever option the user selected in the drop down.
You'll need to change the widget id's in the example above to match those on your dashboard.
Depending on which value the user selected we choose to show or hide the various widgets.
Save the action and add it to your blox widget.
We are done with our blox widget.
STEP 4: DASHBOARD SCRIPT
At this point your blox tabber should sort of work. You can select a value and once selected it should only show the widgets that are associated with it.
But the problem is that no widgets are being hidden on start up. So we'll have to add a dashboard script to hide some of the widgets.
As seen in the script here, we are basically just copy and pasting a small chunk of our blox action. In this case I am telling blox to show the brand widget only be default. This works since the default for the blox selection is also brand.
STEP 5: THE FINISHED PRODUCT
All the source files can be found here: https://github.com/nathangiusti/Sisense/tree/master/JS%20Scripts/Blox/Tabber
In this folder you will find two folders, one with tabber implemented as dropdown and the other with tabber implemented as buttons.
The Sample Ecommerce cube was used to build this example.
