カテゴリー内の他の記事

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

フォローする

(著者:kintone エバンジェリスト 村濱 一樹

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

今回は レコード一覧とレコード詳細画面で条件書式を設定する というサンプルプログラムについて学んでいきましょう。
データの条件に応じて書式を変更したいということはよくあるケースですし、for文とif文の両方を使う必要があるので、今までの腕試しも兼ねてみてみましょう。

プログラム

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

全体の構成

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

_____.png

レコード一覧画面のコード

レコード一覧画面のコードからみていきましょう。レコード一覧画面表示時だけのコードを抜き出したのが下記です。

  • 一覧画面表示時に実行されるコード(抜粋)

________________.png

このコードは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文のほうが見やすかったり整理しやすい場合もあるので、状況に応じて使い分けることができます。

switch_.png

  • switch文について

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

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

_______.png

レコード詳細画面のコード

次に、レコード詳細画面のコードからみていきましょう。レコード詳細面表示時だけのコードを抜き出したのが下記です。

  • 詳細画面表示時に実行されるコード(抜粋)

________________.png

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

まとめ

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

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

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

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。