에서 경보 메시지 생성 및 사용자 지정 UI 빌더
경보 메시지가 기본 및 스크립팅된 접근 방식을 모두 사용하여 피드백 및 상태 업데이트를 전달하는 데 어떻게 도움이 되는지 알아봅니다.
경보는 피드백, 경고, 확인과 같은 표준화된 알림을 표시하는 구성요소입니다. 스크립팅 없이 쉽게 구성할 수 있지만 고급 기능을 위해 스크립트를 추가할 수 있습니다.
UI 빌더 는 여러 유형의 경보 메시지를 지원합니다. 각각의 동작 방식을 보려면 경보 구성 요소 설명서 를 열고 대화형 미리 보기에서 다양한 설정을 시도하십시오.
에서 경보 메시지 생성 UI 빌더
스크립팅 없이 간단한 알림에 대한 경보 메시지를 추가하고 구성합니다.
시작하기 전에
필요한 역할: ui_builder_admin
이 태스크 정보
간단한 알림에는 기본 경보 메시지 구성을 사용합니다. 이 예에서는 경보에 로그인한 사용자의 전체 이름을 사용하여 개인화된 인사말이 표시됩니다.
이 절차는 구성요소를 사용하여 UI 빌더 동적인 대화형 레이아웃을 만듭니다. 구성요소를 구성하는 방법에 대한 자세한 내용은 다음을 참조하십시오.
프로시저
-
경보를 추가합니다.
-
콘텐츠 트리에서 경보 1 위에 마우스를 대고 구성 아이콘을
선택한 다음 이름 바꾸기를 선택합니다.
-
콘텐츠 트리에서 경보 1 위에 마우스를 대고 구성 아이콘을
-
경보 메시지를 구성합니다.
-
컨텐츠 트리에서 환영 메시지를 선택한 상태에서 구성 패널로 이동하여 다음 속성을 설정합니다.
필드 값 유형 정보 아이콘 원형 정보 개요 머리글 비어 있음(필드 내의 텍스트 삭제) 링크 비어 있음( 편집을 선택한 다음 레이블 및 Href 내의 텍스트 삭제) 동작 비어 있음( 편집을 선택하고 유형을-- 없음 --으로 설정한 다음 레이블 및 Href 내의 텍스트 삭제) 구성 패널은 다음과 같이 표시됩니다.
-
메시지 필드 위에 마우스를 대고 데이터 바인딩 아이콘
을 선택합니다.
-
수식을 선택한 다음 문자열을 선택한 다음 CONCAT을 두 번 클릭하거나 드래그하여 수식을 위의 영역으로 이동합니다.
-
fullName을 두 번 클릭하거나 끌어서 위 영역으로 이동한 다음 적용을 선택합니다.
-
컨텐츠 트리에서 환영 메시지를 선택한 상태에서 구성 패널로 이동하여 다음 속성을 설정합니다.
-
페이지를 저장하고 테스트합니다.
- 오른쪽 상단의 저장을 선택합니다.
- 미리 보기를 선택합니다.
경보는 "환영합니다!" 텍스트와 함께 페이지 상단에 표시되며 이어서 로그인한 사용자의 이름이 표시됩니다.
에서 클라이언트 스크립트로 경보 메시지 사용자 지정 UI 빌더
클라이언트 스크립트를 사용하여 상황에 맞는 동적인 경보 메시지를 작성합니다.
시작하기 전에
필요한 역할: 관리자
이 태스크 정보
스크립팅된 경보는 이벤트 또는 외부 데이터에 응답하는 알림을 제공합니다. 매우 유연하고 복잡한 조건에 대응할 수 있지만 유지 관리하려면 스크립팅 지식과 더 많은 노력이 필요합니다. 이 예시에서 버튼은 사용자 지정 메시지와 함께 여러 경보를 생성하는 클라이언트 스크립트를 트리거합니다.
- 버튼: 경보를 표시하도록 클라이언트 스크립트를 트리거합니다.
- 경보: 사용자 지정 메시지를 표시합니다.
이 절차는 구성요소를 사용하여 UI 빌더 동적인 대화형 레이아웃을 만듭니다. 구성요소를 구성하는 방법에 대한 자세한 내용은 다음을 참조하십시오.
프로시저
-
버튼을 추가합니다.
-
콘텐츠 트리에서 버튼 1 위에 마우스를 대고 구성 아이콘을 선택한 다음 이름 바꾸기를 선택합니다.
-
콘텐츠 트리에서 버튼 1 위에 마우스를 대고 구성 아이콘을
-
클라이언트 스크립트를 생성합니다.
-
데이터 및 스크립트에서클라이언트 스크립트 옆에 있는 +를 선택합니다.
-
코드를 다음으로 바꿉니다.
팁:코드 포맷 아이콘을
선택하여 코드를 가독성을 높일 수 있습니다./** * @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: "<h2>Critical: System failure detected!</h2>" }, 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: "<h4> Warning: A new software update is ready. </h4>" }, 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" } } ] }); }
-
데이터 및 스크립트에서클라이언트 스크립트 옆에 있는 +를 선택합니다.
-
이벤트를 사용하여 버튼을 클라이언트 스크립트에 연결합니다.
-
경보를 검색한 다음 클라이언트 스크립트에서 경보 핸들러를 선택합니다.
-
경보를 검색한 다음 클라이언트 스크립트에서 경보 핸들러를 선택합니다.
-
페이지를 저장하고 테스트합니다.
- 오른쪽 상단의 저장을 선택합니다.
- 미리 보기를 선택합니다.
이 버튼을 선택하면 클라이언트 스크립트에서 정의한 메시지와 함께 여러 경보가 표시됩니다.