Sisense widget script: Hyperlink widget title

In this tutorial, we'll learn the process of adding a hyperlink to the title of a Sisense widget using script. This feature can be particularly useful when you want to link the widget to external resources, such as documentation, glossaries, or reference pages. Follow along as we walk through the steps to achieve this.

Step 1: Adding the widget script

Begin by opening your Sisense dashboard in the Edit mode. Locate the indicator widget for which you want to add the hyperlink. Add the following code into the widget's script editor.

widget.on('buildquery', function(se, ev) {
	
  // Get the widget title
  var widgetTitle = ev.widget.title;
	
  // Assign URL link
  var url ='https://sisense.dev/reference/js/';
	
  // Use the widget title as the url link text with proper formatting
  $(`widget[widgetid="${ev.widget.oid}"] .transput-holder`).empty().append(`<a href="${url}" target="_blank">${widgetTitle}</a>`);
  
  $(`widget[widgetid="${ev.widget.oid}"] widget-title`).empty().append(`<a href="${url}" target="_blank">${widgetTitle}</a>`);

});

Note: To add both hyperlink and tooltip to the widget title, use below code.

Refer this post for details on how to add tooltip to widget title.

widget.on('buildquery', function(se, ev) {
	
    // Get the widget title
    var widgetTitle = ev.widget.title;

    // Assign URL link to the glossary
    var url = 'https://sisense.dev/reference/js/';

    // Define the tooltip text
    var tooltip = 'Tooltip text here';

    // Insert the hyperlink with tooltip into the widget title
    $(`widget[widgetid="${ev.widget.oid}"] .transput-holder`).empty().append(`<a href="${url}" target="_blank" title="${tooltip}">${widgetTitle}</a>`);
    
    $(`widget[widgetid="${ev.widget.oid}"] widget-title`).empty().append(`<a href="${url}" target="_blank" title="${tooltip}">${widgetTitle}</a>`);

});

Step 2: Understanding the Code Logic

The widget.on('buildquery', function(se, ev) {...}) event handler allows you to manipulate the widget's behavior before the query is built.

Then we retrieve the widget title and assign it to the widgetTitle variable.

You'll need to replace url with the actual URL you want to link to. This URL could point to documentation, glossaries, or any other relevant resource.

The code uses jQuery to insert an anchor (<a>) tag with the specified URL into both the widget's title area and the widget's content area.

Step 3: Applying the Changes

After adding the script, click "Save" to apply the changes and refresh the widget. Now, your widget's title will be hyperlinked to the provided URL.

This enhancement allows you to seamlessly connect your dashboard viewers to external resources, providing them with quick access to additional information. Experiment with different URLs and customize the hyperlink text to suit your dashboard's context.

GitHub link : https://github.com/lekhamirjankar/Sisense-scripts