リニューアル後のチュートリアルは次のページを参照してください。
はじめよう kintone API
(著者:落合 雄一)
はじめに
さて、前回の「第1回kintone JavaScript APIのイジりかた」 でkintone JavaScript APIの基本の「き」をご理解いただけたかと思います。今回からは、実際にJavaScriptを使ったカスタマイズをやってみましょう(^^♪
それでは、「kintoneにボタンを設置して、アクションを起こしたい!」という最も一般的なカスタマイズについて第2回と第3回の2回に分けて紹介いたします。
kintoneのイベント処理
kintoneのイベント処理については、前回ちょっと触れましたね。今回は、「レコード一覧画面の表示後イベント」を使うのでこんな感じになります。
詳しくは、前回の「kintone javascript APIのイジりかた」やイベント処理の記述方法をご確認ください。
ボタンの設置
それでは、実際にレコード一覧にボタンを設置してみましょう(^^♪
設置場所はやはり、レコード一覧画面のメニュー右側の空白部分が一般的ですね。
赤枠の部分の要素を取得するには、kintone.app.getHeaderMenuSpaceElement()を使います。
それでは、実際にJavaScriptを記述してみます。
それでは、このソースを任意のアプリに取り込みましょう(^^♪
保存するファイルは拡張子「.js」、文字コードはUTF-8(BOMなし)で作成することを忘れずに。
あら簡単♪あっさり出来ちゃいましたね(^^♪
凄いぞkintone JavaScript API!!
しかし、上記のようにinnerHTMLでタグごとまとめて突っ込んでしまう書き方は、バグが入りやすく、あまり良いとは言えません。今のうちに書き換えておきましょう(^^)
ボタン要素を作成し、赤枠の部分に設置しています。こちらの方がいいですね♪
増殖バグを防ぐ
(@゜Д゜@;)あら・・・?
上記のコードでは、下記の操作を行う度に一覧のボタンが次々生まれてきますね。。。。。
- ページめくりをしたとき
- カラムソートしたとき
俗にいう増殖バグってやつです。
冒頭に、ボタン要素'my_index_button'の有無を判定するif文を追加して対処しましょう。
ボタンクリック時の処理
それでは、このボタンがクリックされた時の処理を追加してみましょう(^^♪
今回は、ボタンがクリックされた時にアラート処理を行うJavaScriptを記述してみます。
先の例で追加したボタン要素にonclickイベントを普通に記述してあげれば良いだけですね♪
それでは、このソースを任意のアプリに取り込みましょう(^^♪
これまでと同じ「一覧のボタン」が表示されましたら、勇気を振り絞ってボタンをクリックしてみましょう(^^♪
これも簡単にできましたね♪
ちょっと応用
それでは、今までやったことを踏まえて少し応用してみましょう(^^♪ レコード一覧画面にはもうひとつ、メニューの下側の空白部分の要素も取得できるのでこれを利用してみます。
赤枠の部分は、 kintone.app.getHeaderSpaceElement()で取得出来ます。それでは、ボタンクリック時にメニューの下側の空白部分に文字列が表示されるJavaScriptを記述してみます。
先の例で利用したonclickイベントに、文字列要素の作成とメニューの下側の空白部分に文字列の表示を行っています。
この一行を外すとどうなるか・・・面白い事がおきますよ。( ̄▽ ̄)
試してみてください。
それでは、このソースを任意のアプリに取り込みましょう(^^♪
いつボタンクリックするの!?今でしょ!!(古っ( ̄□ ̄;)!!)
なんだかんだと遊んでしまいました(笑)
こんな感じで皆さんもkintone JavaScript APIを楽しみながらいじり倒して、業務用のkintoneアプリをどんどん良いものにしていって頂ければと思います(^^♪
最後に
最後に、ちょっとだけ堅い話をします。
今回、一覧画面でボタンや文字列を表示した場所(要素)はリファレンスに記載されている関数を利用して取得しました。kintone.app.getHeaderMenuSpaceElement()とkintone.app.getHeaderSpaceElement()ですね。しかし、「別にこんなもの利用しなかったとしても、普通にgetElementById()とかやれば同じ事出来るんちゃう?」と思われたのではないでしょうか?
・・・はい、その通りです。
ただし、kintone JavaScript コーディングガイドラインに以下のように記載がある事をお忘れなく。
-----
kintoneで使われているid/class属性について
各要素に付与されているid/class属性の値は、予告なく変更されることがあります。
また、DOM構造についても変更されることがあります。
-----
つまり、提供された関数以外を利用したコーディングをすると、バージョンアップなどでHTMLが更新されたときに動かなくなってしまうかもしれません。そのため、おススメの方法としてリファレンスに記載されている関数を利用したコードを紹介しました。もちろん、今回紹介した方法以外にも書き方は色々あると思います。しかし、裏ワザ的な用法でJavaScriptを書く場合は、バージョンアップすると動かなくなる可能性があるので注意してください。
今回はここまでです。それでは・・・
Let’s kintoneカスタマイズ\(^o^)/
このTipsは、2022年6月版で確認したものになります。
<<第1回 kintone javascript APIのイジりかた | 第3回 レコード詳細にもボタンを設置しよう!>>
デモ環境
デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/2/
ログイン情報はcybozu developer network デモ環境で確認してください。
お世話になっております。
ボタンがログインユーザー:ehime しかクリックできないようにするには、どんなふうにアクセス権限をかければよろしいでしょうか?初心者のため、https://developer.cybozu.io/hc/ja/articles/201942024 を参考にしてやりかったですが、コードをうまく組めなくて、サンプル頂くことは可能でしょうか?
goro様
こちらの欄では、記事の内容のフィードバックに使用されるものであり、
応用編に関しての質問やコードの提供は行っておりません。
申し訳ありませんが、ご了承ください。
コミュニティの方で、一度コードを作成した状態で、ご質問ください。
お世話になっております。
コチラですが、一覧画面の一番下にボタンを追加することは可能でしょうか。
現状ではレコード一覧で下まですべて確認した後に再度一番上まで戻る作業が手間になってしまうため
teranaka 様
お世話になっております。cybozu developer network事務局でございます。
kintone JavaScript APIを使用して取得できる一覧画面の要素は下記の2つのため、
JavaScript APIではレコード一覧画面の最下部にボタンを追加することはできません。
レコード一覧のメニューの右側の空白部分の要素を取得する
レコード一覧のメニューの下側の空白部分の要素を取得する
また、記事内容と直接関係のない技術的な質問は、コミュニティをご活用ください。
宜しくお願い致します。
cybozu Development team 様
お世話になっております。
ご回答いただき、ありがとうございます。
メニューへの追加可能範囲について承知いたしました。また別の方法を考えさせて頂きます。
お世話になっております。
https://developer.cybozu.io/hc/ja/articles/201941964#step1
一覧のeventsでrecordsが取得できるとこのサンプルアプリを参考にfunctionに上記の図のようにfor文で色々処理をしようとしていたのですが、
returnで増殖バグは防げるのですが、event.recordsの値をうまくボタンに紐付けたonclickイベントが拾ってくれない(Mac OS 10.15.7/Chrome 86で確認)ので要素をremoveしてあげるほうが簡単に思ったとおりの動きになりましたので、ご報告いたします。
菅原直樹 様
お世話になっております。cybozu developer network事務局でございます。
ご連絡、ご指摘ありがとうございます。
社内にフィードバックさせていただき、今後の参考にさせていただきます。
今後ともなにかございましたら、よろしくお願いいたします。
お世話になります。
レコード一覧画面で検索カスタマイズボタンを追加しました。
検索処理の中、フィールドコードをURLに設定してるコードがネットでたくさんありますがフィールドコードを使わないでhtmlファイルのID を使って検索処理を作ることが可能でしょうか。
可能で有れば、作り方を教えて頂いたいと思います。
apple 様
お世話になっております。cybozu developer network 事務局です。
恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問は cybozu developer コミュニティをご活用ください。
ご質問新規投稿の際「良い質問をするためのガイド」というものが表示されますので、
それに沿って利用したソースコードなどを記載いただくと、回答がつきやすくなると存じます。
よろしくお願い致します。