第3回 レコード詳細にもボタンを設置しよう!

フォローする

(著者:Cstap 落合 雄一

はじめに

前回、レコード一覧にボタンを置いて簡単なアクションを仕掛けました。今回は、レコード詳細画面にも同じ事をやってみましょう(^^

kintoneのイベント処理

今回利用するイベントは、レコード詳細画面が表示された時のイベントです。前回&前々回でもやりましたように、JavaScriptの記述はこのように書けば良いのでしたね。

詳しくは、レコード表示イベントをご確認ください。

ボタンの設置(1)

それでは、実際にレコード詳細にボタンを設置してみましょう(^^♪
設置場所はやはり、レコード詳細画面のメニュー右側の空白部分が一般的ですね。

赤枠の部分の要素を取得するには、kintone.app.record.getHeaderMenuSpaceElementを使います。
それでは、実際にJavaScriptを書いてみましょう(^^♪

簡単でしたね(^^)
もうkintone JavaScript APIに慣れてきたのではないでしょうか?

ボタンの設置(2)

レコード詳細画面では、スペースフィールドを利用してボタンを設置することもできます。


これについてはスペースフィールドの要素を取得するに書いてありますが、一緒にやってみましょう(^^♪

まず、ボタンを設置する場所になる「スペースフィールド」を用意します。任意のアプリで、アプリの設定画面を開くフォームを設定するを参考に、好きな場所にドラッグ&ドロップしてみてください。


続いて、追加したスペースフィールドの[設定]から、要素IDを設定します。
ここで設定した要素IDを使ってJavaScriptを書いていく事になりますので、他と重複しない分かりやすいIDにしておきましょう。今回は、「my_space_field」というIDを設定してみます。

 


それでは、いよいよここにボタンを設置してみます。ここの要素の取得は、kintone.app.record.getSpaceElement(id)でしたね(^^)
この引数idに、同じく上記で設定した要素IDを指定します。つまり、要素IDがmy_space_fieldであればこういう事です。

  • kintone.app.record.getSpaceElement('my_space_field')

それでは先ほどのJavaScriptに、スペースフィールドにもボタンを置くJavaScriptを追加してみましょう(^^♪

スペースフィールドだからといって、特別な事はありませんでしたね(^^)
この調子で書いていけば好きな場所にいくつでもボタン置けそうですね。\(´▽`*)/
いろいろ遊んでみてください\(^o^)/

ちょっとだけ応用

それでは、今までやったことを踏まえて少し応用してみましょう(^^♪
皆さんもそろそろkintone JavaScript APIで何かおもしろいことができるイメージが湧いてきたのではないでしょうか?
ということで、次は今まで習ったことを応用して各自で自分のアイデアを実現してみましょう(^^)
条件は以下の2つの要素取得関数を利用することと、誰かをクスッと笑わせるようなもの!!ってことで気合い入れて行ってみよー!!(笑)

  • kintone.app.record.getHeaderMenuSpaceElement
  • kintone.app.record.getSpaceElement

・・・・・・・・・・

どうでしょう(^^) できましたか?
ちなみに私はこんな感じにしてみました。( ̄Λ ̄)ゞ

私は、ジャンケンがめっちゃ強い「ジャンケンキング」に挑戦するゲームを作ってみました(^^♪
ぜひ勝つまで挑戦してみてください!!(笑)
ちなみに私は1度も勝てませんでした(T_T)・・・(笑)

 

最後に

そろそろkintoneで遊ぶことがおもしろく感じてきたのではないでしょうか?これからさらに面白くなってきますので、ぜひ次回も楽しみにしていただければと思います(^^)次回から、kintoneをカスタマイズする上で重要なレコードの取得にトライしていこうと思います。それでは・・・

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

 

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

 

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

デモ環境

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

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

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

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

Avatar
千代田 賢史

表現の幅が広がっていきますね。

 

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