HOWTO: make buttons/comboxes be readable in a tableview

Classic Servoy
1

There is an issue on the Mac when you are using comboboxes or buttons in a table view. When you select a row then these objects become unreadable because the text turns white as it would with a normal field.

The text becomes white because the highlight color is too dark and therefore the LAF will switch the text from black to white.
You could of course use a lighter row color to work around this problem but that is a workaround.
Since a couple of versions in Servoy the rowBGCcolorCalculation event will pass the type of object a column is so you can act accordingly. So we could have a method that would give a different row color back when the element is a button or a combobox.
The following method does exactly that.

/**
 * Calculate the row background color.
 *
 * @param {Number} index row index
 * @param {Boolean} selected is the row selected
 * @param {String} elementType element type
 * @param {String} dataProviderID element data provider
 * @param {String} formName form name
 * @param {JSRecord} record selected record
 * @param {Boolean} edited is the record edited
 *
 * @returns {Color} row background color
 *
 */
function calculateRowBGColor(index, selected, elementType, dataProviderID, formName, record, edited) {
	var color = "#FFFFFF";
	if ( selected ) {
		// The selected row
		if ( edited ) {
			color = "#ffffff"; // field is edited, use your favorite editable field background color 
		} else if ( application.getOSName() == "Mac OS X" && 
				forms[formName].controller.view == 3 && 
				(elementType == "COMBOBOX" || elementType == "BUTTON") ) {
			color = "#FFFFFF"; // or use your favorite (light) color that keeps the combobox/button text black and readable. 
		} else {
			color = "#0000FF"; // or use your favorite highlight color
		}
	} else if ( index%2 == 0 ) {
		// even row color
		color = "#EDF3FE";
		// odd row will use the standard color defined at the top of this method
	}
	return color;
}

You can simply attach this global method to any (listview/tableview) form in your solution that you want to use it on.
The code will know if the form is a table view or not so it will only apply the exception on table views.
It will also know if you are on a Mac so other platforms won’t see this behavior.
This is the result:

And here when you edit a field:

Enjoy!

2

Great tip for all Mac users!

3

Wonderfull! :-)

4

Here is an updated method that makes the background color of the button and combobox match up with the odd/even row color (these are usually very light).
And all the color codes are now in variables.

function calculateRowBGColor(index, selected, elementType, dataProviderID, formName, record, edited) {
    var selectColor    = "#0000FF",
        oddRowColor    = "#FFFFFF",
        evenRowColor   = "#EDF3FE",
        editFieldColor = "#FFFFFF";
    if ( selected ) {
        if ( edited ) {
            return editFieldColor; 
        } else if ( application.getOSName() == "Mac OS X" && 
                forms[formName].controller.view == 3 && 
                (elementType == "COMBOBOX" || elementType == "BUTTON") ) {
            if ( index%2 == 0 ) {
                return evenRowColor;
            } else {
                return oddRowColor;
            }
        } else {
            return selectColor;
        }
    } else if ( index%2 == 0 ) {
        return evenRowColor;
    } else {
        return oddRowColor;
    }
}