Row background colour for groups of records

Servoy 4.x
OS X 10 .6.4

Hi all

I have some data being shown in a list view
Each row of data has a category of ‘A’, ‘B’, ‘C’ or ‘D’ etc etc
My categories are not limited to these and could flex to be a longer list over time

I have sorted the data by category so that I have a representative list of, for example:
A
A
B
B
C
C
C
D
D

Does anyone know of a way of alternating row colours but by category.

Thus all ‘A’ rows are white, then all ‘B’ rows are blue, then all ‘C’ rows are white, then all ‘D’ rows are blue and so on

Cheers
Harry

I have a few good examples here: http://servoyguy.com/code_repository/co … ound_color

For your specific example, its possible to do, but depends a bit on your categories. So will they always be in order? like A, B, then C, or does it skip letters sometimes, like A, then C?

Hi Scott

Thanks for the reply

I’ll check your website out

The categories are really an analogy for a sort order which takes in groups of records which have a common characteristic

It seemed easier to use A,B,C etc to describe it

So, the sort criteria will be a column in the table but it will never be in a strict alphanumeric sequence other than they will be sorted together and, staying with the A-Z example, there will therefore be gaps between the sort ‘category’

Cheers
Harry

I have an example of what you might want to see attached:
Is this what you mean? (this was done in 3.5.x)

Hi Tom

That is the effect that I want to achieve

You seem to have managed this through identifying colours against a static set of criteria

I need something which would recognise the sort order and work on each different sort break group - so it would be independent of the actual criteria itself and more attuned to the subsets created by the sort

Difficult even when I read this back to myself :?

Would you like to share the technique as I may be able to adapt it to work for me ?

Cheers
Harry

so you have to know on which dataprovider the foundset is sorted to know the bgcolor you want to set?
So something like this in a global method?

function rowBGColorCalculation(index, selected, elementType, dataProviderID, formName, record, edited) {
	var currentSort = record.foundset.getCurrentSort()

        xxxxx
}

@Harry,
here is the rowbgcolor_renewDate calculation. Modify of course for your use and if using Servoy 5 note the change in the API.

//2007.October.20
/*	
	Calc: rowbgcolor_renewDate
	@author T.Parry www.prospect-saas.biz
	@since 2007.Oct.20
	@version Servoy 3.5.12
Purpose: 
	checks the renew date and returns colour code for the background according to the aging from today.
	
	@param arguments[0] index
	@param arguments[1] selected
	@return String colour code for the background colour
	
	Modified 2010.July.06 to change colour for INACTIVE vs active.
*/	
var index    = arguments[0];
var selected = arguments[1];


var bgColourSelected = '#ffccff';//pink
var bgColour = bgColourSelected;
var recordSelected = ''

if ( contract_id == globals.current_contract_id) {
//	application.output('rowbgcolor_renewDate selected event: contract_id matches global. Index='  + index);
	return bgColour;
}
if (selected){
	recordSelected = 'selected record index = ' + index;
//	application.output('rowbgcolor_renewDate selected event: ' + recordSelected);
   return bgColour;
} else {
var bgColourQuote = '#cccccc';
bgColour = bgColourQuote;
var bgColourInactive = '#99ccff';//light blue

recordSelected = 'non selected record index = ' + index;
//application.output('rowbgcolor_renewDate selected event: ' + recordSelected);
//do nothing if it is a quote or if the renew_date is null
var status = utils.stringTrim(ess_contract_to_contract_status_types.contract_status_type);
if (status.equalsIgnoreCase('INACTIVE')){
	return bgColourInactive;
}
//the rest is for non INACTIVE status
if (is_quote || (renew_date == null)) {
	
	return bgColourQuote; 
}
var renewDate = new Date(renew_date.getFullYear(), renew_date.getMonth(), renew_date.getDate());
var renewDateFormatted = renewDate.toDateString();
var renewDateHtml_1 =  '<html><body bgcolor="';
var renewDateHtml_2 = '">';
var renewDateHtml_3 =  '</body></html>';
var renewFullYear = renewDate.getFullYear();
var renewYear = renewDate.getYear();
var renewMonth = renewDate.getMonth();
var renewDay = renewDate.getDate();
var nowDate = new Date();
//ignore the hours, minutes and ms for comparison
nowDate.setHours(0);
nowDate.setMinutes(0);
nowDate.setMilliseconds(0);
var nowFullYear = nowDate.getFullYear();
var nowYear = nowDate.getYear();
var nowMonth = nowDate.getMonth();
var nowDay = nowDate.getDate();
//var renew = renew_date;

//ignore the hours, minutes and ms for comparison
renewDate.setHours(0);
renewDate.setMinutes(0);
renewDate.setMilliseconds(0);


var bgColourGreen = '#00ff00';//green is default
var bgColourRed = '#ff0000';
var bgColourYellow = '#ffff00';
var bgColourOrange = '#ff9933';
bgColour = bgColourGreen;
var in30days   = new Date(nowFullYear, nowMonth, nowDay);
in30days.setDate(in30days.getDate() + 30);
var in60days   = new Date(nowFullYear, nowMonth, nowDay);
in60days.setDate(in60days.getDate() + 60);

if ( renewDate  <= nowDate ) {
// renew date earlier than today
	bgColour =  bgColourRed;
}
// renew date is in future so check for "early warning" period
//check for 30 days or less to go - Orange Alert
else if  ( renewDate <= in30days   ) {
		bgColour =   bgColourOrange;

}
//check for 30 days to 60 days
else if ( renewDate <= in60days  ) {
		bgColour =   bgColourYellow;

}
//if get here then must be more than 60 days to go - add additional colours here if needed


return bgColour;


}

I also need to color different records in a table view list.
For example:
I have a list of invoices. Some of them are ‘not payed’ and the others are ‘payed’.
To display this in the list in different colors, I have a global method for the rowBGColorCalculation property of the list:

function gm_rowBGcolor (index,select,typ,dataprovider,form,state) {
var row = ((index%2) == 0) ? 1:0;
if(select) {
return '#ffcc55';
}
else {
if(row == 1) {
switch(dataprovider) {
case 'column1':
if(payment > 0)
return 'green'
else
return 'red'
break;
case 'column2':
return 'blue';
break;
.
.
default:
break;
}
}
else {
if(row == 1) {
switch(dataprovider) {
case 'column1':
if(payment > 0)
return 'green'
else
return 'red'
break;
case 'column2':
return 'grey';
break;
.
.
default:
break;
}
}
}

The method is working well as expected, but when I scroll in the list, the color of column1 is displayed correct only when I click on the row.
How do I get the different colors displayed without clicking in the row and/or makeing an app.updateUI??

HI,
I know the code snippet is not fully described but I found a logic error on what you gave.
here is an amended version with some indentation and some comments.
Perhaps you could examine the part where I labeled it unreachable.

function gm_rowBGcolor (index,select,typ,dataprovider,form,state) {

var row = ((index%2) == 0) ? 1:0;//even or odd row
if(select) {
	return '#ffcc55';
}
else {//not selected
if(row == 1) {
switch(dataprovider) {
	case 'column1':
		if(payment > 0)
			return 'green'
		else
			return 'red'
		break;
	
	case 'column2':
		return 'blue';
	break;
//.
//.
	default:
	break;
	}//switch dataprovider
}//row == 1
else {//!row == 1 ie odd row
	if(row == 1) {//LOGIC HERE DOES NOT LOOK CORRECT - unreachable?
		switch(dataprovider) {
			case 'column1':
			if(payment > 0)
				return 'green'
			else
				return 'red'
			break;
		
			case 'column2':
				return 'grey';
				break;
		//.
		//.
		default:
		break;
		}//switch dataprovider
	}//!row == 1
}//!row == 1

}//not selected

}

Hi,

We filed a feature request in Februari 2009 for a ‘elementBGColorCalculation’ for dynamic row and column based access to the ui properties of a cell. (Case id 276015)

We want to have access to the element name of a column in table view form.

BTW : What (or who) makes a case public ?

Regards,

Hi Tom,

you are right, the code was a mistake. I’m sorry, but I had too less time and put it out of my head…
This is my real code for rowBGColor property:

function gm_cal_rowbgcolor_tp_auftrag(rowIndex,isSelected,fieldType,dataProvID,formName,state)
{
	var vOddEven = ((rowIndex%2) == 0) ? 1 : 0;
	if (isSelected) {
		return '#ffc885';
	}
	else {
		if (vOddEven == 1) {
			switch(dataProvID){
			case "column1":
				if(payment > 0)
					return '#5FC3FF';
				else
					return '#FFAF78';
				break;
			case "column2":
				return '#5FAFFF';
				break;
			case "column3":
				return '#5FAFFF';
				break;
			case "column4":
				return '#5FAFFF';
				break;
			case "column5":
				return '#5FAFFF';
				break;
			case "column6":
				return '#5FAFFF';
				break;
			case "column7":
				return '#5FAFFF';
				break;
			case "column8":
				return '#5FAFFF';
				break;
			default:
				break;
			}
		}
		else {
			switch(dataProvID){
			case "column1":
				if(payment > 0)
					return '#9BCDFF';
				else
					return '#FFA573';
				break;
			case "column2":
				return '#9BCDFF';
				break;
			case "column3":
				return '#9BCDFF';
				break;
			case "column4":
				return '#9BCDFF';
				break;
			case "column5":
				return '#9BCDFF';
				break;
			case "column6":
				return '#9BCDFF';
				break;
			case "column7":
				return '#9BCDFF';
				break;
			case "column8":
				return '#9BCDFF';
				break;
			default:
				break;
			}
		}
	}
}

Is there any other option to set a different bg_color to a column in a row on table view?

Hi Thomas, I refactored it a little and made some constants at the top so as I could understand the codes later. I also optimized a little as well.
Did you realize that the default parameter in v5.2.1 is “edited” now and not what you have (formName, state)?

/**
 * Calculate the row background color.
 *
 * @param {Number} rowIndex row index
 * @param {Boolean} selected is the row selected
 * @param {String} elementType element type
 * @param {String} dataProviderID element data provider
 * @param {Boolean} edited is the record edited
 *
 * @returns {Color} row background color
 *
 * @properties={type:12,typeid:36,uuid:"6925C5A3-E5F1-446C-A6D3-C78655E171BC"}
 */
function rowBGColorCalc_1(rowIndex, isSelected, fieldType, dataProvID, edited)
{
/*
 * This is from the servoy forum Thomas Schnaus http://www.servoy.com/forum/viewtopic.php?f=2&t=14521&sid=82459b1573463a7211035332c4bc26c5
 * 
 * function gm_cal_rowbgcolor_tp_auftrag(rowIndex,isSelected,fieldType,dataProvID,formName,state)
 */
var selected_colour = '#ffc885';
if (isSelected) {
   return selected_colour;
}

var non_selected_even_positive_colour = '#5FC3FF';
var non_selected_even_negative_colour = '#FFAF78';
var non_selected_even_default_colour = '#5FAFFF';
	
var non_selected_odd_positive_colour = '#9BCDFF';
var non_selected_odd_negative_colour = '#FFA573';
var non_selected_odd_default_colour = '#9BCDFF';

var vOddEven = ((rowIndex%2) == 0) ? 1 : 0;
if (vOddEven == 1) {
     switch(dataProvID){
     case "fee_monthly":
		if(fee_monthly > 0)
   			return non_selected_even_positive_colour;//not including 0.0
		else
   			return non_selected_even_negative_colour;
		break;
/*                
             case "column2":
                return '#5FAFFF';
                break;
             case "column3":
                return '#5FAFFF';
                break;
             case "column4":
                return '#5FAFFF';
                break;
             case "column5":
                return '#5FAFFF';
                break;
             case "column6":
                return '#5FAFFF';
                break;
             case "column7":
                return '#5FAFFF';
                break;
             case "column8":
                return '#5FAFFF';
                break;
*/
          default:
          	 return non_selected_even_default_colour;
             break;
          }
        } else {//vOddEven == 1)
             switch(dataProvID){
             case "fee_monthly":
                if(fee_monthly > 0)
                   return non_selected_odd_positive_colour;//not including 0.0
                else
                   return non_selected_odd_negative_colour;
                break;
/*                
             case "column2":
                return '#9BCDFF';
                break;
             case "column3":
                return '#9BCDFF';
                break;
             case "column4":
                return '#9BCDFF';
                break;
             case "column5":
                return '#9BCDFF';
                break;
             case "column6":
                return '#9BCDFF';
                break;
             case "column7":
                return '#9BCDFF';
                break;
             case "column8":
                return '#9BCDFF';
                break;
*/ 
             default:
            	 return non_selected_odd_default_colour;
                break;
             }
          }
    }

I tested this and did not see any errors.
I am not aware of any other way to set the background colour (unless the dataprovider is done via html I suppose)

Hi Tom,

the code for the different bgcolor of a column in a row of table view list is working. But only the displayed rows in the list on application.showForm(). The application window is not updating while scrolling through the list. Only a click on a row changes the bgcolor, but the effect is not always correct for the rows before and behind.
This is not workable for my customers solution!

Regards,
Thomas