Popup widget on click with filtering

Introduction

In this post we will explain how to add a pop-up pivot table which will drill down into a dimension in a parent pivot table.

Update- 3/9/2016: The functionality in this article may not be compatible with all future versions of Sisense. Please utilize the Consolidated Jump to Dashboard plugin, which contains the functionality described here. More information on the Consolidated Jump to Dashboard plugin can be found here: https://support.sisense.com/entries/69692300-Consolidated-Jump-To-Dashboard-Plugin-

Purpose/Benefits

Adding a pop-up drill drown pivot table can conserve dashboard space as well as simplify the drill down process. Plus, it looks pretty nifty.

Example

A wholesale grocery seller wants to track the key sales metrics by category, and would like to drill down into each grocery category to view metrics for products within the category while conserving dashboard real estate.

1. Create and Configure Parent Widget

Step 1 - Create parent

First, we must create a simple pivot table which contains a dimension we'd like to drill into.

Step 2 - Change parent filter settings

Under "Settings" for the Category pivot table widget, select “Widget affects dashboard filters”. This will cause the pop-up widget to be filtered to the selected category.

Step 3 - Add custom script to parent

// change opacity on close of popup
var onClose = function(){
    $(element).find('*').fadeTo(1700, 1);
}

// check if IE
var isIE = function() {
    return ((navigator.appName == 'Microsoft Internet Explorer') || ((navigator.appName == 'Netscape') && (new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null)));
}

// get the current location
var getLocation = function(){
    if (!window.location.origin && isIE()) {
          return window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
    }
    else{
        return location.origin;
    }
}

widget.on('ready', function (se, ev) {
    // timeout to affect the fixed column which is render after ready event
    setTimeout(function () {
                
        var w = widget;
        var d = dashboard;
        var tds = $('td', element); // get all the cells
        
        //find the second widget
        var secondW = _.find(d.widgets.$$widgets, function(widget){
            return widget.oid != w.oid
        });
        // create the popup
        var iframeDiv = '<div id="popupWidget">' +
                            '<iframe src="' + getLocation() +'/app/main#/dashboards/' + d.oid + '/widgets/'+ secondW.oid + '?embed=true" width="100%" height="100%" seamless></iframe>' +                    
                        '</div>';

        // get the dom service
        var $dom = angular.injector(["ux-controls"]).get("ux-controls.services.$dom");

        // for each cell add click event to open popup
        _.each(tds, function (td, index) {
            $(td).on('click', function (s, e) {
                
                // white out the background when poup opened
                $(element).find('*').fadeTo(2000, 0.5);

                // create the popup ui
                var ui = {
                    place : 'r', // right
                    target : td,    
                    anchor : 't',    //top anchor
                    closeOnBlur : true,
                    
                    // size of popup
                    width : Math.max(Math.floor($(window.document.activeElement).outerWidth() * 2 / 3), 300),
                    height : Math.max(Math.floor($(window.document.activeElement).outerHeight() * 2 / 3), 300)
                }                
                // create the settings
                var settings = {
                    template : iframeDiv,
                    onClosed: onClose,
                }    
                // create popup
                $dom.pop(settings, ui);
            })
        })
    }, 500);
})

2. Create and Configure Pop-up Widget

Step 1 - Create pop-up widget

This will be the pivot table that will pop up over the dashboard when a category in the parent table is selected. This widget must be created separately, and not duplicated from the parent.

Step 2 - Give child a description

Assigning a description will allow us to specifically reference this widget in the below script.

3. Configure Dashboard

Step 1 - Create dashboard filter for parent drill down dimension

Step 2 - Add custom script to dashboard

Add this script to the dashboard. It must be edited to refer to the name of your own widget. Change ProductPivot to the name of your widget.

dashboard.on('refreshend', function(){
    
    var d = dashboard;
    var e = element;
    
    var widget = _.find(d.widgets.$$widgets, function(w, i){return w.desc =="ProductPivot"})
    $('widget[widgetid='+widget.oid+']', e).css("visibility", "hidden");
    
})

Step 3 - Reload the dashboard

Reloading bring the custom script into effect.

Additional Information

Once the custom code is in effect, the pop-up widget will be hidden, and must be made visible before editing. To make the pop-up widget visible, edit the custom dashboard code to say "visible" instead of "hidden".

popup_widget_with_filter.zip

Sean Bous September 14, 2014 13:27

This is fantastic! Thanks for posting it.

I have some questions/comments:

1) For some reason the Child pivot is not hidden even though it's set correctly: css("visibility", "hidden");

2) Is there a way to add an X sign to close the pop up window?

3) Is there a way that the Child Pivot can be from another dashboard all together?

4) Suggestion - I think that after you click the pivot, the selection should get canceled as well.

Thanks again!

Ido Darnell September 15, 2014 16:07

Hi Sean,

regarding number 1, make sure you're referencing the child widget by it's description, make sure to set the description. Also, any widget, not just a pivot table, can be popped up using this code.

jethrobi November 12, 2014 17:18

Hi Ido,

We tried the script but we're not able to make use of this for our specific needs.

We are unable to deploy tabbed dashboards as there's currently no way of putting them atop one another and applying a script that shows them one by one. This is a major feature for us as it has been extensively used on most of our reports. This has not been able to serve the purpose as we were able to do using the tabber script deployed in the earlier version.

We need to have an option for buttons or any other picker of sorts so that a user can select tab1, tab2, tab3 and so on for navigation through the various tabs, like we had in the earlier version.

Appreciate further input on this.

Regards,

Munene - Jethro Ltd

Nicholas Ranum November 14, 2014 22:31

I am attempting to do a widget filter from a click on a pivot table.

I have the click event working. I can read the text from the clicked pivot table cell. I then pass it to the code posted above and it works.

The problem is that when clicking a second cell, it is attempting to add the same filter again and it breaks.

What I need is the widget.metadata function that would update an existing filter rather than add a new one.

Eli November 23, 2014 17:12

// This example is for only one dashboard filter. If there are more filters, be sure to save the filters you wish to remain unmodified

// DASHBOARD FILTERS

var dashboardFilters = $$get(prism, "$ngscope.dashboard.filters.$$items");

// New JAQL

var newJaql = {jaql: {}};

newJaql.jaql = dashboardFilters[0].jaql;

// Make changes to your filter's JAQL

newJaql.jaql.filter.exclude.members.push('Omaha');

// Clear Existing Filters or Filter

prism.$ngscope.dashboard.filters.clear();

// Update With New Filter

prism.$ngscope.dashboard.filters.update(newJaql,{save:true, refresh:true});

Hendrik Venter July 10, 2019 04:54

Assuming this doesn't work with later versions of Sisense anymore (v7.3).

I tried implementing it but the drill event doens't work. Looked like a good solution - Ah well