(著者:落合 雄一)
はじめに
今回は、レコードを取得して利用する一覧画面編です。はりきっていきましょぅΣ(σ`・ω・´)σ!
それでは、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/
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。
いつも参考にしています。山内と申します。
真似して作ってみたんですが一覧から編集ボタンを押して保存を押した時、デフォルトの状態に戻ってしまいます。
編集から保存しても色を変える処理が適応されるにはどうすればいいのでしょうか。
山内さん、ご購読をいつもありがとうございます。
本件ですが、インライン編集後は一覧画面の再読み込みはされないため現状仕様となります。
app.record.index.edit.submit と setTimeout を使うことで対応できるかと思います。
匿名希望です。
KintoneのAPIに挑戦中の初心者です。第5回までは何とかたどり着きました。
「最後に」の記述の「kintone JavaScript APIのサンプルページ」について、リンクが切れています。
検索してみましたが、見つけることができませんでした。超初心者には、簡単なサンプルプログラム
が有益です。当初のものでなくてもよいので、超初心者向けのサンプルプログラム集へのリンクを
再設定頂きたくお願いします。
2点指摘させてください。
(1) 次の行にあります、「record」は不要でないでしょうか。(画像以外の箇所で、最初に黒い枠がある行です)
正しくは、 event.records[x].信号の色.value; ではないかと。
(2) 参照先が間違いでは?
「信号の色を表示しているフィールド要素を取得するには、このように書けば済みます。」という文中にて、「レコード詳細情報取得」ページにリンクされております。しかし、同ページには「getFieldElements」メソッドの記載がありません(単数形のgetFieldElement メソッドの記載ならあります)。本当は「レコード一覧情報取得」ページにリンクされたかったのではないでしょうか。
参考にさせていただいております。
すでにご指摘の件に加え、下記のリンク先も表示されません。
同等のページへの紹介に変えていただければより参考になると思います。
よろしくお願いします。
kintone 3分 JS カスタマイズ
http://developer.cybozu.co.jp/tech/?p=5625