Advanced (JS): Color code your drop down edit fields
The following JS code will color code your Edit Fields (drop downs) within a listing page. The code uses the afterRender() event (after the table is drawn) to find each select and color each option. Modify the getColor() function to provide your own colors for each possible value in the drop down.
Add the following code to the General Settings > Closing Content of the page containing the Data Table.
<script>
jQuery(document).ready(function() {
workFlow.curPage.layoutTemplate.styleInstance.afterRender = function() {
var getColor = function(val) {
var color = '#FFFFFF';
switch (val) {
case 'UNDER REVIEW':
color = '#fffcc7';
break;
case 'OUT FOR QUOTE':
color = '#c7e0ff';
break;
case 'WAITING ON REQUESTER TO PROVIDE MORE INFORMATION':
color = '#fff2f4';
break;
case 'WAITING ON RESPONSE FROM VENDOR':
color = '#FCD2D9';
break;
case 'WAITING ON A PO BEFORE ORDERING':
color = '#ff878d';
break;
case 'RELEASED FOR APPROVAL':
color = '#dfffd4';
break;
}
return color;
}
var selects = $('select.form-control');
selects.each(function(el) {
var instance = $(this);
if (instance[0].id.indexOf('widget') > -1) {
var options = $('option', instance);
options.each(function(el) {
var option_instance = $(this),
val = option_instance.val();
option_instance.css('background-color', getColor(val))
});
instance.change(function(event) {
var t = $(this);
var color = t.find('option:selected').css('background-color');
t.css('background-color', color)
});
var color = instance.find('option:selected').css('background-color');
instance.css('background-color', color)
}
})
return true;
}
})
</script>
Have more questions? Submit a request
-
Logiforms Help Is there a way to do this with drop downs on regular form pages?
-
Clinton Tu Hi Tim,
Yes, you could modify this JS to run on a form and attach it to the form action > custom JS action:
// This function will receive the field and form objects.
function(field,form){
//get color function
var getColor = function(val) {
var color = '#FFFFFF';
switch (val) {
case 'BC':
color = '#fffcc7';
break;
case 'AB':
color = '#c7e0ff';
break;
}
return color;
}
// find the drop down
var selects = form.getFieldByName('Province').getEl();
selects.each(function(el) {
var instance = $(this);
var options = $('option', instance);
options.each(function(el) {
var option_instance = $(this),
val = option_instance.val();
option_instance.css('background-color', getColor(val))
});
instance.change(function(event) {
var t = $(this);
var color = t.find('option:selected').css('background-color');
t.css('background-color', color)
});
var color = instance.find('option:selected').css('background-color');
instance.css('background-color', color)
})
}
Please sign in to leave a comment.
2 Comments