【kintone】SweetAlertでアクション機能likeなボタンを作ろう
0. 目次
1. 概要
ギークス株式会社CRUD Lab.のKUNISADAです!
アクション機能*1のようなボタンを、SweetAlertを使って実装しよう
ということで、jsカスタマイズでボタンを作成し、SweetAlertを使用して、 複数の値を別アプリに新規レコードとして登録する方法をご紹介します。
アクション機能とは、レコードのデータをコピーして、指定したアプリにレコードを登録するアクションのこと。by kintone ユーザーヘルプ
2. イメージ図
3. 準備
3-1 フィールド
フィールド名 | フィールドコード | 初期値 | その他 |
---|---|---|---|
(スペース) | test_button | -- | -- |
3-2 必要fileの読み込み
//SweetAlert https://js.cybozu.com/sweetalert/v1.1.0/sweetalert.min.js https://js.cybozu.com/sweetalert/v1.1.0/sweetalert.css //カスタム用のjsファイル test.js
※ SweetAlertはCybozu CDNを使用 cybozudev.zendesk.com
4. 実装
(function () { 'use strict'; //詳細表示画面のイベントハンドラー kintone.events.on(['app.record.detail.show'], function(event){ ///-----------アクションlikeなボタンの作成----------- //ボタン要素を作成 var myTestButton = document.createElement('button'); myTestButton.id = 'my_test_button'; myTestButton.style.height = '40px'; myTestButton.style.width = '180px'; myTestButton.style.border = '1px solid #e3e7e8'; myTestButton.style.color = '#3498db'; myTestButton.style.fontSize = '14px'; myTestButton.style.backgroundColor = '#ffffff'; myTestButton.innerHTML = 'ログを登録'; //スペースフィールドにボタンを配置 var emButton = kintone.app.record.getSpaceElement('test_button'); emButton.appendChild(myTestButton); // ボタンクリック時の処理 myTestButton.onclick = function(){ //SweetAlertの登録画面の実装 swal({ title: 'ログを登録しますか?', text: '対応種別を選択してください:' + '<form name =dealTypeForm style=display: inline>' + '<select name=dealTypeSelect>' + '<option value=デフォルト>---</option>' + '<option value=メール>メール</option>' + '<option value=電話>電話</option>' + '<option value=トラブル>トラブル</option>' + '<option value=その他>その他</option>' + '</select></form>', html: true, type: 'input', showCancelButton: true, closeOnConfirm: false, animation: 'slide-from-top', inputPlaceholder: 'ここに記入してください' }, function(input_comment_value){ if(input_comment_value === false){ return false; }else{ //プルダウンメニューで値を定義 var input_type_value = document.dealTypeForm.dealTypeSelect.value; //バリデーション switch (input_type_value){ case 'メール': case '電話': case 'トラブル': case 'その他': if(input_comment_value == ''){ swal.showInputError('コメントを記入してください'); }else{ var objParam = { 'app': [連携先のアプリ番号], 'record': { [対応種別のフィールドコード]: { 'value': input_type_value }, [コメントのフィールドコード]: { 'value': input_comment_value } } } kintone.api('/k/v1/record', 'POST', objParam, function(resp){ //成功時の処理 swal('成功', '', 'success'); // 成功時は画面をリロード location.reload(true); }, function(error){ //エラー時の処理 swal('失敗', '', 'error'); }); } break; default: if(input_comment_value == ''){ swal.showInputError('対応種別とコメントを記入してください'); }else{ swal.showInputError('対応種別を選択してください'); } break; } } }); } return event; }); })();
5. まとめ
SweetAlertの少し応用編でプルダウンメニューをDOM操作で追加しています。 今回は、入力する値を2つで設定していますが、アイデア次第では複数の値を設定する(=まさにアクション機能のような)仕組みを実装することができます。 こちらのSweetAlertでは、アラート表示なども手軽にカスタムできるのでとても便利です!
*1:kintoneの機能として提供されているアクション