Embedded (data table) widget is not refreshing after button clicking

[Rajeshkumar1]

Business:

My business is I have one button in "data table from instance definition" widget named as "Active" button, Whenever I click that button I need to show only active records, I am a beginner of service portal, So only I starting with basic works.

Issue:

Whenever I try to pass the filter condition via client side, That time the widget showing info message like"No records in".

Use the following image for reference:

I have found the root cause of the issue, But I still cannot able to find the solution for this. 

The root cause of the issue:

The embedded widget is not refreshing. (Here embedded widget is "widget-data-table")

data.dataTableWidget = $sp.getWidget('widget-data-table', widgetParams);

The embedded widget is only working one time. If you try and refresh the widget via the server it returns an empty data model.

The following scripts for your reference:

Client script:

var c = this;

$scope.activeRecord = function(){

c.data.filter ="active=true"
c.server.update();

spUtil.get("widget-data-table", answer).then(function(response) {

c.data.dataTableWidget = response;

});

}

Server script:

data.filter = input.filter;

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: options.view,
title: options.title,
show_breadcrumbs: false,
show_keywords: true
};
data.dataTableWidget = $sp.getWidget("widget-data-table", widgetParams);

})();

Html:

  <sp-widget ng-if="data.dataTableWidget"  widget="data.dataTableWidget"></sp-widget>

[Rajeshkumar1 · Accepted solution]

The following script is worked as I expected. We need to call the server side object into the client side using var params = $scope.data.widgetParams; [data.widgetParams], We can get the embedded widget using spUtill.get and we can send the response to that specific widget. 

Client script:

var c = this;

$scope.activeRecord = function(){

var params = $scope.data.widgetParams;

params.filter = "active=true";
spUtil.get('data_table_1',params).then(function(response){
$scope.data.dataTableWidget = response;
})

}

Server script:

var widgetParams;

data.table_label = gr.getLabel();
data.widgetParams = {
table: data.table,
fields: data.field_list,
o: data.o,
d: data.d,
filter: data.filter,
window_size: data.window_size,
view: options.view,
title: options.title,
show_breadcrumbs: false
};
//gs.addInfoMessage("Filters"+data.widgetParams.filter);



//data.dataTableWidget = $sp.getWidget("data_table_1", widgetParams);

data.dataTableWidget = $sp.getWidget('data_table_1', data.widgetParams);

//data.dataTableWidget = $sp.getWidget('data_table_1', {filter: widgetParams.filter});

})();

[Ravi Prakash Ro]

Hi Rajesh,

I have also similar requirements and i am facing same issue. On load of page filter is working fine but on clicking on other value, it is not setting filter.

Data table throws 'No Records in' message. I am trying to display articles within knowledge category on portal on click of article category. I am using data table from instance widget.

Please find below widget code:-

HTML:-

<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" c.activeRecord()></sp-widget>

</div>

Server Script:-

(function(){
/* "use strict"; - linter issues */
// populate the 'data' object
var widgetParams;
var sp_page = $sp.getValue('sp_page');
var pageGR = new GlideRecord('sp_page');
pageGR.get(sp_page);
data.page_id = pageGR.id.getDisplayValue();
$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.category = input.category;
data.p = input.p;
data.o = input.o;
data.d = input.d;
data.q = input.q;

}
else
data.category = $sp.getParameter("kb_category");

//var cat = input.category.toString();
gs.addInfoMessage("Category selected server " +data.category);


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");
//gs.addInfoMessage("filter " + $sp.getValue("filter"));



var gr = new GlideRecordSecure(data.table);
if (!gr.isValid()) {
data.invalid_table = true;
data.table_label = data.table;
return;
}
var id = data.category.toString();
gs.addInfoMessage("Category selected server2 " +id);
data.table_label = gr.getLabel();

data.filter = 'kb_category.sys_id='+id;
gs.addInfoMessage('filter '+ data.filter);

data.widgetParams = {
table: data.table,
fields: data.field_list,
o: data.o,
d: data.d,
filter: data.filter,
//query: 'kb_category'+id,
window_size: data.window_size,
view: 'sp',
title: options.title,
show_breadcrumbs: false

};
data.dataTableWidget = $sp.getWidget('widget-data-table', data.widgetParams);
})();

Client controller:-

function ($scope, $rootScope, spUtil, $location, spAriaFocusManager, spKBCategoryService) {

var c = this;

var removeListener = spKBCategoryService.addListener(function(catId) {
c.data.category = catId;
c.data.items = null;
c.server.update();
});
$scope.activeRecord = function(){

var params = $scope.data.widgetParams;
//params.filter = '$scope.data.category.sys_id=c.data.category';
spUtil.get('widget-data-table',params).then(function(response){
$scope.data.dataTableWidget = response;
spUtil.update($scope);
});
};
// spUtil.get("widget-data-table", answer).then(function(response) {

// c.data.dataTableWidget = response;

// });
}

From where ''$scope.activeRecord'' function should be called as in my case i am using data table instance widget so i need to send only parameter to data table widget.

for 1st time it is setting correct filter and showing list of articles within the clicked category.

I am new to service portal. Could you please help me here . 

Thanks a lot in advance!

Ravi Roy

[Swaroop1]

Awesome, this saved me

[lss123]

Hope this helps someone else, I struggled with this for a while but stumbled up this solution.  I wanted to refresh the list of records in the data table with an event, so I just added this line of code to my client controller and the record list refreshed automatically:

$scope.$broadcast('widget-filter-breadcrumbs.queryModified', myEncodedQuery);