The "Accordion" plugin

December 02, 2014 09:16

*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

Accordion.dash

Comments

70 comments

Hila Kantor December 02, 2014 09:23
In order to change the color of the widget:
1. go to: C:\Program Files\Sisense\PrismWeb\plugins\accordionPlugin\styles
2. Edit the widget css file:
3. Replace #187D7B with your desired color
  For example:
  
  (In the given example I used Notepad ++)
0

Permalink
Stefan January 29, 2015 10:56

This plugin is really great!

Is it possible to have the frame open on the side (Horizontaly) rather than at the bottom?

Thanks!

0

Permalink
Michal February 08, 2015 14:59

Hi

Thanks for the plug in

is it possible to change the size (height) of the accordion?

I tried to change in the css code but couldn't get to the right parameter

0

Permalink
Hila Kantor February 08, 2015 15:33

Hi Michal,

You can change the default height in the main.js file of the plugin:

1

Permalink
Michael Becker February 11, 2015 20:25

Hi,

is there a possibility to skip log in screen within accordion, or maybe I'm doing something wrong?

Michał

0

Permalink
Takashi Binns February 18, 2015 15:49

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.

0

Permalink
Aviad Harell February 18, 2015 15:57
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);})
```
2

Permalink
Michael Becker February 18, 2015 18:04

Thanks Takashi, that was exactly the case!

0

Permalink
Stefan March 06, 2015 08:51

Is there someone who can help me out with this one: Is it possible to have the i-frame open on the side (Horizontaly) rather than at the bottom (vertically)?

Thanks!

0

Permalink
Eli March 10, 2015 09:23

The plugin was updated:

Sub dashboards that starts with the prefix '_accrd_' will be hidden for none owner users form the dashboards panel.

0

Permalink
Sinu Joseph March 11, 2015 08:05

Hiding sub dashboards was an important feature... Thank you Mr. Solution Architect... :)

0

Permalink
Michal March 11, 2015 09:00

Hi, I tried to hide the sub dashboards but it didn't work...

I added the _accrd_to the dashboard name, now it looks like this: _accrd_CA

but, the users can still see

0

Permalink
Joseph Peters March 16, 2015 13:54

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.

0

Permalink
Vinod Rajasekaran March 31, 2015 03:21

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 ?

0

Permalink
Michael Becker March 31, 2015 08:04

Vinod,

before you can edit script for a widget you must create it and click apply at least once so it is created in SiSense DB, this will allow editing script for that widget.

0

Permalink
Hila Kantor April 07, 2015 15:48

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"

0

Permalink
Vinod Rajasekaran April 07, 2015 17:00

Would the accordion plugin work with the upcoming Text widget in release 5.7 ? This would make for really nice tabbed dashboard views with the sub dashboards hidden from users.

0

Permalink
Michael Becker April 07, 2015 19:02

It won't for now since TextBox does not have ability to put JS behind it :(

0

Permalink
clickdashboard April 15, 2015 05:59

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

0

Permalink
Stefan April 15, 2015 07:37

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

0

Permalink
Joseph Peters April 27, 2015 14:37

Anyone have any ideas on how to embed one accordion dashboard within another? We've tried this but the second embed doesn't appear to populate. Wondering if there might be a change we can make to the plugin to allow this.

0

Permalink
Konstantinos May 18, 2015 09:54

I have noticed that Accordion update has by default dependent results with sup-dashboard's filters. Is it any way to control this thing?

0

Permalink
Michael Becker May 18, 2015 10:01

@Konstantinos - Step 4 in instruction. I believe you can specify non-existing filter and this way other filters wont affect sub-dashboards. Other way would be to edit main.js file, maybe editing var filters to empty would solve it but I'm not sure about that.

0

Permalink
Konstantinos May 25, 2015 12:41

@Michal - Step 4 indicates how to use filters from sup-dashboard in your accordion. I have checked the main.js, but since my knowledge is limited in js i don't want to change anything there. The problem is that my accordions used to work perfectly before.

0

Permalink
Stefan July 08, 2015 09:49

Hi Aviad,

I have trouble getting the filters to work. You mention something about Chrome's javascript. This is kind a vague to me. I'm not a technical guy. Can you please show me step by step how to find and how I need to implement this in the Accordion in Sisense?

KR,

Stefan

0

Permalink
Michael Becker July 08, 2015 10:25

@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ł

0

Permalink
Stefan July 09, 2015 07:20

@Michal: Thanks a lot!

0

Permalink
Hila Kantor August 31, 2015 08:50

There's an issue with IE maximum query string length - IE limits maximum URL length to 2048. Therefore, when using this plugin in IE with many dashboard filters - it might not work.

0

Permalink
Joseph Peters September 10, 2015 18:14

Is there a way to change the code to allow this to work with a bar chart?

1

Permalink
Nomava` September 11, 2015 14:08

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

0

Permalink