Announcement

Collapse
No announcement yet.

Change color for date field

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Change color for date field

    I have added a follow up field which is a datetime field. How can i make the color to red if the follow up date is past and green if the follow up date is future. I am using Espo CRM version 4.1.6.
    Please any suggestions ?

  • #2
    Go to the file client/src/views/fields/date.js and look for function called afterRender: function ()

    It should look like this bellow. Add green parts of the code and change fieldName to match your field name.

    Code:
    afterRender: function () {
        if (this.mode == 'edit' || this.mode == 'search') {
            this.$element = this.$el.find('[name="' + this.name + '"]');
    
            var wait = false;
            this.$element.on('change', function () {
                if (!wait) {
                    this.trigger('change');
                    wait = true;
                    setTimeout(function () {
                        wait = false
                    }, 100);
                }
            }.bind(this));
    
            var options = {
                format: this.getDateTime().dateFormat.toLowerCase(),
                weekStart: this.getDateTime().weekStart,
                autoclose: true,
                todayHighlight: true,
            };
    
            var language = this.getConfig().get('language');
    
            if (!(language in $.fn.datepicker.dates)) {
                $.fn.datepicker.dates[language] = {
                    days: this.translate('dayNames', 'lists'),
                    daysShort: this.translate('dayNamesShort', 'lists'),
                    daysMin: this.translate('dayNamesMin', 'lists'),
                    months: this.translate('monthNames', 'lists'),
                    monthsShort: this.translate('monthNamesShort', 'lists'),
                    today: this.translate('Today'),
                    clear: this.translate('Clear'),
                };
            }
    
            options.language = language;
    
            var $datePicker = this.$element.datepicker(options).on('show', function (e) {
                $('body > .datepicker.datepicker-dropdown').css('z-index', 1200);
            }.bind(this));
    
            if (this.mode == 'search') {
                var $elAdd = this.$el.find('input[name="' + this.name + '-additional"]');
                $elAdd.datepicker(options).on('show', function (e) {
                    $('body > .datepicker.datepicker-dropdown').css('z-index', 1200);
                }.bind(this));
                $elAdd.parent().find('button.date-picker-btn').on('click', function (e) {
                    $elAdd.datepicker('show');
                });
            }
    
            this.$element.parent().find('button.date-picker-btn').on('click', function (e) {
                this.$element.datepicker('show');
            }.bind(this));
    
    
            if (this.mode == 'search') {
                var $searchType = this.$el.find('select.search-type');
                this.handleSearchType($searchType.val());
            }
    
    [COLOR=#008000][B]    // style field based on it's name and date
            if (this.name == 'fieldName') {
                this.$element.on('change', function () {
                    if (new Date($(this).data('datepicker').getFormattedDate('yyyy-mm-dd')).getTime() > new Date().getTime()) {
                        $(this).css('background-color', 'green').css('color', 'white');
                    } else {
                        $(this).css('background-color', '#990000').css('color', 'white');
                    }
                })
            }[/B][/COLOR]
    
        } else {
    
    [COLOR=#008000][B]// style field based on it's name and date
            if (this.name == 'fieldName') {
                var value = this.model.get(this.name);
                var field = $('div.field[data-name="' + this.name + '"]');
                if (new Date(value).getTime() > new Date().getTime()) {
                    field.addClass('text-success');
                } else {
                    field.addClass('text-danger');
                }
            }[/B][/COLOR]
    
        }
    },

    Comment


    • newinshappi3
      newinshappi3 commented
      Editing a comment
      It worked in the detailed view. can it be applied in the list view also ?

  • #3
    Replace code in else statement with this one:

    Code:
    if (this.name == 'fielName') {
        var value = this.model.get(this.name), field;
        if (this.mode == 'list') {
            field = $('td.cell[data-name="' + this.name + '"] span');
        } else {
            field = $('div.field[data-name="' + this.name + '"]');
        }
        if (new Date(value).getTime() < new Date().getTime()) {
            field.addClass('text-success');
        } else {
            field.addClass('text-danger');
        }
    }

    Comment


    • newinshappi3
      newinshappi3 commented
      Editing a comment
      this code is changing colour of all the fields in the column to red

  • #4
    I have modified the field id to each row id

    Code:
    // style field based on it's name and date
    if (this.name == 'followUp') {
        var value = this.model.get(this.name), field;
        if (this.mode == 'list') {
            field = $('tr.list-row[data-id="' +this.model.id+ '"]>td.cell[data-name="' + this.name + '"]');
        } else {
            field = $('div.field[data-name="' + this.name + '"]');
        }
        if (new Date(value).getTime() < new Date().getTime()) {
            field.addClass('text-danger');
        } else {
            field.addClass('text-success');
        }
            }
    //end
    The result is

    Click image for larger version

Name:	crm.png
Views:	0
Size:	4.7 KB
ID:	43324

    Thank you very much egi.zaberl
    Last edited by newinshappi3; 11-12-2018, 07:16 AM.

    Comment


    • #5
      Glad to help

      Comment


      • #6
        Hi egi.zaberl,

        We need exactly what newinshappi3 needed but for a date-time field. We found the file client/src/views/fields/datetime.js but haven't been able to set to red the past dates of our field called "seguimientoLead".

        We have added the following green code inside datetime.js but haven't been able to make it work:

        Code:
         afterRender: function () {
        Dep.prototype.afterRender.call(this);
        
        if (this.mode == 'edit') {
        var $date = this.$date = this.$element;
        var $time = this.$time = this.$el.find('input.time-part');
        this.initTimepicker();
        
        this.$element.on('change.datetime', function (e) {
        if (this.$element.val() && !$time.val()) {
        this.setDefaultTime();
        this.trigger('change');
        }
        }.bind(this));
        
        var timeout = false;
        var changeCallback = function () {
        if (!timeout) {
        this.trigger('change');
        }
        timeout = true;
        setTimeout(function () {
        timeout = false;
        }, 100)
        }.bind(this);
        $time.on('change', changeCallback);
        }
        
        
        [B][COLOR=#27ae60]// style field based on it's name and date
        if (this.name == 'seguimientoLead') {
        this.$element.on('change', function () {
        if (new Date($(this).data('datepicker').getFormattedDate(' yyyy-mm-dd')).getTime() > new Date().getTime()) {
        $(this).css('background-color', 'green').css('color', 'white');
        } else {
        $(this).css('background-color', '#990000').css('color', 'white');
        }
        })
        }
        
        } else {
        
        // style field based on it's name and date
        if (this.name == 'seguimientoLead') {
        var value = this.model.get(this.name);
        var field = $('div.field[data-name="' + this.name + '"]');
        if (new Date(value).getTime() > new Date().getTime()) {
        field.addClass('text-success');
        } else {
        field.addClass('text-danger');
        }
        }[/COLOR][/B]
        
        },
        Can you PLEASE check?

        Thanks a lot.

        Comment

        Working...
        X