Concept Demo – ListSelect Filtering (Part Two)

{{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.

listfilter2
I’m behind a bit on security patches.

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


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s