More than 5 years have passed since last update.

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

Last updated at 2018-05-07Posted at 2018-05-06

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

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

Promise
SweetAlert V2.1

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

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

アプリ概要

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

文字列（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) => {
                        // １行のフィールドを取得する
                        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);