Skip to content

How to decorate the text of items that match a condition in an Index

Answer

Please use "Server Script" and "Style".

Overview

This is a sample code that decorates the text color of the date (DateA) in the "Index" of Pleasanter if the date (DateA) is within one month (including the past). The text-decoration is specified in "Style".

Operation Image

Index where the date text is decorated on records whose DateA is within one month

Operation Procedure

  1. Create a table
  2. Create a new "Server Script" and write the following script. Check "Before row display" as the condition and update.
  3. Create a new "Style" and write the following code. Check "Index" as the output destination and update.
  4. From the "Editor", activate DateA according to the sample code below.
  5. Open a new record from the "Create New" button and enter today's date in DateA to create a record.
  6. Return to the "Index" and confirm that DateA is displayed in red.

Script

JavaScript
let now = new Date()
let limit = now.setMonth(now.getMonth() + 1);
if (model.DateA <= limit) {
   columns.DateA.ExtendedCellCss = 'alert-color';
}

Style

The method for specifying elements differs between versions prior to 1.4.20.0 and later versions.

after ver1.4.20.0

CSS
.grid td.alert-color {
   color: red;
   font-weight: bold;
}

before ver1.4.19.2

CSS
.alert-color {
   color: red;
   font-weight: bold;
}