LWC 성공, 실패, 에러 알람 띄우기 (ShowToast) - Display success, failure, and error alarm messages

 

1. import {ShowToastEvent} 및 showToast 메서드 생성

JS 파일

1. import { ShowToastEvent } from 'lightning/platformShowToastEvent';
2. showToast(title, message, variant){ ... }
3. showToast 메서드 호출 

 

  import { ShowToastEvent } from 'lightning/platformShowToastEvent';         //1번

 

  export default class zz_clvs_MDE_Template_Create extends LightningElement {

   

   

    //취소버튼 클릭 시 전자계약 템플릿 개체 목록보기 페이지로 이동

    returnListVeiw(event){

 

       var titleInput  = event.detail.value;

 

       if (titleInput == null || titleInput == '' || titleInput == undefined) ) {

         this.showToast('경고', '템플릿 제목을 입력해 주세요.', 'Error');           //3번

       }

 

 

   //showToast 메서드

    showToast(title, message, variant) {                                                        //2번

        const toastEvent = new ShowToastEvent({

            title: title,

            message: message,

            variant: variant,

        });

        this.dispatchEvent(toastEvent);

    }

 

 

  }//class

 

 

---

2. ShowToast 파라미터

title	String	The title of the toast, displayed as a heading.
message	String	A string containing a message for the user.
messageData	String[] or Object	url and label values that replace the {index} placeholders in the message string.
variant	String	The theme and icon displayed in the toast. Valid values are: info—(Default) A gray box with an info icon. success—A green box with a checkmark icon. warning—A yellow box with a warning icon. error—A red box with an error icon. You can see the styling for each theme in the Lightning Design System documentation.
mode	String	Determines how persistent the toast is. Valid values are: dismissible—(Default) Remains visible until the user clicks the close button or 3 seconds has elapsed, whichever comes first. pester—Remains visible for 3 seconds. sticky—Remains visible until the user clicks the close button.

 

---

 

3. variant 파리미터 값 체크

 

 

this.showToast('variant=Warning', '템플릿 제목을 입력해 주세요.', 'Warning');

this.showToast('variant=Success', '템플릿 제목을 입력해 주세요.', 'Success');

this.showToast('variant=Error',      '템플릿 제목을 입력해 주세요.', 'Error');

this.showToast('variant=Info',        '템플릿 제목을 입력해 주세요.', 'Info');

 

 

---

 

4. Tip)  window.confirm(); 활용

• const confirmation = window.confirm('정말 취소하시겠습니까?');

 

 

JS파일

 

 

//취소버튼 클릭 호출

    returnListVeiw(event){

       

        const confirmation = window.confirm('정말 취소하시겠습니까?');

       

        if (confirmation) {

           

              //확인 눌렀을 시 실행할 작업 - 예) redirect 화면이동, showToast 표시 등

 

        }

       

    }