Join the program

Conditional Format Plug-in

Last Updated:
Follow

Introduction

Adding this plug-in to your kintone app allows you to change text color, background color, and text size depending on the values—or "conditions"—in the given field. This displays in both the record list and record detail views.

Record list view with conditional formatting

US_2.PNG

Record details view with conditional formatting

US_3.PNG

Installing the plug-in

Add the latest version of the conditional format plug-in to your app. Refer to kintone help for information about how to install a plug-in.
Adding a plug-in

Setting up the form

To set up the app form, use the following fields:

Format condition field

Choose which fields to evaluate. To evaluate strings and numbers, use "Text conditional format." To evaluate dates, use "Date conditional format." You can choose from the following field types:

  • Text Format Conditions:
    • String (single-line)
    • Numeric value
    • Calculation
    • Radio button
    • Drop down
    • Record number
    • String (multi-line)
    • Checkbox
    • Multi-choice
    • Status (Process management) (*Reflects the record list window only)

    US_1.PNG
  • Date Format Conditions:
    • Date
    • Date and time
    • Created on
    • Updated on

    date_format_conditions.png

Format target field

Choose the field that should have the formatting applied to it. It can be the same field you are evaluating or a different one. All the fields listed in the "Format condition field" can be selected.

Configuring the conditions

  1. From the app management window, open Settings > Plug-in and click the gear to access conditional format settings.
  2. Set up each field you want to apply formatting to.

Conditional formatting options

Note: Options in bold were are part of the 3/31/2017 update.

Option

Mandatory?

Description

Field with condition

Mandatory

Choose the field to evaluate. This can be the same as the target field, or different. If the value in this field meets the conditions you set, the target field will change its formatting.

Condition

Mandatory

The logical operator to use. You can choose if you want to change the format if the field is equal to, not equal to, etc. the value you set. If the value of the target field is a number, they are compared numerically.

Text format conditions:
  • Includes the condition value
  • Does not include the condition value
  • = (Equal to)
  • ≠ (Not equal to)
  • ≦ (Less than or equal to)
  • < (Less than)
  • ≧ (Greater than or equal to)
  • > (Greater than)

Date format conditions:

  • = (Equal to)
  • ≠ (Not equal to)
  • ≦ (Prior or equal to)
  • < (Prior to)
  • ≧ (Later than or equal to)
  • > (Later than)

Value

 

Enter the value to compare against the value of the field with the condition.

Text format conditions:
  • If the value of the target field is a number, they are compared numerically.

Date format conditions:

  • Enter the number of days to count from today as an integer and choose "prior or later" from the drop-down list.
  • To set the date to today, enter 0 (zero).

Field to Format

Mandatory

Choose the target field that will receive the formatting. If the conditions that you set up are met, this field will change color, font, style, etc.

Font color

 

Enter the hex value of the color for the target field.
You can also click the brush icon to use the color picker. Choose the color you want, and the hex code will be filled in automatically.

Background color

 

Enter the color code to set the target background color to. If you do not wish to change the background color, enter "#".
You can also click the brush icon to use the color picker. Choose the color you want, and the hex code will be filled in automatically.

Text size

 

Choose the text size of the target field. The following text sizes are supported:

  • No change
  • Small
  • Somewhat small
  • Somewhat large
  • Large

Text style

 

Choose the text style of the target field. The following styles are supported:

  • No change
  • Bold
  • Underline
  • Strikethrough

"+" button

 

Adds a new row below the selected row

"-" button

 

Deletes the selected row
  1. Click Save.
    Note: If required fields are missing when you click Save, the invalid configuration is deleted.
  2. Click Finish Setting to see the new formatting applied to your app.

Using the plug-in

  1. Add or update a record.
  2. The format of the target field will be changed in the record list window and record details window depending on the conditions you set.

Downloading the plug-in

Packaged plug-in

SAMPLE_conditionformat2_plugin_v3.2.3.zip

Updates

Date Update Notes
23rd May 2019 ver. 3.2.3
  • Updated the plug-in so that when a record is edited from the record list page, the conditional formatting is still applied.
17th October 2018 ver. 3.2.2
  • Updated plug-in description (Chinese only).
15th October 2018 ver. 3.2.1
  • Fixed a bug in which if a date field is entered as a condition in the plug-in settings and is empty in a record, the conditions that follow it are not applied.
20th July 2018 ver. 3.2.0
  • Changed the color picker so that it's not exclusive to Chrome and Firefox.
  • Changed some English labels.
8th August 2017 ver. 3.1.1
  • Minor updates

Restrictions

  • Not compatible with IE8.
  • Cannot be used on mobile.
  • If multiple conditions apply, the lower line takes precedence. Date condition formatting takes precedence over string condition formatting.
  • Conditional formatting on the record list page is only available for List views. It may not work for Calendar views or Custom views.

Notes

  • Conditional formatting is not guaranteed.
  • Support is not provided for this plug-in.
  • This plug-in performs DOM manipulation to change field formatting. The implementation may be affected by updates. Please use caution when using this sample as a reference.
Was this article helpful?
0 out of 0 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!