Change the color of task records based on date_due

By
495 views

Looking for a solution to change the color of task records based on date_due in dashlet  listview on the home screen?

The solution is simple and can be achieved in four simple steps:

1.   Change type of date_due field to custom field

“date_due”  custom/modules/Tasks/clients/base/views/list/list.php

array(
‘name’ => ‘date_due’,
‘width’ => ’15’,
‘label’ => ‘LBL_LIST_DUE_DATE’,
‘type’ => ‘date_due’,
‘link’ => false,
‘enabled’ => true,
‘default’ => true,
),

2.   Add date_due custom field definition in Task Module

/modules/Tasks/clients/base/fields/date_due/date_due.js
/*
* Customize to add Overdue functionality
*/
({

    extendsFrom: ‘DateTimeComboField’,
overDue:false,
format: function(value) {
if (!value) {
return value;
}
value = app.date(value);
if (!value.isValid()) {
return;
}

// check for due date
if(typeof this.view.layout.name != ‘undefined’ && this.view.layout.name == ‘dashlet’){
var now = new Date(),
dateOver = new Date(value);
this.overDue =  dateOver < now;
}

if (this.action === ‘edit’ || this.action === ‘massupdate’) {
value = {
‘date’: value.format(app.date.convertFormat(this.getUserDateFormat())),
‘time’: value.format(app.date.convertFormat(this.getUserTimeFormat()))
};
} else {
value = value.formatUser(false);
}
return value;
},

})

3.   Add list.hbs in custom due_date field

custom/modules/Tasks/clients/base/fields/date_due/list.hbs
{{!–
/*
* customize to add overDue class for a field incase due date
*/
–}}
<div data-placement=”bottom” title=”{{#unless value}}{{#if def.placeholder}}{{str def.placeholder this.model.module}}{{/if}}{{/unless}}{{value}}” >
{{#if def.link}}<a href=”{{#if def.events}}javascript:void(0);{{else}}{{href}}{{/if}}”>{{value}}</a>{{else}}{{value}}{{/if}}
</div>

4.    Define new class in custom.less file

custom/themes/custom.less

.overDue{ background-color: red;}

 

Need Help? Get Free Consultation


captcha

Please leave this field empty.

Get in touch



captcha

Please leave this field empty.

Contact Information