カテゴリー内の他の記事

第4回 レコードの値を利用してみよう(詳細画面編)

フォローする

(著者:Cstap 落合 雄一

はじめに

今回からは登録済みレコードを取得して利用してみる事にしましょう!ガンバ!!o(・ω・´o)(o`・ω・)o!!ガンバ
ということで、まずは詳細画面(PC用)での使い方からはじめたいと思います。

レコード番号を取得してみよう

まずは簡単に、レコード番号を取得する事からはじめましょう。レコード番号とは、アプリごとに1からの連番で自動的に振り分けられるユニークなIDです。レコード番号は、これからもちょくちょく出てくるので覚えておいてくださいね(^^♪

利用する関数は kintone.app.record.getId()ですが、スマートフォン用には利用出来ませんので気を付けてください。以下は、メニュー右側の空白部分に置いたボタンを押すとアラートを出す簡単なサンプルです。

 

簡単にできましたね!今回も順調な滑り出しです。\(*^▽^*)ノ

レコードの値を取得してみよう

次に、レコードの値を取得してみましょう(^^♪

利用する関数は、kintone.app.record.get()です。スマートフォン用には、kintone.mobile.app.record.get()を利用する事になりますので気を付けてください。この関数の戻り値は、値の取得に成功した場合JSON形式、失敗した場合NULLとなります。JSONについてはWeb上に多くの情報がありますので、説明を省きます。

フィールドコードは、アプリの設定を変更>フォームの編集から取得したいフィールドの設定で確認/変更できます。

ここまで分かればあまり難しい事はないですね(^^)

それでは、実際に利用してみましょう(^^♪

以下は、メニュー右側の空白部分に置いたボタンを押すと、前回利用した「スペースフィールド」に更新日時フィールドから取得した値を表示するサンプルです。

JSON形式のレコードの値は、連想配列の形でも利用できます。つまり以下のような感じです。

どちらの書き方が良いかは、それぞれに好みやスタイルがある事でしょう。この辺りについては、実際の処理の内容によって適した書き方が出来るようにしておけば、よりkintone JavaScript APIを使いこなせるようになれそうです(^^)

フィールド型とフォーマット

上記のコードで更新日時の取得と表示が出来たと思います。あらためて結果を見てみましょう。

何か気が付きませんか?赤で囲んだ2つの日時の書式が違っていますね(^^;;

フィールド形式日時のフォーマットを確認してください。このように、Webページ上にHTMLで表示されている書式とAPIから取得した値で書式/フォーマットが異なる場合があります。実際に自分好みのJavaScriptを書いていくときには注意してください。( ̄Λ ̄)ゞ

kintone.app.record.get()における注意点

実際に皆さんが詳細画面でレコードを取得する処理を書くときには、いちいちボタンを置いてそれをトリガに…なんてまどろっこしい事はあまりしないと思います。ページの表示時に取得する方が実用的ですね(^^♪

しかーし!!ここで重要な注意点があります!!レコードの値を取得するに以下の注意事項が記載されています。

つまり、下記のようなことはできないということです(>_<)

これはめっちゃ重要なので、忘れないようにしてください!!
ハマって何時間も頭を抱える人がいるみたいなので・・・(¬_¬)

eventオブジェクト

先ほどの注意事項で「・・・・eventオブジェクト( ・◇・)?」と思った方、全然難しくありませんよ(^^)
いつも書いているこれの事です。
  

eventオブジェクトについてきちんと理解するため、レコード表示イベントをもう一度確認してみましょう(^^♪
ここにeventオブジェクトのプロパティについての記載がありますね。

つまり、レコード詳細画面が表示された時のイベントでのeventオブジェクトには、既に
kintone.app.record.get()を利用した時の戻り値と同じデータが入っているという事です。ヾ(@^▽^@)ノ

eventオブジェクトによるレコードの値の取得

それではここまでの内容を踏まえて、eventオブジェクトを利用して更新日時フィールドから取得した値を表示してみましょう。ここでは、eventオブジェクトを連想配列で記述してあります(^^)

これも簡単でしたね。ヾ(●⌒∇⌒●)ノ

最後に

レコード詳細画面でのいじりかたの基本については、これで大体お分かり頂けたと思います。サンプルページにある住所から地図を表示するなどを参考に、いろんなことにトライしてみてください(^^)(小技)undefined と空文字のスマートな if 文判定なども参考になりますよ(^^♪

それでは、次回もお楽しみに・・・

Let’s kintoneカスタマイズ\(^o^)/

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

<<第3回 レコード詳細にもボタンを設置しよう! | 第5回 レコードの値を利用してみよう(一覧画面編)>>

デモ環境

https://dev-demo.cybozu.com/k/9/

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

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

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

Avatar
千代田 賢史

だんだんわかってきました。

前に進みます。

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