カテゴリー内の他の記事

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

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

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

今回は レコード一覧とレコード詳細画面で条件書式を設定する というサンプルプログラムについて学んでいきましょう。
kintone アプリは、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カスタマイズのプログラム実例を学ぼう③(経過年数を表示する)>>

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

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
吉田勉

13回以降ですが、サンプルとして利用しているアプリがわかると助かります。

 

 

Avatar
cybozu Development team

吉田勉 さま

お世話になっております。
cybozu developer network 運営事務局です。

この記事では、 レコード一覧とレコード詳細画面で条件書式を設定する という記事のサンプルコードを説明しています。
元記事に、「総務への依頼受付」アプリを利用していることを記載しております。

記事をまたいで見る必要があること、失礼いたしました。
コチラの記事にも記載すること、検討させていただきます。

この度はフィードバックくださり有難うございました。

Avatar
吉田勉

ありがとうございます。

リンクを見逃していたようです。

参考にさせていただきます。

Avatar
岡 有希恵

いつもお世話になっております。

非常に基本的な質問となり申し訳ありません。
「4.if文を使って「Urgent」の値に応じて文字の色を変更」での値の指定の仕方について質問させてください。

record['Urgent']['value'][0]  という指定の仕方ですが、
[0]となっているのはなぜでしょうか?

record['Urgent']の['value'] のみとしたところ値の指定ができなかったのですが、なぜでしょうか?

ご教授いただけますと幸いです。
何卒よろしくお願いいたします。

Avatar
cybozu Development team

岡 有希恵 様

お世話になっております。cybozu developer network 運営でございます。

こちらのコメント欄は記事内容のフィードバック目的となっているため、
技術的なご質問はcybozu developer コミュニティをご活用ください。

よろしくお願い致します。

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