Quickie: Change values in table cells

In a table I have a calculated field that result in either 0 or 1. When scrolling down, because of the mass of data it is hard to see where the differences are. With a small javascript function I can change the values and highlight differences better. I show the result and the javascript code needed for it.

Standard Table View

I have blurred out confidential data which is not relevant for this sample

Did YOU notice the records having is_expired == 1?

Modified Table View

Check for yourself if you can identify the highlighted records faster now:

Did you notice them now?

Javascript Code

Are you interested in the source code?

// file: hooks/TABLENAME-tv.js
jQuery(function () {
  var options = {
    tn: "orders",
    cn: "is_expired",
    if: [
            { value: 1, text: 'Expired', icon: 'remove', class: 'danger', rowClass: 'danger' },
            { value: 0, text: 'Valid', icon: 'ok', class: 'success' },
    ]
  }
  autoHighlight(options);
});

function autoHighlight(options) {
  const tn = options.tn ?? AppGini.currentTablename();
  options.if.forEach(condition => {
    const elements = $j("tr[data-id][data-id!=''] > td." + tn + "-" + options.cn + ":contains(" + condition.value + ")")
      .addClass("text-center")
      .html($j('<span/>').addClass('label label-' + condition.class).text('').append($j('<i/>').addClass("glyphicon glyphicon-" + condition.icon)).append(" " + condition.text));
        if (condition.rowClass != undefined) elements.closest("tr[data-id]").addClass(condition.rowClass);
  });
}

Options

• tn Table Name
• cn Column Name
• if
  array of conditions and settings for modifying the cell
  • value
    Every cell is checked. If the content of the cell matches value, the cell is formatted
  • text
  • icon
    Glyphicon name (without prefix)
  • class
    CSS class for the cell
    for example info, success, warning, danger or your own custom class
  • rowClass
    CSS class for the row
    for example info, success, warning, danger or your own custom class

Summary

From my point of view this is much better having those red highlighted rows and indicators. I am considering including such a feature in the next version of our AppGini Helper Javascript Library