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

フォローする

(著者:Cstap 落合 雄一

はじめに

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

それでは、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('信号の色');

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

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

一覧画面のカスタマイズ

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

んー、なんか目がちかちかしますがご勘弁のほど・・・・(+ω+;)
ですが、ばっちり!一覧画面のデータを利用してのカスタマイズに成功しました!Σ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/

※デモ環境についての説明はこちら

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

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

Avatar
山内一真

いつも参考にしています。山内と申します。
真似して作ってみたんですが一覧から編集ボタンを押して保存を押した時、デフォルトの状態に戻ってしまいます。
編集から保存しても色を変える処理が適応されるにはどうすればいいのでしょうか。

Avatar
cybozu Development team

山内さん、ご購読をいつもありがとうございます。

本件ですが、インライン編集後は一覧画面の再読み込みはされないため現状仕様となります。
app.record.index.edit.submit と setTimeout を使うことで対応できるかと思います。

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