In this post, we will learn how to create your own custom SiSenseWeb navigation portal. This homepage (differentiated from the original SiSenseWeb homepage), can guide your users to relevant dashboards.

Your users will be able to initially select a certain scope from the homepage filters, then drill to the respective dashboards while carrying the scope with them.

You can use your own custom images to act as the referencing links to their respective dashboards, and allow your users to select a certain scope which they'll be able to carry along to the target dashboard.

This post will depend on the image widget, available in the following link. In addition to the image widget, we will store our images in our own IIS by creating a virtual directory. This is explained in the second comment of the image widget post.

Following is an example of a homepage navigator, all images are stored in my local machine's IIS virtual directory, and are also attached to this post.

In the image following, we can click and browse to any of our 4 dashboards, and carry the scope of the 'Beverages' Category, and Q1 & Q2 of 1998.

Step 1 - Creating the Homepage parent and corresponding children

Firstly, create your children dashboards, according to your requirements. In this case, we are exploring our internal business' components.

Secondly, create your homepage.

Step 2 - The Homepage

By use of the image widget elaborated above and in the following  link, create several image widgets, each will act as a navigation button to its respective dashboard.

Note: that every image is referenced by the use of its description, according to the custom image widget, and its location in the virtual directory:

Step 3 - Linking the images to their corresponding dashboards

Place the following script in the image widgets' script:

widget.on('ready', function() {
	
	    $(element).on("click", function() {
        
		var filters = [];

        widget.dashboard.filters.flatten().forEach(function (f) { filters.push({ jaql: $$.object.clone(f.jaql, true) }); }); // get dashboard filters
        widget.metadata.filters().forEach(function (f) { filters.push({ jaql: $$.object.clone(f.jaql, true) }); }); // get widget filters
			
		var productDashboardId = "54bd793d42c8365426000022"; // target dashboard id
			
        window.location = "/app/main#/dashboards/"+productDashboardId + "?filter=" + encodeURIComponent(JSON.stringify(filters));
    });

})

Make sure to change the target DashboNote that this solution does not support dependent filters.
ardID,  this will be the value after 'dashboards/' within the target dashboard's URL.

Note: window.location will open the respective dashboard/link in the SiSenseWeb frame, while window.open will open a brand new tab in the browser.

Step 4 (optional)  - Create 'Back' images leading back to your homepage

By use of the same logic elaborated above,  have this image widget's script's dashboard to lead back to your homepage. 

Download:

homepage navigation.zip

See also:

• Image Widget (see also comments below which elaborate how to add images to a virtual directory and further design your dashboard)

Troubleshooting:

Below are some troubleshooting solutions to issues that may arise:

1. The script mentioned in step 3 might fail when you have no filters defined on your dashboard. In this case, use this script instead:

widget.on('ready', function() { $(element).on("click", function() {

  var filters = [];

  widget.dashboard.filters.flatten().forEach(function (f) { filters.push({ jaql: $$.object.clone(f.jaql, true) }); }); // get dashboard filters

  widget.metadata.filters().forEach(function (f) { filters.push({ jaql: $$.object.clone(f.jaql, true) }); }); // get widget filters

  var productDashboardId = "54bd793d42c8365426000022"; // target dashboard id

  if (filters.length !== 0) { 

      document.location = document.location.protocol+"//"+document.location.host+"/app/main#/dashboards/"+productDashboardId + "?filter=" + encodeURIComponent(JSON.stringify(filters));

  } else {

      document.location = document.location.protocol+"//"+document.location.host+"/app/main#/dashboards/"+productDashboardId

  }

    });

})

2. If using Internet Explorer to access Sisense, the URL might temporarily change to the dashboard to be navigated to before changing back to /app/main#/home. Main problem: Filters are sent as parameters in the address bar, and parameter length is different for IE and Chrome. The solution posted above uses event onClick(). Instead, here we will update the filters of the target dashboard.

1. Create an image widget as instructed here;
2. Set the path at the image (in the Image URL field), indicate the alignment and picture size: 
3. Apply the below script to the widget. Change the value of the parameter productDashboardId to the ID of the target dashboard (as instructed in the body of the solution above).

 Note that this solution does not support dependent filters.