CRUD Lab. Tech Blog

ギークス株式会社の沖縄開発拠点CRUDLab. (クラッドラボ)のIT技術(テック)ブログ。kintoneやAngularJSによる開発を行っています。

【kintone】SweetAlertでアクション機能likeなボタンを作ろう

0. 目次

1. 概要

ギークス株式会社CRUD Lab.のKUNISADAです!

アクション機能*1のようなボタンを、SweetAlertを使って実装しよう

ということで、jsカスタマイズでボタンを作成し、SweetAlertを使用して、 複数の値を別アプリに新規レコードとして登録する方法をご紹介します。

アクション機能とは、レコードのデータをコピーして、指定したアプリにレコードを登録するアクションのこと。by kintone ユーザーヘルプ

2. イメージ図

f:id:crud_lab:20160201120345g:plain

3. 準備

3-1 フィールド

フィールド名 フィールドコード 初期値 その他
(スペース) test_button -- --

f:id:crud_lab:20160201120642p:plain

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

f:id:crud_lab:20160201120707p:plain

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の機能として提供されているアクション