Hi,
I created a widget that has an embedded widget (widget-data-table).
The widget shows a table (task_time_worked) and I added a dropdown-filter for filtering the list on table-field "worked_on". The filter looks like this:
My goal is that if I click a filter, the table from the embedded widget is refreshed automatically. But this does not work.
When I initially load the page, the table is shown:
When I then click a filter, it looks like this, without the correct data (yes I checked, there is data for that filter 😉 For example "this week" there should be 3 records on that list )
HTML-Code:
<div class="browse-content-container">
<div ng-class="data.isMobileApp ? 'browse-elevation-mobile': 'browse-elevation'">
<div class="box-header-title">
<h3 class="title-item">${My time worked}</h3>
</div>
<div class="box-header-title p-v-2">
<!-- Filter-Button und Dropdown-Menü hinzufügen -->
<div class="btn-group">
<button class="btn btn-secondary btn-lg" type="button">
Filter by date: {{ c.data.selectedFilter || 'All' }}
</button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" ng-click="c.data.applyFilter('Today')">Today</a>
<a class="dropdown-item" href="#" ng-click="c.data.applyFilter('This week')">This week</a>
<a class="dropdown-item" href="#" ng-click="c.data.applyFilter('This month')">This month</a>
<a class="dropdown-item" href="#" ng-click="c.data.applyFilter('Last week')">Last week</a>
<a class="dropdown-item" href="#" ng-click="c.data.applyFilter('Last month')">Last month</a>
<a class="dropdown-item" href="#" ng-click="c.data.applyFilter('This year')">This year</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" ng-click="c.data.applyFilter('All')">All</a>
</div>
</div>
</div>
<sp-widget ng-if="data.dataTableWidget" widget="data.dataTableWidget"></sp-widget>
</div>
</div>
Client script:
api.contoller = function($scope, spUtil, $location, spAriaFocusManager) {
var c = this;
$scope.c.data = $scope.c.data || {};
// Clicking the filter
$scope.c.data.applyFilter = function(filterOption) {
spUtil.update($scope, 'applyFilter', {
filterOption: filterOption
});
$scope.c.data.selectedFilter = filterOption;
};
//Clicking on a record in the table
$scope.$on('data_table.click', function(e, parms) {
var p = $scope.c.data.page_id || 'its_time_worked_record';
var s = {
id: p,
table: parms.table,
sys_id: parms.sys_id,
view: 'Time_worked_portal'
};
var newURL = $location.search(s);
spAriaFocusManager.navigateToLink(newURL.url());
});
}
Server script:
(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));
//$sp.getValue("filter") = "is dynamic - me" to show always only data from the user who loads the page
data.filterInput = $sp.getValue("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();
options.table = data.table;
options.fields = data.field_list;
options.o = data.o;
options.d = data.d;
options.filter = data.filter;
options.window_size = data.window_size;
options.view = data.view;
options.useInstanceTitle = true;
options.headerTitle = options.title;
options.show_breadcrumbs = true;
options.hide_header=true;
options.show_keywords=true;
// Function for applying filter
data.applyFilter = function(filterOption) {
switch (filterOption) {
case 'All':
data.filter = data.filterInput;
break;
case 'Today':
data.filter = "u_worked_onONToday@javascript:gs.beginningOfToday()@javascript:gs.endOfToday()^ORu_work_startONToday@javascript:gs.beginningOfToday()@javascript:gs.endOfToday()^" + data.filterInput;
break;
case 'This week':
data.filter = "u_worked_onONThis week@javascript:gs.beginningOfThisWeek()@javascript:gs.endOfThisWeek()^ORu_work_startONThis week@javascript:gs.beginningOfThisWeek()@javascript:gs.endOfThisWeek()^" + data.filterInput;
break;
case 'This month':
data.filter = "u_worked_onONThis month@javascript:gs.beginningOfThisMonth()@javascript:gs.endOfThisMonth()^ORu_work_startONThis month@javascript:gs.beginningOfThisMonth()@javascript:gs.endOfThisMonth()^" + data.filterInput;
break;
case 'Last week':
data.filter = "u_worked_onONLast week@javascript:gs.beginningOfLastWeek()@javascript:gs.endOfLastWeek()^ORu_work_startONLast week@javascript:gs.beginningOfLastWeek()@javascript:gs.endOfLastWeek()^" + data.filterInput;
break;
case 'Last month':
data.filter = "u_worked_onONLast month@javascript:gs.beginningOfLastMonth()@javascript:gs.endOfLastMonth()^ORu_work_startONLast month@javascript:gs.beginningOfLastMonth()@javascript:gs.endOfLastMonth()^" + data.filterInput;
break;
case 'This year':
data.filter = "u_worked_onONThis year@javascript:gs.beginningOfThisYear()@javascript:gs.endOfThisYear()^ORu_work_startONThis year@javascript:gs.beginningOfThisYear()@javascript:gs.endOfThisYear()^" + data.filterInput;
break;
default:
data.filter = data.filterInput;
}
};
data.dataTableWidget = $sp.getWidget('widget-data-table', options);
})();
Would be great if you can help me / have ideas.
Best regards
Dominik
