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
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?
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’
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 ?
@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:
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.
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.
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)
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!