top of page

Filter Dropdown in Widget

Updated: Oct 21, 2024

Here is script to add filter dropdown to a widget. We can filter to a particular item by selecting an item from the list.




Steps:


  1. Create a Line/Column/Bar/Area/Pie chart

  2. Add below script to the widget and update the variable 'dimension' with name of dimension in the format "[Table Name.Column Name]". Items in this field will be displayed as button. Add the same column in widget filter pane and select one item in it.

  3. Save the script and refresh widget.



widget.on('processresult', function(se, ev){	
	ev.result.chart.spacing = [30, 20, 77, 20 ]
});
                        
var dimension = '[Records.Region]'

widget.on("domready", function(w){
		
	var chart = w.chart[0][Object.keys(w.chart[0])[0]].hc
	
	let items = getItemList(w).values;	
	let itemlist = Array.from(items, x=>x[0].data)
	
	let widgetFilter = widget.metadata.panels[3].items.find(el => el.jaql.dim == dimension)
	
	var chartContainer = $('.highcharts-container', element)
	
	var dropdownHTML = `<select style="padding: 5px 10px; background:#FFFFFF; border: 1px solid #c0c1c2; margin:2px 5px;" name="select" id="select-${w.oid}"></select>`
	chartContainer.before(dropdownHTML)
	
	$.each(itemlist, function(index, value){
		$(`#select-${w.oid}`).append(`<option value=${value}>${value}</option>`)
	})	
	
	chartContainer.height(chartContainer.height() - 77);
	
	var selecteValue = itemlist[0] 
	
	console.log(widgetFilter)
	
	if(widgetFilter && widgetFilter.jaql.filter && widgetFilter.jaql.filter.members)
		selecteValue = widgetFilter.jaql.filter.members[0]
		
		
	document.getElementById(`select-${widget.oid}`).value = selecteValue
	var select = document.getElementById(`select-${widget.oid}`);

	select.addEventListener('change', (e) => {
		console.log(e)
	  		var selectedItem = e.target.value
			widgetFilter.jaql.filter.members[0] = selectedItem
			widget.refresh();

	});

});


function runHTTP(jaql) {
  // Use $internalHttp service if exists
  const $internalHttp = prism.$injector.has("base.factories.internalHttp") ?
  prism.$injector.get("base.factories.internalHttp") : null;
  // Ajax configurations
  const ajaxConfig = {
    url: "/api/datasources/" + encodeURIComponent(jaql.datasource.title) + "/jaql",
    method: "POST",
    data: JSON.stringify(jaql),
    contentType: "application/json",
    dataType: "json",
    async: false
  };
  // Use $internalHttp service for v8.0.1+
  // else use default ajax request
  const httpPromise = $internalHttp ? $internalHttp(ajaxConfig, true) : $.ajax(ajaxConfig);

  // Return response
  return httpPromise.responseJSON;
};

function getItemList(widget) {
  const query = {
    "datasource": widget.datasource.title,
    "metadata": [
      {
        "jaql": {
          "dim": dimension,
          "filter": {
						"explicit": false,
						"multiSelection": true,
						"all": true
					}
        }
      }
    ]
  };
  return runHTTP(query);
}





3 commentaires

Noté 0 étoile sur 5.
Pas encore de note

Ajouter une note
Shnakepup
26 sept. 2024
Noté 5 étoiles sur 5.

Here's an updated version that adds an "All" option to the dropdown, and makes sure that it's the default selection if the dashboard is reloaded. This also incorporates the fix from my previous comment (about adding quotes so it can handle multi-word filter values). FYI - I used ChatGPT to help with modifying the code, and it's the one that inserted the various comments, so apologies if they're not accurate.


widget.on('processresult', function(se, ev){

ev.result.chart.spacing = [30, 20, 77, 20 ]

});

var dimension = '[Records.Region]'


widget.on("domready", function(w){

var chart = w.chart[0][Object.keys(w.chart[0])[0]].hc

let items = getItemList(w).values;

let itemlist = Array.from(items, x=>x[0].data)

let widgetFilter = widget.metadata.panels[3].items.find(el => el.jaql.dim == dimension)

var chartContainer = $('.highcharts-container', element)

// Create…


J'aime

Shnakepup
20 sept. 2024
Noté 5 étoiles sur 5.

Hello! The script seems to work as expected, but it looks like it breaks if you choose a filter value that has any spaces in it. For instance, it works fine if I select things like "Litigation" or "eDiscovery", since those are just one word, but if I pick "Employee Relations", the widget goes blank and says No Results. If I click into the widget and look at the filter, it appears the script set it to just the word "Employee" by itself (which isn't a valid option, thus why it shows no results). How can we update the script to handle filter values that have spaces in them?

J'aime
Shnakepup
25 sept. 2024
En réponse à

Figured it out on my own. For anyone else who comes across this in the future and has the same issue, here's how to fix it.


There's a specific part in the script where it's defining the options in the list. It looks like this (starting on line 21):


$.each(itemlist, function(index, value){

$(`#select-${w.oid}`).append(`<option value=${value}>${value}</option>`)

})


Do you see the part in the middle where it says value=${value}? You need to wrap that in quotes, i.e. value="${value}". Just the first one, not the other ${value} bit after. Here's the full code with the proper quotes in place:


$.each(itemlist, function(index, value){

$(`#select-${w.oid}`).append(`<option value="${value}">${value}</option>`)

})


After you make this update, the dropdown should work as expected, even if you select values that have…

Modifié
J'aime
BI Next Level white logo

BI Next Level is your trusted resource for BI customization, data solutions, and expert insights. Explore practical tips, scripts, and tutorials for tools like Sisense, Python, and SQL. Let’s transform your data into impactful insights together.

Quick Links
Connect with us
Copyright © 2024. All Rights Reserved. Designed, Developed & Maintained  by Intertoons
bottom of page