The "Accordion" plugin
*This plugin is officially supported by Sisense. You can find the latest version of this plugin on the Sisense Add-Ons page.
Introduction
The following article describes steps needed to add to create “Accordion” - a powerful plugin that enables your dashboard users to click on indicator widget to expand/collapse sub-dashboard (much like tabs).
Business Case
An effective business intelligence dashboard should tell the user key things s/he needs to know about the business, in a flash, and still enable the user to drill down into data.
This plugin enables the user to toggle between different sub-dashboards on demand (=by clicking on the indicator), without the need to present all the data in one dashboard.
Example
Steps
Step 1 - Download and extract the enclosed folder into the plugins folder:
C:\Program Files\Sisense\PrismWeb\plugins\accordionPlugin, if the "plugins" folder is not there, please create it
Step 2 - Create an independent dashboard for every sub-dashboard
Dashboard name should start with the prefix '_accrd_' , in order for the dashboard to be hidden for none owner users from the dashbboards panel.
Step 3 - Go to the indicator widget’s script and copy paste the following code
widget.on('ready', function(se, ev){
Accordion({
element: element,
widget: widget,
dashboard: dashboard,
//filters: ['[<table name>.<table field>]'],
default: false,
dashboardUrl: 'http://192.168.5.91:80/app/main#/dashboards/547741397486bedc1b0002bf',
widgetFiltersInheritance: true
});
})
Step 4 - Code configuration
-
default: true, - set to “true” if you want to display the sub-dashboard by default
-
//filters: ['[<TABLE_NAME>.<FIELD_NAME>]'], - it is possible to configure which dashboard filters will be taken from the “super” dashboard.
For Example: filters: ["[Dates.Date (Calendar)]","[Product.Name]","[Employee.Name]"]
-
dashboardUrl: - the sub-dashboard URL:
For example: dashboardUrl: 'http://192.168.5.91:80/app/main#/dashboards/547741397486bedc1b0002bf' - widgetFiltersInheritance - set to true if you want to inherit the widget filters to the dashboard.
Step 5 - Save the script, refresh the widget and click “Apply”
***
07/12/2016 - plugin updated. Added fix for correct filters update and cross-browser compatibility
08/01/2016 - plugin updated. Added support for setting dashboardName instead of dashboardUrl
12/20/2016 - plugin updated. Added support for widget filter inheritance.
12/29/2016 - plugin updated. Added support for hiding folders that holds only _accrd_ dashboards - for none owners.
01/11/2017 - plugin updated. Added fix for widget inheritance + image on the widget indicates when the accordion is applied.
10/23/2017 - plugin updated. Fixed issues displaying dashboard by its name, fixed Firefox browser issues, prevent showing multiple accordions per one dashboard
-
In order to change the color of the widget:
- go to: C:\Program Files\Sisense\PrismWeb\plugins\accordionPlugin\styles
- Edit the widget css file:
- Replace #187D7B with your desired color
For example:
(In the given example I used Notepad ++)
-
Hi Michael,
If you are getting a login screen on the accordion, then its probably because the URL you are using to access the top level dashboard is different than the one used for the sub-dashboards. For example, you might be building it on the local Sisense server and using localhost as your URL but the sub-dashboards are set to something like "dashboard.mycompany.com". In order for authentication to get passed, you just have to make sure these URLs are the same.
-
If anyone is having trouble getting the filters to work, you just need to make sure that dimension text matches the filters exactly. A quick way to do this is to open up Chrome's javascript console and run the code below. It will print out the exact dimension text for every filter on your dashboard.
$.each(prism.activeDashboard.filters.$$items, function() { console.log(this.jaql.dim);})
-
Hi Michal, it may be that you need to replace your old plugin folder with the updated one. This isn't something built into SiSense itself but rather part of the plug in code. On a side note, if you already have a name format for your embedded dashboards you can edit the 'main' script to search for any string to hide the dashboards. For instance, I was using 'EMB ' at the beginning of mine so I changed _accrd_ to 'EMB ' in the file and all my dashboards were hidden without having to change the name of each dashboard.
-
I tried doing this but editing the script opens a blank page with the address base_url/app/scripteditor#/dashboards/551a119110ba3bbc1200023d/widgets/undefined. I see this happens with some other widgets too. Any ideas if this is related to the plugin or something in my installation ?
-
Important note:
Angular routing works with the "#" format for URLs. In Chrome, you can use either "page#/params" format, or "page/#/params" format, but in FF and IE only the second format works.
So all you need to do, is add that forward slash to the url.
So, if the accordion's url was "http://10.0.0.5/app/main#/dashboards/5523d58346707c3cb5000014"
you need to change it to "http://10.0.0.5/app/main/#/dashboards/5523d58346707c3cb5000014" -
Hi Hila. Thank you for sharing! I'd like to join Vinod for asking to have TextBox this feature as well. It's reasonable, since the Indicator already has a title which is relevant to it's value (for example: Indicator with title "Total Revenue" shows a number 3.93M). How can you 'hint' to the user, that he need to click on the Indicator? How can you 'hint' to the user,that Accordion dashboard will show "Revenue vs Units Sold" ?
In addition, I noticed in the figures above, that the filters in "parent dashboard" (years 2012-2013) do not influence the popping up "Accordion dashboard" (show all years from 2010 to 2013). Is it by design? The expected (intuitive) behavior is that the selected filters will populate to the connected Accordions.
Thank you in advance,
Pavel from Click
-
Hi Hila,
I agree with Pavel on the suggestion how you can 'hint' a user to click on something in general. For example an Indicator or an image or something else. Can you take this into account for a next update?
What I would suggest and would like to see is, that if something is clickable you see a hand instead of an Arrow. The hand makes it clear that the user can click on something for example if you use the accordion plugin under an indicator.
Hopefully you can work with this?
Kr,
Stefan
-
@Stefan,
If you use Chrome (or any other browser) you can press F12 and at the bottom you'll see a browser console. Among the tabs at the top find 'Console' section, paste the code Aviad has provided and run it. You should get the list of filters for Dashboard you're currently displaying. Hope it helps
Regards,
Michał
-
hi guys
my subdashboard dashboard is still showing even with the prefix '_accrd_'. I only started using this plugin today so maybe I'm doing something wrong.
I've also read all the comments and suggestions but nothing works.
accrd.png
Please sign in to leave a comment.
Comments
74 comments