はじめようJavaScript第14回 kintone JavaScriptカスタマイズのプログラム実例を学ぼう②（条件書式設定）

JavaScript 初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
   リニューアル後のチュートリアルは次のページを参照してください。
   はじめよう JavaScript

（著者：kintone エバンジェリスト 村濱 一樹）

題材: レコード一覧とレコード詳細画面で条件書式を設定する

今回は レコード一覧とレコード詳細画面で条件書式を設定する というサンプルプログラムについて学んでいきましょう。
kintone アプリは、kintone アプリストア にある「総務への依頼受付」を使っています。

データの条件に応じて書式を変更したいということはよくあるケースですし、for文とif文の両方を使う必要があるので、今までの腕試しも兼ねてみてみましょう。

プログラム

プログラムは下記です。少しずつピックアップして、内容を解説していきます。

全体の構成

今回のサンプルプログラムは大きく2つのパーツに分けて説明することができます。
一つ目は「レコード一覧画面の表示後イベント」、二つ目は「レコード詳細画面の表示後イベント」です。
それぞれのイベントにステータスごとに書式を変更する操作と、特定の文字と一致する時書式を変更する操作を設定しています。

• レコード一覧画面の表示後イベント　app.record.index.show

  「レコード一覧画面」が表示されたときに、以下の処理が実行されます。
  

• レコード詳細画面の表示後イベント　app.record.detail.show

  「レコード詳細画面」が表示されたときに、以下の処理が実行されます。
  

レコード一覧画面の表示後イベントのコード

レコード一覧画面の表示後イベントのコードは4つの工程に分けて考えることができます。

1. 変数宣言と初期化
2. for文を使ってレコード数の分繰り返し処理
3. switch文を使って「ステータス」の値に応じて文字の色を変更
4. if文を使って「Urgent」の値に応じて文字の色を変更

 1.変数宣言と初期化

コードの最初の方で、先にいくつか変数の宣言がされています。

• 背景色の指定

これは背景色を設定しています。 '#fff8dc' というのはカラーコードと呼ばれるもので、16進数(0-9, a-f)で #000000 〜 #ffffff まであります。
カラーコードは必要に応じて好きな値を指定できます。 （カラーコードとは） 

• 書式を変更したい部分のElement(要素)の取得

この行は、書式変更したい部分の要素(Element)を取得しています。

kintone.app.getFieldElements(フィールドコード) とすることで要素を取得して、この後のfor文で書式を変更していくような構成になっています。(リファレンス)

2.for文を使ってレコード数の分繰り返し処理

ここでは、すべてのレコードの書式を変更するために、繰り返し処理を使っています。

• for文の繰り返し条件

このfor文は「 elStatus 変数の配列の長さだけ繰り返す」という条件になっていますね。
elStatus 変数には先程取得した要素の配列がはいっているので、画面に表示されているレコード分だけ処理する、ということと同じになります。

 3.switch文を使って「ステータス」の値に応じて文字の色を変更

switch文というものを使って、条件分岐処理をしています。
条件分岐は、if文でもできるのですが、条件分岐が多いとswitch文のほうが見やすかったり整理しやすい場合もあるので、状況に応じて使い分けることができます。
下記では、 record['ステータス'].value が'未着手'のときは文字色を「赤」に、'処理中'やそれ以外の場合は文字色「青」にします。

• switch文について

switch文は下記のように書きます。条件分岐が多くなってくるとswitchのほうが見通しがよくなることが多いです。

4.if文を使って「Urgent」の値に応じて文字の色を変更

「Urgent の値に応じて文字の色を変更する」部分の補足ですが、
チェックボックスフィールドの「Urgent」の値の中身は配列であるため、
「Urgent」の値を指定するときは、[0]のように、インデックス番号を指定して配列の要素を取得します（インデックス番号は0始まりです）。
チェックボックスフィールドのフィールド形式や、配列の扱い方の詳細については、リンク先の記事をご参照ください。

レコード詳細画面の表示後イベントのコード

「Urgent」の値が '至急' のときに、太い赤字にします。

一覧画面のときと比べると、for文などで繰り返す必要もなく、サンプルでは「Urgent」の表示のみ変更となってますので、ここはシンプルですね。

まとめ

条件書式のプログラムについて学びました。今回のようにフィールドの要素の取得の方法と繰り返し/条件分岐の処理を使えば自由に色などを変更できるようになります。
次回以降もいくつかのサンプルコードを細かくみていきましょう。

この記事は、2022年6月版 kintoneで確認したものになります。

<< はじめようJavaScript第13回 プログラムを読む（回答の条件によって別フィールドの表示/非表示を切り替える） |  はじめようJavaScript第15回 kintone JavaScriptカスタマイズのプログラム実例を学ぼう③（経過年数を表示する）>>