UI 빌더 페이지에서 작업 관리

에서 UI 빌더구성요소, 페이지, 데이터 자원 및 선언적 작업에 작업을 추가할 수 있도록 이벤트를 사용하는 방법에 대해 알아봅니다.

의 작업 UI 빌더

UI 작업은 이벤트가 트리거될 때 수행할 작업을 알려줍니다UI 빌더. 이벤트는 사용자가 수행하는 작업 또는 페이지에서 발생하는 항목입니다. UI 작업을 사용하여 사용자가 작업을 완료하는 데 도움이 되는 사용자 친화적인 대화형 인터페이스를 만들 수 있습니다. 각 구성요소 에는 연결된 자체 이벤트가 있습니다. 이벤트는 다음과 같습니다.

• 사용자가 데이터 시각화를 클릭합니다.
• 페이지에서 데이터를 성공적으로 가져옴
• 사용자가 라디오 버튼을 선택합니다.
• 페이지 로드

의 이벤트 UI 빌더

이벤트를 사용하여 구성요소, 페이지 및 데이터 자원에 작업을 추가합니다.

• 구성요소 이벤트는 구성요소에 대해 설정하는 작업입니다. 해당 구성요소 작업을 구성하는 이벤트 핸들러를 설정합니다. 예를 들어 페이지에 버튼 구성요소를 추가할 수 있습니다 UI 빌더 . 그런 다음 이벤트 처리기를 추가하여 해당 단추에 대한 작업(예: 웹 페이지로 이동)을 적용할 수 있습니다.
• 페이지 이벤트는 전체 페이지에 대해 작업을 수행합니다. 다음 페이지 이벤트를 구성할 수 있습니다.
  • 페이지 이벤트 매핑. 페이지에서 경보 알림을 추가, 제거 또는 지웁니다.
  • 변형 이벤트 매핑 페이지 변형에서 경보 알림을 추가, 제거 또는 지웁니다.
  • 디스패치된 이벤트입니다. 페이지에 디스패치된 이벤트를 생성하여 상위 이벤트 핸들러 뒤에 이벤트를 모델링하는 릴레이된 이벤트 매핑을 생성합니다. 대상 상위 이벤트 핸들러를 선택하여 그 뒤에 페이로드 필드를 모델링합니다.
  • 처리된 이벤트입니다. 처리된 이벤트는 노출되어 다른 사용자가 사용할 수 있는 이벤트입니다. 처리된 이벤트를 만든 후에는 아래에서 Page event mappings 다른 사용자가 사용할 수 있습니다. 수동으로 생성하는 페이로드 필드를 설정하거나 처리된 이벤트에 대한 템플릿을 선택할 수도 있습니다(예: 모달 대화 상자 열기 또는 닫기).
• 데이터 자원 이벤트는 데이터 자원을 매핑하여 데이터를 가져오는 시기에 대한 정보를 알립니다.
• 페이지 또는 구성 요소에 대한 이벤트는 이벤트가 하나 이상의 이벤트 처리기에 매핑될 때까지 아무 작업도 수행하지 않습니다.

의 이벤트 매핑 UI 빌더

버튼 클릭 또는 필드 채우기와 같은 이벤트에 작업을 매핑합니다. 이벤트 매핑은 이벤트의 페이로드 또는 상황별 값을 해당 이벤트에 대해 작동하는 객체 또는 핸들러에 매핑할 수 있는 프로세스입니다.

이벤트 매핑에 대한 자세한 내용은 다음 문서를 참조하십시오 맵 이벤트 정의.

의 이벤트 핸들러 UI 빌더

이벤트 핸들러는 이벤트가 발생할 때 수행되는 작업입니다. 이벤트 핸들러를 이벤트에 매핑하면 이벤트가 발생할 때 수행할 작업을 지정할 수 있습니다. 이벤트 핸들러를 사용하여 페이지 또는 페이지의 구성요소에 대한 UI 빌더 작업을 구성합니다. 예:

• 데이터 시각화를 클릭하면 시각화에 표시된 기록 목록이 열립니다.
• 목록에 대한 데이터를 성공적으로 가져오면 데이터 가져오기가 성공했음을 나타내는 경보가 열립니다.
• 라디오 버튼을 선택하면 페이지의 목록에 대한 필터가 조정됩니다.
• 페이지를 로드하면 모달이 열리고 계속하기 전에 쿠키 수락을 확인합니다.

페이지 또는 구성 요소에 이벤트 처리기 UI 빌더 를 추가할 때 다양한 유형의 이벤트 처리기를 선택할 수 있습니다. 예를 들어, Button 구성 요소에는 다음과 같은 유형의 이벤트 처리기가 있을 수 있습니다.

• 상속된 이벤트 핸들러. 상속된 이벤트 처리기는 작업 중인 페이지에서 노출됩니다. 부모 UI 빌더 페이지에 있는 경우 상속된 이벤트 처리기가 앱 셸에서 노출될 수 있습니다. 다음 표에서는 사용할 수 있는 상속된 이벤트 처리기의 다양한 형식과 이러한 처리기로 수행할 수 있는 작업을 보여 줍니다.

  표 1. 상속된 이벤트 핸들러

  이벤트 핸들러	설명
  이동 경로 URL 변경됨
  대상에 대한 링크	대상으로 이동합니다. 앱 경로: 홈 화면과 같은 앱 내의 다른 페이지로 연결합니다. 외부 URL: 웹 사이트 또는 외부 URL에 대한 링크입니다. 샘플 스크립트 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 .

• 페이지 수준 이벤트 핸들러. 이 유형의 이벤트 핸들러는 모든 페이지에 공통적이며 페이지 수준 경보 알림을 추가하거나 지우려는 경우 이 핸들러 유형을 사용합니다. 다음 표에서는 사용할 수 있는 다양한 유형의 페이지 수준 이벤트 처리기와 이러한 처리기로 수행할 수 있는 작업을 보여 줍니다.

  표 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와 같은 새 값을 입력할 수 있습니다. 버튼을 클릭하면 페이지의 Hello가 Goodbye로 바 뀝니다.
  UXF macroponent 뷰포트 로드 요청됨	버튼 구성요소와 같은 구성요소에 추가하여 뷰포트를 엽니다. 자세한 내용은 페이지에 뷰포트 구성요소 추가 문서를 참조하십시오.

• 데이터 자원 핸들러. 이 유형의 이벤트 핸들러는 서버에 대한 데이터 가져오기 또는 쓰기를 트리거합니다.
  버튼을 클릭하여 페이지에서 앱 셸 데이터 소스 데이터를 UI 빌더 새로 고칠 수 있습니다. 예를 들어 데이터 자원 핸들러를 사용하여 다음 작업을 수행할 수 있습니다.

  • 인시던트 기록의 설명에 데이터를 바인딩합니다.
  • 인시던트 설명의 값을 변경합니다.
  • 페이지에 버튼 구성요소를 추가합니다.
  • 버튼에 인시던트 새로 고침이라는 레이블을 지정합니다.
  • Look Up Record 버튼에 대한 이벤트 핸들러를 추가합니다.
  • 페이지를 저장합니다.
  • 인시던트 기록에 대한 설명이 변경되면 새로 고침 을 클릭하여 페이지의 설명을 업데이트합니다.
• 클라이언트 스크립트. 구성요소에 대해 이벤트가 트리거될 때 실행되는 스크립트입니다. 의 클라이언트 스크립트 섹션에서 UI 빌더이러한 스크립트를 만듭니다. 자세한 내용은 구성요소에 클라이언트 스크립트 정의 및 바인딩 문서를 참조하십시오.

에서 이벤트를 구성요소에 바인딩 UI 빌더

이벤트 핸들러를 구성요소의 이벤트에 바인딩합니다. 페이지에 구성요소 UI 빌더 를 추가할 때 이러한 구성요소는 페이지에서 작업을 수행하도록 구성되지 않습니다. 예를 들어 버튼 구성요소는 정적이며, 기록 삭제와 같은 이벤트 작업을 바인딩할 때까지 아무 작업도 수행하지 않습니다. 일부 구성요소에는 이벤트 핸들러를 할당할 수 있는 여러 이벤트가 있습니다. 예를 들어 목록 구성 요소에서 이벤트에 탐색 핸들러를 할당할 수 있습니다 Row clicked . 열린 모달을 이벤트에 할당할 수도 있습니다 Data fetch failed . 자세한 내용은 구성요소에 이벤트 바인딩 문서를 참조하십시오.

이벤트를 UI 빌더 페이지에 바인딩

페이지 수준 이벤트를 바인딩하여 페이지에서 이벤트 핸들러를 실행합니다. 예를 들어 페이지 알림, 페이지 로드 또는 페이지 속성이 변경될 때 페이지 수준 이벤트를 사용합니다. 페이지 수준 이벤트에 이벤트 핸들러를 할당하는 것은 구성 요소에서 이벤트에 핸들러를 할당하는 것과 유사합니다.

다음 방법을 사용하여 이벤트 매핑을 바인딩할 수 있습니다.

• 페이지 이벤트 매핑. 페이지에서 경보 알림을 추가, 제거 또는 지웁니다.
• 변형 이벤트 매핑 페이지 변형에서 경보 알림을 추가, 제거 또는 지웁니다.
• 디스패치된 이벤트입니다. 페이지에 디스패치된 이벤트를 생성하여 상위 이벤트 핸들러 뒤에 이벤트를 모델링하는 릴레이된 이벤트 매핑을 생성합니다. 대상 상위 이벤트 핸들러를 선택하여 그 뒤에 페이로드 필드를 모델링합니다.
• 처리된 이벤트입니다. 노출되어 다른 사용자가 사용할 수 있는 이벤트에 대해 처리된 이벤트를 추가합니다.

자세한 내용은 이벤트를 페이지에 바인딩 문서를 참조하십시오.

에서 이벤트를 데이터 자원에 바인딩 UI 빌더

이벤트 핸들러를 페이지의 개별 데이터 자원에 바인딩합니다 UI 빌더 . 예를 들어 데이터 자원이 새 데이터를 성공적으로 가져오면 탐색과 같은 이벤트 핸들러를 실행하여 사용자를 플로우의 다음 단계로 안내합니다. 데이터 자원이 테이블에 기록을 성공적으로 추가하면 show modal 이벤트 핸들러를 사용하는 성공 모달이 표시됩니다. 자세한 내용은 이벤트를 데이터 자원에 바인딩 문서를 참조하십시오.

에서 이벤트를 선언적 작업에 바인딩 UI 빌더

데이터 요소를 바인딩하여 의 Now Platform®작업 및 구성 요소에서 선언적 작업 정의에 이벤트 작업을 추가합니다. 예를 들어, 데이터 요소를 바인딩하여 테이블에 대한 작업을 완료하기 위한 이벤트 동작을 추가할 수 있습니다.

선언적 작업이 있는 페이지에 구성요소 UI 빌더 를 추가하는 경우 처리된 이벤트에 바인딩해야 합니다. 처리된 이벤트는 사용자가 구성요소를 선택할 때 수행되는 작업을 생성합니다. 선언적 작업 이벤트 매핑 구성을 선택하면 새 이벤트 핸들러를 추가하여 선언적 작업이 페이지에서 수행하는 작업을 정의할 수 있습니다.

자세한 내용은 이벤트를 선언적 작업에 바인딩 문서를 참조하십시오.

• 맵 이벤트 정의
  의 UI 빌더 이벤트 매핑은 이벤트의 페이로드 또는 상황별 값을 해당 이벤트에 대해 작동하는 객체 또는 핸들러에 매핑할 수 있도록 하는 프로세스입니다. 네 가지 이벤트 유형은 구성요소, 페이지, 데이터 자원 및 선언적 작업입니다.
• 의 이벤트 페이로드 UI 빌더
  이벤트 페이로드를 사용하여 데이터를 작업에 연결합니다.
• 이벤트 핸들러 구성
  사용자가 작업을 트리거할 수 있도록 페이지, 구성요소, 데이터 자원 또는 선언적 작업에 UI 빌더 이벤트 핸들러를 추가합니다.
• 이벤트를 바인딩하여 작업 추가
  이벤트를 생성한 후 구성요소, 페이지, 데이터 자원 및 선언적 작업에 대한 작업에 이벤트를 바인딩할 수 있습니다.
• 구성요소 사전 설정 이벤트 매핑 사용 안 함
  구성요소 사전 설정에 의해 자동으로 생성되는 이벤트 매핑을 비활성화할 수 있습니다.
• 이벤트 핸들러 삭제
  에서 더 이상 필요하지 않은 이벤트 핸들러를 UI 빌더삭제합니다.
• 이벤트 매핑 삭제
  에서 더 이상 필요하지 않은 이벤트 매핑을 UI 빌더삭제합니다.