レコード詳細画面にボタンを配置してみよう
今回は、レコード詳細画面にボタンを配置するカスタマイズを通して、次のことを学びます。
- ボタンHTML要素の作り方
- ボタンをクリックしたときのイベントリスナーの設定方法
- ボタンを配置するためのHTML要素の取得方法
今回はレコード詳細画面のメニュー上側の空白部分とスペースフィールドを取得する方法を説明します。
カスタマイズを適用するアプリ
アプリストアの 顧客リスト を使います。
ボタンを配置する流れ
ボタンをレコード詳細画面に配置したい場合、次の流れで処理を実装します。
- ボタンのHTML要素を作る。
- ボタンをクリックしたときの処理を実装する。
- kintone JavaScript APIを使って、レコード詳細画面のHTML要素を取得する。
- 取得したHTML要素にボタンを配置する。
レコード詳細画面のメニュー上側の空白部分にボタンを配置する
レコード詳細画面のメニュー上側の空白部分にボタンを配置する方法を説明します。
ボタンがクリックされたときにメッセージを表示します。
ソースコードは次のとおりです。
|
|
動作イメージ
このカスタマイズを適用すると、レコード詳細画面のメニュー上側の空白部分にボタンが表示されます。
ボタンをクリックすると、ダイアログが表示されます。
ソースコードの解説
このカスタマイズのポイントは次の2つです。
- ボタンのHTML要素を作成する。
- レコード詳細画面のメニューの上側の空白要素を取得しボタンを配置する。
ボタンのHTML要素を作成する
HTML要素を作成するには、document.createElement()
メソッドを利用します。
メソッドの書き方は次のとおりです。
|
|
タグ名には、divやbuttonなどのHTML要素名を指定します。
今回は、ボタンを作るので、buttonを指定します。
作ったボタンのプロパティには、ボタンのテキストやスタイル、ボタンのクリックイベントに対するイベントリスナーなどを設定できます。
今回は、次の3つを設定します。
- id
要素を特定するためのIDです。 - innerText()
ボタンに表示する文字です。 - onclick
ボタンをクリックしたときのイベントです。
次のように、ボタンをクリックしたときに実行する関数を紐付けます。
今回はダイアログを表示する処理を記載します。1 2 3 4
menuButton.onclick = function() { // ボタンをクリックした処理を記述する window.alert('ボタンが押されました'); };
レコード詳細画面のメニューの上側の空白要素を取得しボタンを配置する
レコード詳細画面のメニューの上側の要素は、次の赤枠で囲んでいる部分です。
要素を取得するには、kintone JavaScript APIのkintone.app.record.getHeaderMenuSpaceElement()
を利用します。
APIの詳細は次のドキュメントを参照してください。
メニューの上側の要素を取得する
続けて、appendChild()
メソッドを使って、取得した要素にボタンを配置します。
appendChild()
の引数にボタンの変数を指定します。
|
|
スペースフィールドにボタンを配置する
次は、ボタンをスペースフィールドに配置する方法を説明します。
顧客リストには、要素IDが「space_field」のスペースフィールドを配置してください。
このスペースフィールドの要素を取得してボタンを配置します。
レコード詳細画面のメニュー上側の空白部分にボタンを配置するで作成したソースコードの11〜12行目を編集します。
|
|
動作イメージ
このカスタマイズを適用すると、スペースフィールドにボタンが表示されます。
ボタンをクリックすると、ダイアログが表示されます。
ソースコードの解説
このカスタマイズのポイントは、スペース要素の取得です。
スペース要素を取得するには、 kintone JavaScript API kintone.app.record.getSpaceElement()
を利用します。
APIの詳細は次のドキュメントを参照してください。
スペースフィールドの要素を取得する
このAPIの引数には、取得するスペースの要素IDを指定します。
今回取得するスペースの要素IDはspace_field
です。
したがって、コードは次のようになります。
|
|
まとめ
ボタンを作成し、作成したボタンを次の要素に配置する方法を学びました。
- kintone JavaScript APIを使って取得したレコード詳細画面のメニュー上側の空白要素
- kintone JavaScript APIを使って取得したレコード詳細画面のスペース要素
次回は、 レコードの値を取得してみようについて学習しましょう。