How to switch between saved filters in portal widget?

[charliesdev]

I would like to have a data table widget that the user can filter - that also has a base filter.

For instance allow them to see data changed last week or 2 weeks ago, but only data they have changed.

I started with cloning the Data Table From Instance (with filter on) and adding a filter string in the options.  Initially it works great, but when the user edits the filter - it replaces the filter built into the options.  I would like it to add the filters together.

The other idea is to have buttons on the page, each one representing a predefined query.  When a user clicks a button, the corresponding filter is applied to the table widget.  But I cannot figure how to let the (what seems like 4 nested) widgets know about the filter and have it applied to the table properly.

Last idea I had was to use the data Table From URL, but it would be on a page with at least 2 other widgets, would that even work?

I'm also open to other ideas, thanks for your time.

[Mike Patel]

on your widget 

Server script add something like

var activeFilter = "active=true^locked_out=false";
var storefi = activeFilter;

than change the filter to something like below

// Setup data tables
var all_active = {
"table": "sys_user",
"view": "mobile",
"fields": "first_name,last_name",
"show_keywords": "true",
"o": "first_name", // order_by
"d": "asc",
"filter": activeFilter,
"storef": storefi
};

[charliesdev]

Hi Mike, thanks for looking at this.  What I tried is similar to what you are suggesting - my var is 'widgetParams'.  But I cannot get the new filter applied to the data table after it is initialized.  (see commented error in server script 'cannot set property "filter" of undefined...')

I cloned Data Table From Instance, here are my modifications:

HTML:

<button ng-click="clickedThis()">
  this
</button>
<div>
  <div class="alert alert-danger" ng-if="data.invalid_table">
    ${Table not defined} '{{data.table_label}}'
  </div>
  <sp-widget ng-if="data.dataTableWidget" widget="data.dataTableWidget"></sp-widget>
</div>

Client:

function ($scope, spUtil, $location, spAriaFocusManager) {
	$scope.$on('data_table.click', function(e, parms){
		var p = $scope.data.page_id || 'form';
		var s = {id: p, table: parms.table, sys_id: parms.sys_id, view: 'sp'};
		var newURL = $location.search(s);
		spAriaFocusManager.navigateToLink(newURL.url());
	});
	
	$scope.clickedThis = function(){
		$scope.data.operation = "doThis";
		spUtil.update($scope).then(function(response){
			//var a=0;
		});
	}
}

Server:

(function(){
	/*  "use strict"; - linter issues */
	// populate the 'data' object
	var sp_page = $sp.getValue('sp_page');
	var pageGR = new GlideRecord('sp_page');
	pageGR.get(sp_page);
	data.page_id = pageGR.getValue("id");
	$sp.getValues(data);
	if (data.field_list) {
		data.fields_array = data.field_list.split(',');
	} else {
		data.field_list = $sp.getListColumns(data.table);
	}

	if (input) {
		data.p = input.p;
		data.o = input.o;
		data.d = input.d;
		data.q = input.q;
	}
	data.p = data.p || 1;
	data.o = data.o || $sp.getValue('order_by');
	data.d = data.d || $sp.getValue('order_direction');

	data.page_index = (data.p - 1);
	data.window_size = $sp.getValue('maximum_entries') || 10;
	data.window_start  = (data.page_index * data.window_size);
	data.window_end = (((data.page_index + 1) * data.window_size));
	data.filter = $sp.getValue("filter");

	//////////////////
	if(input && input.operation == "doThis"){
		//data.filter = 'u_active=true'; no
		widgetParams.filter = 'u_active=true';// error 'Cannot set property "filter" of undefined to "u_active=true"'
	}
	console.log('****  filter is: ' + data.filter);
	/////////////////

	var gr = new GlideRecordSecure(data.table);
	if (!gr.isValid()) {
		data.invalid_table = true;
		data.table_label = data.table;
		return;
	}
	data.table_label = gr.getLabel();

	var widgetParams = {
		table: data.table,
		fields: data.field_list,
		o: data.o,
		d: data.d,
		filter: data.filter,
		window_size: data.window_size,
		view: 'sp',
		headerTitle: options.title,
		show_breadcrumbs: true,
		enable_filter: true
	};
	data.dataTableWidget = $sp.getWidget('widget-data-table', widgetParams);
})();

[Mike Patel]

This is my script and works fine

(function(){
	
	var activeFilter = "active=true";
	var storefi = activeFilter;
	
	// Setup data tables
	var all_active = {
		"table": "sys_user",
		"view": "mobile",
		"fields": "first_name,last_name",
		"show_keywords": "true",
		"o": "first_name", // order_by
		"d": "asc",
		"filter": activeFilter,
		"storef": storefi
	};
	data.all_active = $sp.getWidget("widget-data-table", all_active);
})();

[charliesdev]

I changed the title of the question to clarify things.  I can set the initial filter for the widget - I just can't change it to a different, stored filter.