--- sourceDocument: 호주 애플리케이션 빌드 또는 수정 sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ko-KR/application-development Release : - australia ft:locale : - ko-KR ft:publication_title : - 호주 애플리케이션 빌드 또는 수정 ft:clusterId : - cadev bundleId : - cadev workflow : - Development, Data, and Analytics --- # UI 빌더에서 경보 메시지 생성 및 사용자 지정 # UI 빌더에서 경보 메시지 생성 및 사용자 지정 {#ariaid-title1} * 릴리스 버전: Australia * * 업데이트 날짜 2026년 03월 12일 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 소요 시간: 7분 경보 메시지가 기본 및 스크립팅된 접근 방식을 모두 사용하여 피드백 및 상태 업데이트를 전달하는 데 어떻게 도움이 되는지 알아봅니다. 경보는 피드백, 경고, 확인과 같은 표준화된 알림을 표시하는 구성요소입니다. 스크립팅 없이 쉽게 구성할 수 있지만 고급 기능을 위해 스크립트를 추가할 수 있습니다. 그림 1. 경보 메시지 유형 UI 빌더 는 여러 유형의 경보 메시지를 지원합니다. 각각의 동작 방식을 보려면 [경보 구성 요소 설명서](https://horizon.servicenow.com/workspace/components/now-alert?release=zurich#overview) 를 열고 대화형 미리 보기에서 다양한 설정을 시도하십시오. ## UI 빌더에서 경보 메시지 생성 {#ariaid-title2} 스크립팅 없이 간단한 알림에 대한 경보 메시지를 추가하고 구성합니다. ### 시작하기 전에 필요한 역할: ui_builder_admin ### 이 태스크 정보 간단한 알림에는 기본 경보 메시지 구성을 사용합니다. 이 예에서는 경보에 로그인한 사용자의 전체 이름을 사용하여 개인화된 인사말이 표시됩니다. 이 절차는 구성요소를 사용하여 UI 빌더 동적인 대화형 레이아웃을 만듭니다. 구성요소를 구성하는 방법에 대한 자세한 내용은 다음을 참조하십시오. * [구성요소 추가 및 구성](https://servicenow-prod.fluidtopics.net/qmxQoGzAEcZmJDRXYpo1aw#add-components "에서 페이지에 UI 빌더구성요소를 추가하는 방법에 대해 알아봅니다. 구성요소를 추가하여 페이지가 빌드됩니다.") * [UI Builder 간략한 정보: 구성요소 구성 탐색](https://www.servicenow.com/community/next-experience-blog/ui-builder-quick-bits-navigating-component-configuration/ba-p/3181624) {#comp-ex-create-alert-messages__ul_et1_5sg_dhc} {#comp-ex-create-alert-messages__table_exc_zzf_dhc__entry__2} | 구성요소 | 문서 링크 | |-|-| | 경보 | * [사용 가이드라인](https://horizon.servicenow.com/workspace/components/now-alert?release=zurich) * [UIB 설정](https://developer.servicenow.com/dev.do#!/reference/next-experience/zurich/now-components/now-alert/uib-setup%23properties) {#comp-ex-create-alert-messages__ul_ryg_ltm_khc} | [표 1. 이 절차에 사용되는 구성요소] {#comp-ex-create-alert-messages__table_exc_zzf_dhc} ### 프로시저 1. 다음으로 이동 모두Now Experience 프레임워크UI 빌더. 2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성경험. 경험 생성에 대한 자세한 내용은 다음을 참조하십시오 [UI 빌더에서 사용자가 애플리케이션과 상호 작용하는 방법 구성](https://servicenow-prod.fluidtopics.net/wmSXv2G8HVoRum7Zuh3W9w "에서 경험이 UI 빌더무엇인지 알아봅니다. 경험에 포함된 내용을 이해합니다.") . 3. 처음부터 페이지를 생성합니다. 페이지를 생성하는 방법에 대한 자세한 내용은 [UI 빌더에서 페이지 생성을](https://servicenow-prod.fluidtopics.net/hdB5pxJ108nQsFmjCl3uYg "사용자를 위한 웹 환경을 구축할 수 있도록 포털, 작업 공간 또는 사용자 지정 애플리케이션에 대한 페이지를 생성합니다.UI 빌더") 참조하세요. 4. 경보를 추가합니다. 1. 콘텐츠 트리에서 + 콘텐츠 추가를 선택합니다. 2. 경보를 검색한 다음 추가를 선택하여 페이지에 구성요소를 배치합니다. 3. 콘텐츠 트리에서 경보 1 위에 마우스를 대고 구성 아이콘을 ![]()선택한 다음 이름 바꾸기를 선택합니다. 4. 구성요소 레이블 필드의 텍스트를 환영 메시지로 바꿉니다. 구성요소 ID 필드가 자동으로 채워집니다. 5. 적용을 선택합니다. {#comp-ex-create-alert-messages__substeps_tdv_gwm_khc} 5. 경보 메시지를 구성합니다. 1. 컨텐츠 트리에서 환영 메시지를 선택한 상태에서 구성 패널로 이동하여 다음 속성을 설정합니다. {#comp-ex-create-alert-messages__table_xwg_bxm_khc__entry__2} | 필드 | 값 또는 작업 | |-|-| | 유형 | 정보 | | 아이콘 | 원형 정보 개요 | | 머리글 | 주의! | | 링크 | (비워 두기) --- 편집을 선택한 다음 레이블 및 Href 내의 텍스트를 삭제합니다. | | 동작 | (비워 두기) --- 편집을 선택하고 유형을-- 없음 --으로 설정한 다음 레이블 및 Href 내부의 텍스트를 삭제합니다. | [ ] {#comp-ex-create-alert-messages__table_xwg_bxm_khc} 구성 패널은 다음과 같이 표시됩니다. 2. 메시지 필드 위에 마우스를 대고 데이터 바인딩 아이콘 ![]()을 선택합니다. 3. 수식을 선택한 다음 문자열을 선택한 다음 CONCAT을 두 번 클릭하거나 드래그하여 수식을 위의 영역으로 이동합니다. 4. value1을 두 번 클릭하여 필드를 선택한 다음 다시 선택하여 텍스트를 삽입합니다. 5. " 다음으로 로그인했습니다"를 입력하고 느낌표 뒤에 후행 공백을 포함해야 합니다. 6. 값을 두 번 클릭하여 필드를 선택한 다음 다시 선택하여 텍스트를 삽입합니다. 7. 데이터 유형을 선택한 다음 페이지 속성을 선택합니다. 8. 알약 뷰에서 다음 순서대로 알약을 선택합니다. 세션사용자fullName. 9. fullName을 두 번 클릭하거나 끌어서 위 영역으로 이동한 다음 적용을 선택합니다. {#comp-ex-create-alert-messages__substeps_yjd_wwm_khc} 6. 페이지를 저장하고 테스트합니다. 1. 오른쪽 상단의 저장을 선택합니다. 2. 미리 보기를 선택합니다. {#comp-ex-create-alert-messages__substeps_fvf_5ln_khc} 경보는 페이지 상단에 "주의! 다음에 로그인한 사용자 이름으로 로그인했습니다. ## UI 빌더에서 클라이언트 스크립트로 경보 메시지 사용자 지정 {#ariaid-title3} 클라이언트 스크립트를 사용하여 상황에 맞는 동적인 경보 메시지를 작성합니다. ### 시작하기 전에 필요한 역할: 관리자 ### 이 태스크 정보 스크립팅된 경보는 이벤트 또는 외부 데이터에 응답하는 알림을 제공합니다. 매우 유연하고 복잡한 조건에 대응할 수 있지만 유지 관리하려면 스크립팅 지식과 더 많은 노력이 필요합니다. 이 예시에서 버튼은 사용자 지정 메시지와 함께 여러 경보를 생성하는 클라이언트 스크립트를 트리거합니다. 이 절차는 구성요소를 사용하여 UI 빌더 동적인 대화형 레이아웃을 만듭니다. 구성요소를 구성하는 방법에 대한 자세한 내용은 다음을 참조하십시오. * [구성요소 추가 및 구성](https://servicenow-prod.fluidtopics.net/qmxQoGzAEcZmJDRXYpo1aw#add-components "에서 페이지에 UI 빌더구성요소를 추가하는 방법에 대해 알아봅니다. 구성요소를 추가하여 페이지가 빌드됩니다.") * [UI Builder 간략한 정보: 구성요소 구성 탐색](https://www.servicenow.com/community/next-experience-blog/ui-builder-quick-bits-navigating-component-configuration/ba-p/3181624) {#comp-ex-customize-alert-messages__ul_et1_5sg_dhc} {#comp-ex-customize-alert-messages__table_exc_zzf_dhc__entry__2} | 구성요소 | 문서 링크 | |-|-| | 버튼 | * [사용 가이드라인](https://horizon.servicenow.com/workspace/components/now-button?release=zurich) * [UIB 설정](https://developer.servicenow.com/dev.do#!/reference/next-experience/zurich/now-components/now-button/uib-setup%23properties) {#comp-ex-customize-alert-messages__ul_pcz_swn_khc} | | 경보 | * [사용 가이드라인](https://horizon.servicenow.com/workspace/components/now-alert?release=zurich) * [UIB 설정](https://developer.servicenow.com/dev.do#!/reference/next-experience/zurich/now-components/now-alert/uib-setup%23properties) {#comp-ex-customize-alert-messages__ul_ryg_ltm_khc} | [표 2. 이 절차에 사용되는 구성요소] {#comp-ex-customize-alert-messages__table_exc_zzf_dhc} ### 프로시저 1. 다음으로 이동 모두Now Experience 프레임워크UI 빌더. 2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성경험. 경험 생성에 대한 자세한 내용은 다음을 참조하십시오 [UI 빌더에서 사용자가 애플리케이션과 상호 작용하는 방법 구성](https://servicenow-prod.fluidtopics.net/wmSXv2G8HVoRum7Zuh3W9w "에서 경험이 UI 빌더무엇인지 알아봅니다. 경험에 포함된 내용을 이해합니다.") . 3. 처음부터 페이지를 생성합니다. 페이지를 생성하는 방법에 대한 자세한 내용은 [UI 빌더에서 페이지 생성을](https://servicenow-prod.fluidtopics.net/hdB5pxJ108nQsFmjCl3uYg "사용자를 위한 웹 환경을 구축할 수 있도록 포털, 작업 공간 또는 사용자 지정 애플리케이션에 대한 페이지를 생성합니다.UI 빌더") 참조하세요. 4. 버튼을 추가합니다. 1. 콘텐츠 트리에서 + 콘텐츠 추가를 선택합니다. 2. 버튼을 검색하고 도구 상자에서 추가합니다. 3. 콘텐츠 트리에서 버튼 1 위에 마우스를 대고 구성 아이콘을 ![]()선택한 다음 이름 바꾸기를 선택합니다. 4. 구성요소 레이블 필드의 텍스트를 Showcase Alerts로 대체합니다. 구성요소 ID 필드가 자동으로 채워집니다. 5. 적용을 선택합니다. {#comp-ex-customize-alert-messages__substeps_dtj_mtn_khc} 5. 클라이언트 스크립트를 생성합니다. 1. 데이터 및 스크립트에서클라이언트 스크립트 옆에 있는 +를 선택합니다. 2. 스크립트 이름의 텍스트를 경보로 대체합니다. 3. 코드를 다음으로 바꿉니다. 팁: 코드 포맷 아이콘을 ![]() 선택하여 코드를 가독성을 높일 수 있습니다. /** * @param {params} params * @param {api} params.api * @param {any} params.event * @param {any} params.imports * @param {ApiHelpers} params.helpers */ function handler({ api, event, helpers, imports }) { api.emit("NOW_UXF_PAGE#ADD_NOTIFICATIONS", { items: [ { id: "alert1", status: "critical", icon: "circle-exclamation-fill", content: { type: "html", value: "

Critical: System failure detected!

" }, action: { type: "dismiss" } }, { id: "alert2", status: "high", icon: "circle-exclamation-outline", content: { type: "string", value: "High: CPU usage exceeded 90%" }, action: { type: "dismiss" } }, { id: "alert3", status: "moderate", icon: "circle-pause-outline", content: { type: "string", value: "Moderate: Disk space is below 20%" }, action: { type: "dismiss" } }, { id: "alert4", status: "warning", icon: "triangle-exclamation-outline", content: { type: "html", value: "

Warning: A new software update is ready.

" }, action: { type: "dismiss" } }, { id: "alert5", status: "info", icon: "circle-question-fill", content: { type: "string", value: "Info: A new software update is available" }, action: { type: "dismiss" } }, { id: "alert6", status: "positive", icon: "check-circle-outline", content: { type: "string", value: "Positive: Backup completed successfully" }, action: { type: "dismiss" } }, { id: "alert7", status: "low", icon: "bell-fill", content: { type: "string", value: "Low: Minor update recommended" }, action: { type: "dismiss" } } ] }); } 4. 적용을 선택합니다. {#comp-ex-customize-alert-messages__substeps_gn3_d5n_khc} 6. 이벤트를 사용하여 버튼을 클라이언트 스크립트에 연결합니다. 1. 콘텐츠 트리에서 우리가 만든 버튼인 경보 표시를 선택합니다. 2. 구성 패널에서 이벤트 탭을 선택합니다. 3. 버튼 클릭됨 이벤트에서 처리기 추가를 선택합니다. 4. 경보를 검색한 다음 클라이언트 스크립트에서 경보 핸들러를 선택합니다. 5. 계속을 선택합니다. 6. 추가를 선택합니다. {#comp-ex-customize-alert-messages__substeps_c1k_3vn_khc} 7. 페이지를 저장하고 테스트합니다. 1. 오른쪽 상단의 저장을 선택합니다. 2. 미리 보기를 선택합니다. {#comp-ex-customize-alert-messages__substeps_nm4_2wn_khc} 이 버튼을 선택하면 클라이언트 스크립트에서 정의한 메시지와 함께 여러 경보가 표시됩니다.