kintone JavaScript 문자열을 연결하는 간단한 샘플을 통해 SweetAlert V2.1 및 Promise 사용법 배우기

kintone에는 표준으로 문자열 (1 행) 필드의 문자열을 연결하는 기능이 있습니다.
이 기능을 문자열(복수행)에 구현한 샘플 코드를 투고하겠습니다.

문자열을 연결하고 있는 부분은 단순히 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


  • htps : // js. cy 흐림. 이 m / 슈에타 ぇ rt / v2. 모두. js
  • htps : // js. cy 흐림. 이 m/j 쿠에 ry/2.2.4/j 쿠에 ry. 모두. js

  • 소스 코드


    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);
    

    스크린샷





    취소 버튼 누르기


    취소 완료


    연결 버튼 누르기


    문자열 연결 처리 완료


    참고 링크



    문자열 필드 및 연결 기능 정보


  • 문자열(한 줄) 필드 정보
  • 문자열(한 줄) 필드에서 자동 계산 설정
  • 문자열(복수행) 필드 정보

  • SweetAlert


  • SweetAlert

  • 킨톤 API


  • 레코드 추가 화면 저장 실행 전 이벤트
  • 좋은 웹페이지 즐겨찾기