onShowMessage (event)

시트의 메시지가 발생할때 실행되는 이벤트입니다.
이벤트를 통해서 외부 라이브러리를 활용해서 메시지를 보여줄 수 있습니다.
리턴 값을 통해 시트 내부 메시지 숨김 여부(기본값 없음)를 설정 할 수 있습니다. 1(true)시 메세지 대체.

Syntax

    onShowMessage: function(paramObject) {

    }
or
    sheet.bind("onShowMessage" , function(paramObject) {});

Parameters

Name Type Description
sheet object 메시지가 발생한 시트 객체
messageTag object 메시지를 보여주는 Dom 객체
message string 메시지로 보여질 문자열(html tag도 포함)
isConfirm boolean showMessageTime (method)으로 호출 되었는지 여부
time number showMessageTime (method)으로 호출될때 time인자 값
buttons array[string] showMessageTime (method)으로 호출될때 설정된 buttons인자 값
callback function showMessageTime (method)으로 호출될때 설정된 func을 호출하는 콜백 메소드

Return

boolean

Example

// [SweetAlert2](https://sweetalert2.github.io/)를 활용한 예제
options.Events = {
    onShowMessage: function (evtParams) {
        if (window.Swal) {
            // showMessage와 showMessageTime에 따라 메시지 처리를 다르게 해준다.
            if (evtParams.isConfirm) {
                Swal.fire({
                    title: "<div>" + evtParams.message + "</div>", // 메시로 보여질 문자열(HTML Tag 포함)
                    icon: 'warning',
                    showConfirmButton: (evtParams.buttons.indexOf("Ok") > -1), // 확인 버튼이 있으면 확인 버튼을 만들어준다.
                    showCancelButton: (evtParams.buttons.indexOf("Cancel") > -1), // 취소 버튼이 있으면 취소 버튼을 만들어준다.
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: '확인',
                    cancelButtonText: '취소',
                    timer: evtParams.time // showMessageTime의 time인자로 단위는 밀리초(ms)로 설정한다.
                }).then((result) => {
                    if (result.value) {
                        // confirmButton이 눌렸을때 시트에서도 후속 기능이 실행되도록 callback을 통해 Ok 버튼이 눌린 정보를 전달한다.
                        if (evtParams.callback) evtParams.callback(evtParams.buttons.indexOf("Ok") + 1);
                    } else {
                        // cancelButton이 눌렸을때 시트에서도 후속 기능이 실행되지 않도록 callback을 통해 Cancel 버튼이 눌린 정보를 전달한다.
                        if (evtParams.callback) evtParams.callback(evtParams.buttons.indexOf("Cancel") + 1);
                    }
                });
            } else {
                Swal.fire({
                    title: "<div>" + evtParams.message + "</div>", // 메시로 보여질 문자열(HTML Tag 포함)
                    icon: 'success',
                    showConfirmButton: false // IBSheet는 단순 메시지에서 확인버튼을 노출 시키지 않기때문에 비슷하게 구현하려면 Swal의 버튼도 숨겨야한다.
                }).then((result) => {
                    // callback이 있는 경우 반드시 처리
                    if (evtParams.callback) evtParams.callback(evtParams.buttons.indexOf("Ok") + 1);

                    // Swal이 클릭이나 esc 키 등 Swal 액션으로 닫혔을때 sheet.hideMessage()도 같이 실행 시켜준다.
                    // sheet.hideMessage()호출로 Swal가 닫히면 result.value, result.dismiss 등 값이 없음.
                    // 무조건 sheet.hideMessage()를 호출하도록 코드가 구현되어 있으면 연속으로 메시지가 호출되는 경우 메시지가 제대로 보여지지 않을 수 있음.

                    if (result.value || result.dismiss) {
                        evtParams.sheet.hideMessage();
                    }
                });
            }
            return true; // 시트 메시지를 대체함.
        }
    },
    onHideMessage: function (evtParams) {
        if (window.Swal) {
            // sheet.hideMessage()가 호출될때 Swal의 메시지도 close() 시켜준다.
            Swal.close();
        }
    }
}
// javascript native의 alert 및 confirm을 활용한 예제
options.Events = {
    onShowMessage: function (evtParams) {
        // alert이나 confirm은 버튼이 눌릴때까지 기다리므로 반드시 showMessageTime로 호출되었을때만 처리해야하며,
        // time이 있는경우 자동으로 닫히기 때문에 alert이나 confirm으로 사용했을때 구현된 로직이 정상적으로 동작하지 않을 수 있음.
        if (evtParams.isConfirm && !evtParams.time) {
            var parseMsg = evtParams.message; // 메시로 보여질 문자열(HTML Tag 포함)
            if (typeof parseMsg == "string") {
                // 메시지 파일에 정의된 문자열에 HTML Tag가 있을 경우 제거해준다.
                parseMsg = parseMsg.replace(/\<br(\/)?\>/g, "\n").replace(/\<\/(div|span|p)+\>/g, "\n");
                parseMsg = IBSheet.removeHTMLTag(parseMsg);
            }
            // 취소 버튼의 유무에 따라 alert을 실행할지 confirm을 실행할지 구분한다.
            if (evtParams.buttons.indexOf("Cancel") > -1) {
                if (!confirm(parseMsg)) {
                    // 취소 버튼을 눌렸을때 시트에서도 후속 기능이 실행되지 않도록 callback을 통해 Cancel 버튼이 눌린 정보를 전달한다.
                    if (evtParams.callback) evtParams.callback(evtParams.buttons.indexOf("Cancel") + 1);
                } else {
                    // 확인 버튼을 눌렸을때 시트에서도 후속 기능이 실행되도록 callback을 통해 Ok 버튼이 눌린 정보를 전달한다.
                    if (evtParams.callback) evtParams.callback(evtParams.buttons.indexOf("Ok") + 1);
                }
            } else {
                alert(parseMsg);
                // 확인 버튼을 눌렸을때 시트에서도 후속 기능이 실행되도록 callback을 통해 Ok 버튼이 눌린 정보를 전달한다.
                if (evtParams.callback) evtParams.callback(evtParams.buttons.indexOf("Ok") + 1);
            }
            // 시트 메시지를 대체함.
            return true;
        }
    }
}

Read More

Since

product version desc
core 8.0.0.0 기능 추가