{{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 < 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
Further Reading
Using Javascript in Workflow Forms