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

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

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

1. Promise
2. [SweetAlert V2.1](https://sweetalert.js.org/)

Promiseに対応したSweetAlertは[Cybozu CDN](https://developer.cybozu.io/hc/ja/articles/202960194-Cybozu-CDN)には複数登録がありますが、今回は SweetAlert 2.x以降 を使ったサンプルになっています。

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

# アプリ概要
## アプリのフォームとフィールドコード
<img width="711" alt="スクリーンショット 2018-05-04 16.37.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/214523/66d96cd2-5d50-aeec-3093-6362d1f3d959.png">

- 文字列（1行）フィールド・・・フィールドコード： list1
- 文字列（1行）フィールド・・・フィールドコード： list2
- 文字列（複数行）フィールド・・・フィールドコード： multipleLine

## 外部読み込みするJavaScript,CSS
- https://js.cybozu.com/sweetalert/v2.1.0/sweetalert.min.js
- https://js.cybozu.com/jquery/2.2.4/jquery.min.js

# ソースコード
```javascript
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);
```
# スクリーンショット

<img width="517" alt="スクリーンショット 2018-05-07 7.12.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/214523/9a01d0da-1d83-e1b4-e78e-e5579a5e5ddd.png">

キャンセルボタン押下
<img width="544" alt="スクリーンショット 2018-05-07 7.13.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/214523/8891b21b-8e95-c8f5-813a-adb1d6ca3668.png">

キャンセル完了
<img width="561" alt="スクリーンショット 2018-05-07 7.14.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/214523/9fbb2114-1e59-61d8-39b9-a924fc3d7467.png">

連結ボタン押下
<img width="530" alt="スクリーンショット 2018-05-07 7.14.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/214523/e73942a1-2552-b7e9-58d1-e47d5b960433.png">

文字列連結処理完了
<img width="628" alt="スクリーンショット 2018-05-07 7.14.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/214523/6a2325b2-2908-b3eb-1640-e46b03d88f19.png">


# 参考リンク

## 文字列フィールドと連結機能について
- [文字列（1行）フィールドについて](https://jp.cybozu.help/ja/k/user/text_single-line)
- [文字列（1行）フィールドで自動計算を設定する](https://jp.cybozu.help/ja/k/user/set_autocalc)
- [文字列（複数行）フィールドについて](https://jp.cybozu.help/ja/k/user/text_box_multi-line)

## SweetAlert
- [SweetAlert](https://sweetalert.js.org/)

## kintone API
- [レコード追加画面の保存実行前イベント](https://developer.cybozu.io/hc/ja/articles/201941984#step2)