JavaScript
promise
kintone
SweetAlert

kintone JavaScriptの文字列を連結する簡単なサンプルを通してSweetAlert V2.1 とPromiseの使い方を学ぶ

kintoneには標準で文字列(1行)フィールドの文字列を連結する機能があります。
この機能を文字列(複数行)に実装したサンプルコードを投稿致します。

文字列を連結している部分は単純にJavaScriptの"+"を使っているだけですが、それ以外に下記の実装方法のサンプルにもなっています。

  1. Promise
  2. SweetAlert V2.1

Promiseに対応したSweetAlertはCybozu CDNには複数登録がありますが、今回は SweetAlert 2.x以降 を使ったサンプルになっています。

SweetAlertはPromiseに対応しているため、このサンプルではkintoneの更新系APIとSweetAlert+Promiseを組み合わせた処理の基本を学べるようにしました。

アプリ概要

アプリのフォームとフィールドコード

スクリーンショット 2018-05-04 16.37.43.png

  • 文字列(1行)フィールド・・・フィールドコード: list1
  • 文字列(1行)フィールド・・・フィールドコード: list2
  • 文字列(複数行)フィールド・・・フィールドコード: multipleLine

外部読み込みするJavaScript,CSS

ソースコード

jQuery.noConflict();
(function($) {
    "use strict";
    var events = ['app.record.create.submit'];
    var fdLine1 = 'line1';
    var fdLine2 = 'line2';
    var fdMultiLine = 'multipleLine';
    kintone.events.on(events, function(event) {
        var record = event.record;
        return new kintone.Promise((resolve, reject) => {
            swal({
                title: '文字列の連結',
                text: '文字列を連結しますか?',
                icon: 'warning',
                buttons: ['Cancel', '連結する'],
            }).then((value) => {
                if (value) {
                    console.log("連結します");
                    swal("文字列を連結します")
                    .then((value) => {
                        // 1行のフィールドを取得する
                        var elLine1 = record[fdLine1];
                        var elLine2 = record[fdLine2];
                        var elMultiLine = record[fdMultiLine];
                        console.log(elLine1);
                        console.log(elLine2);
                        console.log(elMultiLine);
                        // 複数行フィールドに改行を追加して連結する
                        elMultiLine.value = elLine1.value + '\n' + elLine2.value;
                        resolve(event);
                    });
                } else {
                    console.log("cancel");
                    swal("処理をキャンセルします")
                    .then(() => {
                        console.log("cancel");
                        reject("cancel");
                    });
                }
            });
        }).then((r) => {
            return r;
        }).catch((e) => {
            swal("処理をキャンセルしました" + e);
            return false;
        });
    });
})(jQuery);

スクリーンショット

スクリーンショット 2018-05-07 7.12.01.png

キャンセルボタン押下
スクリーンショット 2018-05-07 7.13.58.png

キャンセル完了
スクリーンショット 2018-05-07 7.14.07.png

連結ボタン押下
スクリーンショット 2018-05-07 7.14.24.png

文字列連結処理完了
スクリーンショット 2018-05-07 7.14.35.png

参考リンク

文字列フィールドと連結機能について

SweetAlert

kintone API