--- 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) 소요 시간: 8분 에서 구성요소, 페이지, 데이터 자원 및 선언적 작업에 UI 빌더작업을 추가할 수 있도록 이벤트를 사용하는 방법에 대해 알아봅니다. ## UI 빌더의 작업 {#work-events__section_qk3_tz4_xyb} UI 작업은 [이벤트](https://servicenow-prod.fluidtopics.net/n9UkHaM8My2Hv3gyqpYW0w#gloss-event-ui-builder "사용자가 수행하는 작업(예: 버튼 선택) 또는 페이지에서 발생하는 항목입니다. 대부분의 UI 빌더 구성요소, 페이지 및 데이터 자원에는 기본 연결 이벤트가 있습니다. 이벤트와 함께 이벤트 핸들러를 사용하여 페이지에 추가 작업을 추가합니다.") 가 트리거될 때 수행할 작업을 알려줍니다UI 빌더. 이벤트는 사용자가 수행하는 작업이나 [페이지에서](https://servicenow-prod.fluidtopics.net/n9UkHaM8My2Hv3gyqpYW0w#gloss-page-ui-builder "열 레이아웃, 열 및 구성요소의 컬렉션입니다. 작업 공간 및 포털 환경을 위해 여러 UI 빌더 페이지를 만들거나 사용자 지정합니다.") 발생하는 발생입니다. UI 작업을 사용하여 사용자가 작업을 완료하는 데 도움이 되는 대화형 사용자 친화적 인터페이스를 만듭니다. 각 [구성요소](https://servicenow-prod.fluidtopics.net/n9UkHaM8My2Hv3gyqpYW0w#gloss-component-ui-builder "구성요소는 UI 빌더에서 페이지를 빌드하는 데 사용됩니다. 구성요소에는 최종 사용자가 보고 상호작용할 수 있는 인터페이스가 있습니다. 구성요소는 이벤트 및 속성을 통해 서로 통신할 수 있습니다. 일반적으로 사용되는 구성 요소에는 제목, 이미지, 목록, 양식 및 버튼이 포함됩니다.") 에는 연결된 자체 이벤트가 있습니다. 이벤트에는 다음이 포함됩니다. * 사용자가 데이터 시각화를 클릭 * 페이지가 데이터를 성공적으로 가져옴 * 사용자가 라디오 버튼을 선택합니다. * 페이지 로드 {#work-events__ul_uqx_bq4_xyb} ## UI 빌더의 이벤트 {#work-events__section_m5n_nmy_24b} 이벤트를 사용하여 구성요소, 페이지 및 데이터 자원에 작업을 추가합니다. * 구성요소 이벤트는 구성요소에 대해 설정하는 작업입니다. 이벤트 핸들러를 설정하여 해당 구성요소 작업을 구성합니다. 예를 들어 페이지에 버튼 구성요소를 추가할 수 있습니다 UI 빌더 . 그런 다음 이벤트 핸들러를 추가하여 웹 페이지로 이동하는 것과 같이 해당 버튼에 대한 작업을 적용할 수 있습니다. * 페이지 이벤트는 전체 페이지에 대한 작업을 수행합니다. 다음 페이지 이벤트를 구성할 수 있습니다. * 페이지 이벤트 매핑입니다. 페이지에서 경보 알림을 추가, 제거 또는 지웁니다. * 변형 이벤트 매핑입니다. 페이지 변형에서 경보 알림을 추가, 제거 또는 지웁니다. * 디스패치된 이벤트입니다. 페이지에 대해 디스패치된 이벤트를 생성하여 상위 이벤트 핸들러 뒤에 이벤트를 모델링하는 릴레이된 이벤트 매핑을 생성합니다. 대상 상위 이벤트 핸들러를 선택하여 페이로드 필드를 모델링합니다. * 처리된 이벤트입니다. 처리된 이벤트는 노출되어 다른 사용자가 사용할 수 있는 이벤트입니다. 처리된 이벤트를 생성한 후에는 아래에서 Page event mappings 다른 사용자가 사용할 수 있습니다. 수동으로 생성하거나 처리된 이벤트에 대한 템플릿(예: 모달 대화 상자 열기 또는 닫기)을 설정할 수도 있습니다. {#work-events__ul_nsx_b4y_24b} * 데이터 자원 이벤트는 데이터 자원을 매핑하여 데이터를 가져오는 시기에 대한 정보를 알립니다. * 페이지 또는 구성요소에 대한 이벤트는 이벤트가 하나 이상의 이벤트 핸들러에 매핑될 때까지 아무 작업도 수행하지 않습니다. {#work-events__ul_dr1_3ny_24b} ## UI 빌더의 이벤트 매핑 {#work-events__section_ay2_4my_24b} 버튼을 클릭하거나 필드를 채우는 등의 이벤트에 작업을 매핑합니다. 이벤트 매핑은 이벤트 페이로드 또는 상황별 값을 해당 이벤트에 대해 작용하는 객체 또는 핸들러에 매핑할 수 있는 프로세스입니다. 이벤트 매핑에 대한 자세한 내용은 다음 문서를 참조하십시오 [맵 이벤트 정의](https://servicenow-prod.fluidtopics.net/gltEe7HjxCA3r7Q99hG6wA "의 UI 빌더 이벤트 매핑은 이벤트 페이로드 또는 상황별 값을 해당 이벤트에 대해 작용하는 객체 또는 핸들러에 매핑할 수 있는 프로세스입니다. 네 가지 이벤트 유형은 구성요소, 페이지, 데이터 자원 및 선언적 작업입니다."). ## 의 이벤트 핸들러 UI 빌더 {#work-events__section_fmg_ffb_snb} 이벤트 핸들러는 이벤트가 발생할 때 수행되는 작업입니다. 이벤트 핸들러를 이벤트에 매핑하면 이벤트가 발생할 때 수행할 작업을 지정할 수 있습니다. 이벤트 핸들러를 사용하여 페이지 또는 페이지의 구성요소에 대한 UI 빌더 작업을 구성합니다. 예: * 데이터 시각화를 클릭하면 시각화에 표시된 기록 목록이 열립니다 * 목록의 데이터를 성공적으로 가져오면 데이터 가져오기가 성공했음을 나타내는 경보가 열립니다. * 라디오 버튼을 선택하면 페이지의 목록에 대한 필터가 조정됩니다 * 페이지를 로드하면 계속하기 전에 쿠키 수락을 확인하는 모달이 열립니다. {#work-events__ul_uql_4hb_1zb} 페이지 또는 구성요소에 UI 빌더 이벤트 핸들러를 추가할 때 다양한 유형의 이벤트 핸들러를 선택할 수 있습니다. 예를 들어 Button 구성요소에는 다음과 같은 유형의 이벤트 핸들러가 있을 수 있습니다. * 상속된 이벤트 핸들러입니다. 상속된 이벤트 핸들러는 작업 중인 페이지에서 노출됩니다. 상위 UI 빌더 페이지에 있는 경우 상속된 이벤트 처리기가 앱 셸에서 노출될 수 있습니다. 다음 표에는 사용할 수 있는 다양한 유형의 상속된 이벤트 처리기와 이러한 처리기로 수행할 수 있는 작업이 나와 있습니다.{#work-events__table_uwz_1py_24b__entry__2} | 이벤트 핸들러 | 설명 | |-|-| | 이동 경로 URL 변경됨 | | | 대상에 대한 링크 | 대상으로 이동합니다. * 앱 경로: 홈 화면과 같은 앱 내의 다른 페이지에 연결합니다. * 외부 URL: 웹 사이트 또는 외부 URL에 대한 링크입니다. {#work-events__ul_gj4_3py_24b} 샘플 스크립트 return { route: null, /* Page route, e.g. 'record' */ fields: null, /* Required params, e.g. {"table":"incident","sysId":"X"} */ params: null, /* Optional params, e.g. {"selectedIndex" : 1} */ ☑️redirect: null, /* ??? True/false? */ ☑️passiveNavigation: null, /* Load in background, e.g. 'false' */ title: null, multiInstField: null, ☑️targetRoute: null, /* ??? */ ☑️external: null /* ??? True/false? */ }; | | URL에 매개변수 추가 | URL에 매개변수를 추가합니다. 샘플 스크립트 { "selectedTabIndex" : 0 } | | 모달 대화 상자 열기 또는 닫기 | 모달을 생성한 후 을 사용하여 Open or close modal dialog 모달을 트리거합니다. | [표 1. 상속된 이벤트 핸들러] {#work-events__table_uwz_1py_24b} * 페이지 수준 이벤트 핸들러입니다. 이 유형의 이벤트 핸들러는 모든 페이지에 공통되며 페이지 수준 경보 알림을 추가하거나 지우려는 경우 이 핸들러 유형을 사용합니다. 다음 표에는 사용할 수 있는 다양한 유형의 페이지 수준 이벤트 처리기와 이러한 처리기로 수행할 수 있는 작업이 나열되어 있습니다.{#work-events__table_xdx_dqy_24b__entry__2} | 이벤트 핸들러 | 설명 | |-|-| | 경보 알림 추가 | 경보 알림을 보내는 코드 스니펫을 추가합니다. 예: return { items: [{"type" : "info", "message" : "Info message", "id" : "optionalID"}] /* Types: info, warning, error */ }; | | 경보 알림 제거 | 해제하려는 경보 알림 ID를 호출하는 코드를 추가합니다. 예를 들어 페이지를 로드하는 경보 알림을 제거하려면 버튼을 클릭합니다. | | 경보 알림 지우기 | 해제하려는 모든 경보 알림 ID를 호출하는 코드를 추가합니다. 예를 들어, 모든 경보 알림을 제거하려면 버튼을 클릭합니다. | | 로딩 상태 설정 | 로딩 켜기 또는 끄기 전환. 예를 들어, 버튼을 클릭할 때 로드를 켜서 페이지를 로드하거나, 버튼을 클릭할 때 페이지를 로드하지 않으려면 로딩을 해제할 수 있습니다. | | 클라이언트 상태 매개변수 업데이트 | 클라이언트 상태 매개변수를 선언적으로 설정합니다. 값으로 설정한 클라이언트 상태 매개변수가 있다고 가정해 보겠습니다. 클라이언트 상태 매개변수를 새 값으로 업데이트하도록 이벤트 핸들러를 구성할 Update client state parameter 수 있습니다. 예를 들어 Hello를 초기 값으로 설정하는 Greeting이라는 클라이언트 상태 매개변수가 있다고 가정해 보겠습니다. 이벤트 핸들러를 Update client state parameter 추가하고, 인사말 클라이언트 상태 매개변수를 선택한 다음, Goodbye와 같은 새 값을 입력할 수 있습니다. 버튼을 클릭하면 페이지에서 Goodbye 가 Hello 를 대체합니다. | | UXF macroponent 뷰포트 로드 요청됨 | 버튼 구성요소와 같은 구성요소에 추가하여 뷰포트를 엽니다. 자세한 내용은 [페이지에 뷰포트 구성요소 추가](https://servicenow-prod.fluidtopics.net/KeSwfygW5bmaRZwVycXLwA "페이지에 뷰포트 구성요소를 추가하고 하위 페이지를 만들어 페이지에 별도의 콘텐츠를 생성합니다.") 문서를 참조하십시오. | [표 2. 페이지 수준 이벤트 핸들러] {#work-events__table_xdx_dqy_24b} * 데이터 자원 핸들러입니다. 이 유형의 이벤트 핸들러는 서버에 데이터를 가져오거나 쓰도록 트리거합니다. 버튼을 클릭하여 페이지에서 앱 셸 데이터 소스 데이터를 UI 빌더 새로 고칠 수 있습니다. 예를 들어 데이터 자원 핸들러를 사용하여 다음 작업을 수행할 수 있습니다. * 데이터를 인시던트 기록의 설명에 바인딩합니다. * 인시던트 설명의 값을 변경합니다. * 페이지에 버튼 구성요소를 추가합니다. * 버튼에 인 시던트 새로 고침이라는 레이블을 지정합니다. * 버튼에 대한 이벤트 핸들러를 Look Up Record 추가합니다. * 페이지를 저장합니다. * 인시던트 기록에 대한 설명이 변경되면 새로 고침을 클릭하여 페이지의 설명을 업데이트합니다. {#work-events__ul_cvj_jxy_24b} * 클라이언트 스크립트. 구성요소에서 이벤트가 트리거될 때 실행되는 스크립트입니다. 이러한 스크립트는 의 클라이언트 스크립트 섹션 UI 빌더에서 만듭니다. 자세한 내용은 [구성요소에 클라이언트 스크립트 정의 및 바인딩](https://servicenow-prod.fluidtopics.net/EtLwvMjnKIngJ7836zWPRg "이벤트를 통해 클라이언트 상태를 업데이트할 수 있도록 클라이언트 스크립트를 추가하고 편집합니다.UI 빌더 이벤트 핸들러를 사용하여 이러한 스크립트를 모든 구성요소에 바인딩할 수 있습니다.") 문서를 참조하십시오. {#work-events__ul_wzp_qdc_snb} ## UI 빌더에서 구성요소에 이벤트 바인딩 {#work-events__section_qll_2fb_snb} 이벤트 핸들러를 구성요소의 이벤트에 바인딩합니다. 페이지에 구성요소를 UI 빌더 추가할 때 이러한 구성요소는 페이지에서 어떠한 작업도 수행하도록 구성되지 않습니다. 예를 들어 버튼 구성요소는 정적이며 기록 삭제와 같은 이벤트 작업을 바인딩하기 전까지는 아무 작업도 수행하지 않습니다. 일부 구성요소에는 이벤트 핸들러를 할당할 수 있는 여러 이벤트가 있습니다. 예를 들어 목록 구성요소에서 이벤트에 탐색 핸들러를 할당할 수 있습니다 Row clicked . 이벤트에 열린 모달을 할당할 수도 있습니다.Data fetch failed 자세한 내용은 [이벤트를 구성요소에 바인딩](https://servicenow-prod.fluidtopics.net/VyQMoNx8VmJhLlQkfnvGbQ "구성요소에 이벤트 작업을 추가할 수 있도록 데이터 UI 빌더 요소를 바인딩합니다.") 문서를 참조하십시오. ## UI 빌더 페이지에 이벤트 바인딩 {#work-events__section_upz_rfd_snb} 페이지 수준 이벤트를 바인딩하여 페이지에서 이벤트 핸들러를 실행합니다. 예를 들어 페이지 알림, 페이지 로드 또는 페이지 속성이 변경될 때 페이지 수준 이벤트를 사용합니다. 페이지 수준 이벤트에 이벤트 핸들러를 할당하는 것은 구성요소에서 이벤트에 핸들러를 할당하는 것과 유사합니다. 다음 방법을 사용하여 이벤트 매핑을 바인딩할 수 있습니다. * 페이지 이벤트 매핑입니다. 페이지에서 경보 알림을 추가, 제거 또는 지웁니다. * 변형 이벤트 매핑입니다. 페이지 변형에서 경보 알림을 추가, 제거 또는 지웁니다. * 디스패치된 이벤트입니다. 페이지에 대해 디스패치된 이벤트를 생성하여 상위 이벤트 핸들러 뒤에 이벤트를 모델링하는 릴레이된 이벤트 매핑을 생성합니다. 대상 상위 이벤트 핸들러를 선택하여 페이로드 필드를 모델링합니다. * 처리된 이벤트입니다. 노출되어 다른 사용자가 사용할 수 있는 이벤트에 대해 처리된 이벤트를 추가합니다. {#work-events__ul_sfg_njg_14b} 자세한 내용은 [이벤트를 페이지에 바인딩](https://servicenow-prod.fluidtopics.net/UTehA2XJzJRcaG1Ngy4gHw "페이지에 이벤트 작업을 추가할 수 있도록 페이지 이벤트 매핑을 사용하여 데이터 요소를 UI 빌더 바인딩합니다.") 문서를 참조하십시오. ## UI 빌더에서 데이터 자원에 이벤트 바인딩 {#work-events__section_ztd_sfd_snb} 이벤트 핸들러를 UI 빌더 페이지의 개별 데이터 자원에 바인딩합니다. 예를 들어 데이터 자원이 새 데이터를 성공적으로 가져오면 탐색과 같은 이벤트 핸들러를 실행하여 사용자를 플로우의 다음 단계로 안내합니다. 데이터 자원이 테이블에 기록을 성공적으로 추가하면 모달 이벤트 핸들러 표시를 사용하는 성공 모달이 표시됩니다. 자세한 내용은 [이벤트를 데이터 자원에 바인딩](https://servicenow-prod.fluidtopics.net/GoLNO9g7Kq4OZVZl1_QFXQ "페이지의 개별 데이터 자원에 이벤트 핸들러 UI 빌더 를 할당합니다. 데이터 자원이 새 데이터를 성공적으로 가져오면 이벤트 핸들러를 실행하여 사용자를 플로우의 다음 단계로 안내합니다.") 문서를 참조하십시오. ## UI 빌더에서 선언적 작업에 이벤트 바인딩 {#work-events__section_vm2_sfd_snb} 데이터 요소를 바인딩하여 의 작업 및 구성요소ServiceNow AI Platform®에 있는 선언적 작업 정의에 이벤트 작업을 추가합니다. 예를 들어 데이터 요소를 바인딩하여 이벤트 작업을 추가하고 테이블에 대한 작업을 완료할 수 있습니다. 선언적 작업이 있는 구성요소를 UI 빌더 페이지에 추가하는 경우 처리된 이벤트에 바인딩해야 합니다. 처리된 이벤트는 사용자가 구성요소를 선택할 때 수행되는 작업을 생성합니다. 선언적 작업 이벤트 매핑 구성을 선택하면 새 이벤트 핸들러를 추가하여 선언적 작업이 페이지에서 수행하는 작업을 정의합니다. 자세한 내용은 [이벤트를 선언적 작업에 바인딩](https://servicenow-prod.fluidtopics.net/1RvDFpVnAJsWYKCOfpde~w "선언적 작업에 이벤트 작업을 추가할 수 있도록 데이터 UI 빌더 요소를 바인딩합니다.") 문서를 참조하십시오. * **[맵 이벤트 정의](https://servicenow-prod.fluidtopics.net/gltEe7HjxCA3r7Q99hG6wA)** 의 UI 빌더 이벤트 매핑은 이벤트 페이로드 또는 상황별 값을 해당 이벤트에 대해 작용하는 객체 또는 핸들러에 매핑할 수 있는 프로세스입니다. 네 가지 이벤트 유형은 구성요소, 페이지, 데이터 자원 및 선언적 작업입니다. * **[UI 빌더의 이벤트 페이로드](https://servicenow-prod.fluidtopics.net/nsLx5XOJN8b5KoVNDFt5Tg#event-payloads)** 이벤트 페이로드를 사용하여 데이터를 작업에 연결합니다. * **[수동으로 이벤트 핸들러 구성](https://servicenow-prod.fluidtopics.net/SokfGGSdUoeL4CfdwTwK9g)** 사용자가 작업을 트리거할 수 있도록 페이지, 구성요소, 데이터 자원 또는 선언적 작업에 UI 빌더 이벤트 핸들러를 추가합니다. * **[이벤트를 바인딩하여 작업 추가](https://servicenow-prod.fluidtopics.net/LapuOEPJwzwzHHvSUCMPDQ)** 이벤트를 생성한 후에는 이벤트를 구성요소, 페이지, 데이터 자원 및 선언적 작업에 대한 작업에 바인딩할 수 있습니다. * **[구성요소 사전 설정 이벤트 매핑 사용 안 함](https://servicenow-prod.fluidtopics.net/dMZnr_nXdAP~~YSNxVAXaw)** 구성요소 사전 설정에 의해 자동으로 생성된 이벤트 매핑을 사용하지 않도록 설정할 수 있습니다. * **[이벤트 핸들러 삭제](https://servicenow-prod.fluidtopics.net/sKaSndRa1Z1psj7PelEx_A)** 에서 더 이상 필요하지 않은 이벤트 핸들러를 삭제합니다 UI 빌더. * **[이벤트 매핑 삭제](https://servicenow-prod.fluidtopics.net/Hx0t_YhEH~E~N1Hw4o_cBg)** 에서 더 이상 필요하지 않은 이벤트 매핑을 삭제합니다 UI 빌더. * **[이벤트를 추가하여 저장되지 않은 변경 내용이 있는 구성요소를 추적합니다.](https://servicenow-prod.fluidtopics.net/W4PL89xibpUfVCB~IwnmeQ)** 이벤트 구성을 통해 더티 상태 구성요소를 찾습니다. * **[UI 상호작용](https://servicenow-prod.fluidtopics.net/CS38~JmdvKLc5wzPEvAfxA)** 의 UI 빌더이벤트에서 직접 UI 상호작용을 트리거하면 이벤트 기반 동작을 재사용 가능한 상호작용 논리에 연결할 수 있습니다.