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 it's respective dashboard.

Note: that every image is referenced by use of it's description, according to the custom image widget, and it's 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 DashboardID,  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 hompage

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)