カテゴリー内の他の記事

第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
千代田 賢史

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

 

Avatar
佐藤

mobile.app.record.detail.show
を使うことでモバイルにも同様にボタンを表示させられると思ったのですが、できませんでした。

モバイルではボタンを追加することはできないのでしょうか?

佐藤により編集されました
Avatar
瀧ヶ平

佐藤さん
cstapの瀧ヶ平です。

モバイル版の場合はkintone.mobile.app.getHeaderSpaceElement()で要素を取得できるので、これを利用すれば同様にボタンを設置できるかと思います。

ヘッダーメニュー直下の空白要素以外はモバイル版では取得できないので注意が必要です。

Avatar
Shimpei

https://developer.cybozu.io/hc/ja/community/posts/115010156086-%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AB%E7%8B%AC%E8%87%AAjs%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

この質問者と同じ悩みを持っているのですが、回答者のようにボタンが表示されません。

このようなコードはどのように書いたらできるのでしょうか?

現在はボタン設置 (1) の通りに書いてあります。

 

初心者であまり、よくわかっていないですが、よろしくお願いします。

 

*この近くにボタンを設置したいです。(できれば右側)

Shimpeiにより編集されました
Avatar
Shimpei

無事解決しました。

全体の方にカスタマイズしていた(一部のアプリでも構わないのにも関わらず)jsファイルを消したら無事反映されました。

さらに消した方のjsファイルがうまく読み込めていなかったのにも問題があったと思います。

 

カスタマイズは難しいですが、できたら楽しいと思いますね‼️

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