#이벤트 플로우

#소개

폼이 변경될 때 사용자 정의 작업을 트리거하고 싶다면 이벤트 플로우를 사용하여 구현할 수 있습니다. 폼 외에도 페이지, 블록, 버튼, 필드에서 이벤트 플로우를 사용하여 사용자 정의 작업을 설정할 수 있습니다.

#사용 방법

아래에서는 간단한 예를 통해 이벤트 플로우를 설정하는 방법을 설명합니다. 두 테이블 간의 연동을 구현해 보겠습니다. 왼쪽 테이블의 특정 행을 클릭하면 오른쪽 테이블의 데이터가 자동으로 필터링됩니다.

설정 단계는 다음과 같습니다.

1. 왼쪽 테이블 블록 우측 상단의 "번개" 아이콘을 클릭하여 이벤트 플로우 설정 인터페이스를 엽니다.
2. "이벤트 플로우 추가(Add event flow)"를 클릭하고, "트리거 이벤트"로 "행 클릭"을 선택합니다. 이는 테이블 행을 클릭할 때 트리거됨을 의미합니다.
3. "실행 시점"을 설정합니다. 이는 시스템 내장 프로세스와 비교하여 이 이벤트 플로우의 실행 순서를 제어하는 데 사용됩니다. 일반적으로 기본값을 유지하면 됩니다. 내장 로직이 실행된 후 알림/이동을 원하면 "모든 플로우 이후"를 선택할 수 있습니다. 자세한 설명은 아래의 실행 시점을 참조하십시오.
4. "트리거 조건(Trigger condition)"은 조건을 설정하는 데 사용되며, 조건이 충족될 때만 이벤트 플로우가 트리거됩니다. 여기서는 설정할 필요가 없으며, 행을 클릭하기만 하면 이벤트 플로우가 트리거됩니다.
5. "단계 추가(Add step)"에 마우스를 올리면 작업 단계를 추가할 수 있습니다. 오른쪽 테이블의 데이터 범위를 설정하기 위해 "데이터 범위 설정(Set data scope)"을 선택합니다.
6. 오른쪽 테이블의 UID를 복사하여 "대상 블록 UID(Target block UID)" 입력란에 입력합니다. 즉시 조건 설정 인터페이스가 표시되며, 여기서 오른쪽 테이블의 데이터 범위를 설정할 수 있습니다.
7. 아래 그림과 같이 조건을 설정해 보겠습니다.
8. 데이터 범위 설정을 마친 후, 필터링된 결과를 표시하려면 블록을 새로고침해야 합니다. 다음으로 오른쪽 테이블 블록을 새로고침하도록 설정합니다. "대상 블록 새로고침(Refresh target blocks)" 단계를 추가한 후 오른쪽 테이블의 UID를 입력합니다.
9. 마지막으로 우측 하단의 저장 버튼을 클릭하면 설정이 완료됩니다.

#이벤트详解

#렌더링 전

범용 이벤트로 페이지, 블록, 버튼 또는 필드에서 모두 사용할 수 있습니다. 이 이벤트에서는 초기화 작업을 수행할 수 있습니다. 예를 들어, 다양한 조건에 따라 다른 데이터 범위를 설정할 수 있습니다.

#행 클릭(Row click)

테이블 블록 전용 이벤트입니다. 테이블 행을 클릭할 때 트리거됩니다. 트리거 시 컨텍스트에 Clicked row record가 추가되어 조건이나 단계에서 변수로 사용할 수 있습니다.

#폼 값 변경(Form values change)

폼 블록 전용 이벤트입니다. 폼 필드의 값이 변경될 때 트리거됩니다. 조건과 단계에서 "Current form" 변수를 통해 폼 값을 가져올 수 있습니다.

#클릭(Click)

버튼 전용 이벤트입니다. 버튼을 클릭할 때 트리거됩니다.

#실행 시점

이벤트 플로우 설정에는 혼동하기 쉬운 두 가지 개념이 있습니다.

• 트리거 이벤트: 언제 실행을 시작할 것인가 (예: 렌더링 전, 행 클릭, 클릭, 폼 값 변경 등).
• 실행 시점: 동일한 트리거 이벤트가 발생한 후, 이 사용자 정의 이벤트 플로우를 내장 프로세스의 어느 위치에 삽입하여 실행할 것인가.

#"내장 프로세스/내장 단계"란 무엇인가요?

많은 페이지, 블록 또는 작업에는 시스템 내장 처리 프로세스(예: 제출, 팝업 열기, 데이터 요청 등)가 포함되어 있습니다. 동일한 이벤트(예: "클릭")에 대해 사용자 정의 이벤트 플로우를 추가할 때 "실행 시점"은 다음을 결정합니다.

• 사용자 정의 이벤트 플로우를 먼저 실행할지, 아니면 내장 로직을 먼저 실행할지.
• 또는 사용자 정의 이벤트 플로우를 내장 프로세스의 특정 단계 전후에 삽입할지.

#UI의 실행 시점 옵션은 어떻게 이해해야 하나요?

• 모든 플로우 이전 (기본값): 가장 먼저 실행됩니다. "차단/준비"(예: 유효성 검사, 2차 확인, 변수 초기화 등)에 적합합니다.
• 모든 플로우 이후: 내장 로직이 완료된 후 실행됩니다. "마무리/피드백"(예: 알림 메시지, 다른 블록 새로고침, 페이지 이동 등)에 적합합니다.
• 지정된 플로우 이전 / 지정된 플로우 이후: 더 세밀한 삽입 지점입니다. 선택 후 구체적인 "내장 프로세스"를 선택해야 합니다.
• 지정된 플로우 단계 이전 / 지정된 플로우 단계 이후: 가장 세밀한 삽입 지점입니다. 선택 후 "내장 프로세스"와 "내장 프로세스 단계"를 모두 선택해야 합니다.

팁: 어떤 내장 프로세스/단계를 선택해야 할지 확실하지 않은 경우, 처음 두 항목("이전 / 이후")을 우선적으로 사용하십시오.

#단계详解

#사용자 정의 변수(Custom variable)

사용자 정의 변수를 만들어 컨텍스트에서 사용합니다.

#범위

사용자 정의 변수에는 범위가 있습니다. 예를 들어 블록의 이벤트 플로우에서 정의된 변수는 해당 블록에서만 사용할 수 있습니다. 현재 페이지의 모든 블록에서 사용하려면 페이지의 이벤트 플로우에서 설정해야 합니다.

#폼 변수(Form variable)

특정 폼 블록의 값을 변수로 사용합니다. 구체적인 설정은 다음과 같습니다.

• Variable title: 변수 제목
• Variable identifier: 변수 식별자
• Form UID: 폼 UID

#기타 변수

향후 다른 변수들도 순차적으로 지원될 예정이니 기대해 주십시오.

#데이터 범위 설정(Set data scope)

대상 블록의 데이터 범위를 설정합니다. 구체적인 설정은 다음과 같습니다.

• Target block UID: 대상 블록 UID
• Condition: 필터 조건

#대상 블록 새로고침(Refresh target blocks)

대상 블록을 새로고침하며, 여러 블록을 설정할 수 있습니다. 구체적인 설정은 다음과 같습니다.

• Target block UID: 대상 블록 UID

#URL로 이동(Navigate to URL)

특정 URL로 이동합니다. 구체적인 설정은 다음과 같습니다.

• URL: 대상 URL, 변수 사용 가능
• Search parameters: URL의 쿼리 파라미터
• Open in new window: 체크 시 이동할 때 새 브라우저 페이지를 엽니다.

#메시지 표시(Show message)

전역적으로 작업 피드백 정보를 표시합니다.

#사용 시점

• 성공, 경고, 오류 등의 피드백 정보를 제공할 수 있습니다.
• 상단 중앙에 표시되고 자동으로 사라지며, 사용자 작업을 방해하지 않는 가벼운 힌트 방식입니다.

#구체적인 설정

• Message type: 메시지 유형
• Message content: 메시지 내용
• Duration: 지속 시간(초)

#알림 표시(Show notification)

전역적으로 알림 정보를 표시합니다.

#사용 시점

시스템의 네 모서리에 알림 정보를 표시합니다. 주로 다음과 같은 경우에 사용됩니다.

• 비교적 복잡한 알림 내용.
• 상호작용이 포함되어 사용자에게 다음 행동 지점을 제시하는 알림.
• 시스템 능동 푸시.

#구체적인 설정

• Notification type: 알림 유형
• Notification title: 알림 제목
• Notification description: 알림 설명
• Placement: 위치, 옵션: 왼쪽 상단, 오른쪽 상단, 왼쪽 하단, 오른쪽 하단

#JavaScript 실행(Execute JavaScript)

JavaScript 코드를 실행합니다.

#예시

#폼: 제3자 API 호출 및 필드 자동 입력

시나리오: 폼에서 이벤트 플로우를 트리거하여 제3자 API를 요청하고, 데이터를 가져온 후 폼 필드에 자동으로 입력합니다.

설정 단계:

1. 폼 블록에서 이벤트 플로우 설정을 열고 새 이벤트 플로우를 추가합니다.
2. 트리거 이벤트를 "렌더링 전"으로 선택합니다.
3. 실행 시점을 "모든 플로우 이후"로 선택합니다.
4. "JavaScript 실행(Execute JavaScript)" 단계를 추가하고 아래 코드를 붙여넣어 필요에 따라 수정합니다.

const res = await ctx.api.request({
  method: 'get',
  url: 'https://jsonplaceholder.typicode.com/users/2',
  skipNotify: true,
  // Note: ctx.api will include the current NocoBase authentication/custom headers by default
  // Here we override it with an "empty Authorization" to avoid sending the token to a third party
  headers: {
    Authorization: 'Bearer ',
  },
});

const username = res?.data?.username;

// 실제 필드 이름으로 교체하십시오.
ctx.form.setFieldsValue({ username });