第5回 レコードの値を利用してみよう(一覧画面編)

（著者：落合 雄一）

はじめに

今回は、レコードを取得して利用する一覧画面編です。はりきっていきましょぅΣ(σ｀･ω･´)σ！

それでは、PC用の一覧画面で特定のレコードの表示する色を変更してみましょう(^^♪
とりあえずアプリの準備から。以下は、信号機の色をラジオボタンで登録するアプリを作成したときの設定です。詳細画面のときと同様、「フィールドコード」に設定した値はあとで使います。φ(￣ー￣ )ﾒﾓﾒﾓ

eventオブジェクトからの取得

表を出力するときに取得した値を利用するときには、eventオブジェクトを利用します。これについては、前回の詳細画面編でも使ったので分かりますね。そうです、これの事です。

取得出来るeventオブジェクトについては、レコード一覧画面の表示後イベントのeventオブジェクトのプロパティ（PC用）から、内容を確認してみましょう。

この表を見てお分かりの通り、「viewType」が「list」の場合はrecordsプロパティにレコードオブジェクトの配列が入ってきます。レコードオブジェクト・・・・そう、前回詳細画面でやったのと同じです（*´∇｀*）つまり、x番目のレコードの信号の色を利用するには以下のように書けば良いわけです。

event.records[x].record.信号の色.value;

以下は、取得したレコードの内容を以前にも紹介したレコード一覧のメニューの下側の空白部分に出力するviewType=list用のサンプルです。

取得した結果は、フィールド形式によって違う書式になる事があります。これも前回の詳細画面編と同じですが、結構忘れがちな事なのでもう一度触れておきますね。以下の例では作成日時が書式/タイムゾーン共に異なっています。(詳しくは日時のフォーマットをご覧ください。)

上記サンプルを一覧で実際に動かして、並び替えや表示件数の変更、検索機能の利用やページングを色々操作しながら元の表と内容を比較してみてください。取得したデータ、件数、並び順いずれも一覧画面に表示されている内容と同じになっていますね。このようにeventオブジェクトは、一覧画面で表示した値を再利用するのに非常に有効な手段です。一覧だからと言っても何も難しい事はありませんね。(o^∇^o)ﾉ

フィールド要素を取得する

次に、実際に表示しているHTMLのDOM要素を取得します。これも特に難しい事はありません。信号の色を表示しているフィールド要素を取得するには、このように書けば済みます。

kintone.app.getFieldElements('信号の色');

ただし、以下の注意点に気を付けてくださいね。

取得する信号の色の「フィールド要素の配列」は、以下図の赤線で囲った部分のオブジェクトのリストになります。実際の画面でも確認してみてください。

一覧画面のカスタマイズ

それでは、ここまでの２つを利用して、値によって一覧画面の表示をカスタマイズしてみましょう。テーマとしては、レコード一覧で条件書式を設定するのサンプルが秀逸ですので、これと同じようなものを作ってみました。これ自体内容としては簡単なものですが、皆さんのアプリに合わせて応用してみてください。 (￣Λ￣)ゞ

んー、なんか目がちかちかしますがご勘弁のほど・・・・(+ω+;)
ですが、ばっちり！一覧画面のデータを利用してのカスタマイズに成功しました！Σd=(・ω-｀o)ｸﾞｯ♪

最後に

ここまで振り返ってみて、いかがでしょうか？
これで皆さんは、kintone 3分 JS カスタマイズと同じようなものをご自身の手で作成できるようになっているはずです！m9っ`･ω･´)ﾋﾞｼｯ!!

kintone JavaScript APIのサンプルページにある他のサンプルにも目を通してみてください。コードを読んでも以前よりグッと理解出来るようになっているのではないでしょうか。

あ、最後にもうひとつ。
このコーナーは、これからどんどんKintoneカスタマイズにトライしていこうという方々のために少しでもお役に立てればと考えています。お読み下さっている皆様、Kintoneをさわっていく上での疑問点などありましたら、どんどんご質問ください！我々エバンジェリストが力の限りお手伝いいたします。(￣Λ￣)ゞ

それでは、また第6回でお会いしましょう(^^)

Let’s kintoneカスタマイズ＼(^o^)／

このTipsは、2014年4月版で確認したものになります。

<<第4回 レコードの値を利用してみよう（詳細画面編）  | 第6回 テーブルの値を利用する>>

デモ環境

こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/10/