“Innovation comes from people who take joy in their work.”
— W. Edwards Deming
Since the day that I first touched the Data Table widget, I have somehow kept finding reasons to go back and tinker with it some more for one reason or another. While I was playing around with the buttons and icons feature that I added, I noticed that one of the other features that was present in the primary UI, but missing in the Service Portal Data Table widget, was the ability to select more than one row and perform some action on all of the selected rows. That got the little wheels spinning around inside of my head and I started trying to figure out just what it would take to implement that feature in my hacked up version of the stock widget. It seemed to me that you would need a number of things:
- A way to pass in one or more bulk actions as part of the configuration,
- A master checkbox in the headings that you could use to toggle all of the individual checkboxes off and on,
- A checkbox on every row,
- A select statement in the footer with the choices being all of the specified bulk actions, and
- Some client side scripts to handle the clicks on the master checkbox and the action selector.
We already pass in an Array of Buttons/Icons, so why not an Array of Bulk Actions? We should be able to copy most of that code wherever it lives, since this would pretty much be handled in the same way. Having at least one item in the Array could drive the visibility of the checkboxes and select statement, and as far as processing the Action is concerned, we could take the same approach that we took with the buttons and just broadcast the selected action and let some other widget deal with the actual response whenever a Bulk Action was clicked. It all seemed simple enough to give it a go, so I started hacking up the HTML, first for the master checkbox in the heading row:
<th ng-if="data.actarray.length > 0" class="text-nowrap center" tabindex="0">
<input type="checkbox" ng-model="data.master_checkbox" ng-click="masterCheckBoxClick();"/>
</th>
Then I did the same for the individual checkboxes in the data rows:
<td ng-if="data.actarray.length > 0" class="text-nowrap center" tabindex="0">
<input type="checkbox" ng-model="item.selected"/>
</td>
And then to finish out the HTML changes, I added an extra footer down at the bottom for the SELECT element:
<div class="panel-footer" ng-if="data.actarray.length > 0 && data.row_count">
<div class="btn-toolbar m-r pull-left">
<select class="form-control" ng-model="data.bulk_action" ng-click="bulkActionSelected();">
<option value="">${Actions on selected rows ...}</option>
<option ng-repeat="opt in data.actarray" value="{{opt.name}}">{{opt.label}}</option>
</select>
</div>
<span class="clearfix"></span>
</div>
That took care of the HTML. On the server-side code, I added a couple of new items to the comments explaining all of the various options, and then added the bulk actions to the list of things that get copied in:
* data.buttons = the JSON string containing the button specifications
* data.btnarray = the array of button specifications
* data.refpage = the JSON string containing the reference link specifications
* data.refmap = the reference link specifications object
* data.bulkactions = the JSON string containing the bulk action specifications
* data.actarray = the bulk actions specifications object
*/
// copy to data[name] from input[name] || option[name]
optCopy(['table', 'buttons', 'btns', 'refpage', 'bulkactions', 'p', 'o', 'd', 'filter',
'filterACLs', 'fields', 'field_list', 'keywords', 'view', 'relationship_id',
'apply_to', 'apply_to_sys_id', 'window_size', 'show_breadcrumbs']);
I also copied the code that converts the buttons string into the btnarray array and hacked it up to convert the bulkactions string into an actarray array,
if (data.bulkactions) {
try {
var actioninfo = JSON.parse(data.bulkactions);
if (Array.isArray(actioninfo)) {
data.actarray = actioninfo;
} else if (typeof actioninfo == 'object') {
data.actarray = [];
data.actarray[0] = actioninfo;
} else {
gs.error('Invalid bulk actions in SNH Data Table widget: ' + data.bulkactions);
data.actarray = [];
}
} catch (e) {
gs.error('Unparsable bulk actions in SNH Data Table widget: ' + data.bulkactions);
data.actarray = [];
}
} else {
data.actarray = [];
}
Over on the client side, I added two functions to the $scope, one for the master check box:
$scope.masterCheckBoxClick = function() {
for (var i in c.data.list) {
c.data.list[i].selected = c.data.master_checkbox;
}
};
… and one for the bulk action selection:
$scope.bulkActionSelected = function() {
if (c.data.bulk_action) {
var parms = {};
parms.table = c.data.table;
parms.selected = [];
for (var x in c.data.list) {
if (c.data.list[x].selected) {
parms.selected.push(c.data.list[x]);
}
}
if (parms.selected.length > 0) {
for (var b in c.data.actarray) {
if (c.data.actarray[b].name == c.data.bulk_action) {
parms.action = c.data.actarray[b];
}
}
$rootScope.$emit(eventNames.bulkAction, parms);
} else {
spModal.alert('You must select at least one row for this action');
}
}
c.data.bulk_action = '';
};
That took care of the root Data Table widget, but I still needed to do a little work on the SNH Data Table from URL Definition widget to pull our new query parameter down from the URL. That turned out to be just a simple addition to this line to add the new parameter name to the list of parameters to be copied:
copyParameters(data, ['p', 'o', 'd', 'filter', 'buttons', 'refpage', 'bulkactions']);
I also needed to copy the button code in the Content Selector widget to create similar code for the new bulk actions:
if (tableInfo[state].actarray && Array.isArray(tableInfo[state].actarray) && tableInfo[state].actarray.length > 0) {
s.bulkactions = JSON.stringify(tableInfo[state].actarray);
}
Now we can go into the ButtonTestConfig Script Include that we built the other day and add a couple of bulk actions so that we can test this out:
Now, let’s pull up our button_test page and see what we’ve got.
Not too bad … we have our master checkbox in the heading row, the individual check boxes in the data rows, and our bulk action selector in the new extra footer. Very nice. And we can even test for the requirement that you have to select at least one item by selecting an action without selecting any rows.
Well, that seems to work. The master checkbox also seemed to work as desired, and selecting a few rows and then selecting an action also seemed to work, but since there is currently no one listening on the other end, it’s kind of hard to tell if that actually did anything or not. Maybe we can modify our Button Click Handler Example widget to listen for bulk actions as well. Maybe add something like this:
$rootScope.$on('data_table.bulkAction', function(e, parms) {
displayBulkActionDetails(parms);
});
function displayBulkActionDetails(parms) {
var html = '<div>';
html += ' <div class="center"><h3>You selected the ' + parms.action.name + ' bulk action</h3></div>\n';
html += ' <table>\n';
html += ' <tbody>\n';
html += ' <tr>\n';
html += ' <td class="text-primary">Table: </td>\n';
html += ' <td>' + parms.table + '</td>\n';
html += ' </tr>\n';
html += ' <tr>\n';
html += ' <td class="text-primary">Action: </td>\n';
html += ' <td><pre>' + JSON.stringify(parms.action, null, 4) + '</pre></td>\n';
html += ' </tr>\n';
html += ' <tr>\n';
html += ' <td class="text-primary">Records: </td>\n';
html += ' <td><pre>' + JSON.stringify(parms.selected, null, 4) + '</pre></td>\n';
html += ' </tr>\n';
html += ' </tbody>\n';
html += ' </table>\n';
html += '</div>';
spModal.alert(html);
}
Let’s give that a whirl …
Beautiful. It all appears to work as intended. Clearly some additional testing is warranted, but it’s not bad for an initial effort. I think it’s good enough to release an Update Set with all of the code. Of course, now we have broken our new Content Selector Configuration Editor, since that was not built to handle bulk actions, but that’s a problem for another day.
