{{7/16/2015 Workflow 7.6 update — review this update for new info on this post.}}

I was able to work a bit more logic into the ListSelect filtering concept I demonstrated in a previous post.  This time, I’m filtering based on both a standard TextBox as well as a CheckBoxList component.

The filtering is done entirely in Javascript – the Workflow form never paths out, and the form doesn’t post.  I won’t go into low level detail, as this is meant to simply be a “hey look at what we can do in Workflow” post.  I’ll post the code, though.

As usual, feel free to snicker at my script.  I was unable to find anything useful on Google for what I was trying to do, so I had to do my best to work with what I know of Javascript, and my knowledge of that language is excessively poor.

---

Most of this is only pertinent snippets.

Body Onload:

//declarations
var bullList = document.getElementById('BulletinList');
var bullTable = bullList.firstElementChild;
var bullFilter = document.getElementById('BulletinFilter');
var bullSevList = document.getElementById('BulletinSeverity');

bullTable.setAttribute('id','BulletinTable');
bullFilter.setAttribute('oninput','filter()'); 
bullFilter.setAttribute('placeholder','Enter Filter String');
bullFilter.setAttribute('type','search');

var bullSevChecks = bullSevList.getElementsByTagName('label');


for (i=0; i < bullSevChecks.length; i++) {
var thisCheckId = bullSevChecks[i].htmlFor;
var thisCheck = document.getElementById(thisCheckId);
  thisCheck.setAttribute('onchange','filter()');
}

Form Script:

function filter() {
var bullList = document.getElementById('BulletinList');
var bullTable = bullList.firstElementChild;
var bullFilter = document.getElementById('BulletinFilter');
var panelTitle = document.getElementById('PanelTitle');
var adjustment = bullFilter.value.toLowerCase();
var ele;
var c = 0;
var vChecks = [];
var bullSevs = document.getElementById('BulletinSeverity');
var bullSevsLabels = bullSevs.getElementsByTagName('label');
var rowCount = 0;
for (var i = 0; i < bullSevsLabels.length; i++) {
var thisCheckBoxId = bullSevsLabels[i].htmlFor;
var thisCheck = document.getElementById(thisCheckBoxId);
if (thisCheck.checked) {
vChecks[vChecks.length] = bullSevsLabels[i].innerHTML.toLowerCase();
}
}
var matchString = vChecks.join('|');
if (matchString == '') {
matchString = 'NoValue';
}
for (var i = 0; i &lt; bullTable.rows.length; i++){
ele = bullTable.rows[i].innerHTML.replace(/<[^>]+>/g,"");
sevValue = bullTable.rows[i].querySelector('td > table > tbody > tr:nth-of-type(2) > td:nth-of-type(3)').innerHTML.toLowerCase();
if (ele.toLowerCase().indexOf(adjustment)>=0 && (sevValue.match(matchString))) {
bullTable.rows[i].style.display = '';
rowCount = rowCount + 1;
var c = c + 1;
if (c%2 == 0) {
bullTable.rows[i].style.backgroundColor = '#ffffff';
} else {
bullTable.rows[i].style.backgroundColor = '#f8eded';
}
} else {
bullTable.rows[i].style.display = 'none';
}
}
if (adjustment == '' && (matchString == '' || matchString == 'unclassified|low|moderate|important|critical')) {
panelTitle.innerHTML = 'Bulletins with vulnerable endpoints ([BulletinsResult.Count])'
} else {
panelTitle.innerHTML = 'Bulletins with vulnerable endpoints (' + rowCount + '/[BulletinsResult.Count]) (filtered)'
}
}

Yeah, it’s a mess.  One day I’ll learn decent Javascript convention and clean this stuff up.  I’ll try to put together a sanitized demo and post it soon, if there’s any interest.

---

Featured Components

TextBox

ListSelect

CheckBoxList

---

Further Reading

Live ListSelect Filtering

Using Javascript in Workflow Forms

Using CSS in Workflow Forms

---