#이벤트 플로우

#소개

폼(Form)이 변경될 때 사용자 정의 작업을 실행하고 싶다면 이벤트 플로우를 사용할 수 있습니다. 폼 외에도 페이지, 블록, 버튼, 필드 등에서 이벤트 플로우를 활용하여 다양한 사용자 정의 작업을 설정할 수 있습니다.

#사용 방법

이벤트 플로우를 설정하는 방법을 간단한 예시를 통해 알아보겠습니다. 두 개의 테이블을 연동하여, 왼쪽 테이블의 특정 행을 클릭하면 오른쪽 테이블의 데이터가 자동으로 필터링되도록 구현해 보겠습니다.

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

1. 왼쪽 테이블 블록의 오른쪽 상단에 있는 '번개' 아이콘을 클릭하여 이벤트 플로우 설정 화면을 엽니다.
2. '이벤트 플로우 추가(Add event flow)'를 클릭하고, '트리거 이벤트(Trigger event)'에서 '행 클릭(Row click)'을 선택합니다. 이는 테이블 행을 클릭할 때 이벤트가 트리거됨을 의미합니다.
3. '트리거 조건(Trigger condition)'은 특정 조건이 충족될 때만 이벤트 플로우가 실행되도록 설정하는 부분입니다. 여기서는 별도의 조건을 설정하지 않으므로, 어떤 행이든 클릭하면 이벤트 플로우가 트리거됩니다.
4. '단계 추가(Add step)'에 마우스를 올리면 작업 단계를 추가할 수 있습니다. 오른쪽 테이블의 데이터 범위를 설정하기 위해 '데이터 범위 설정(Set data scope)'을 선택합니다.
5. 오른쪽 테이블의 UID를 복사하여 '대상 블록 UID(Target block UID)' 입력란에 붙여넣습니다. 그러면 아래에 조건 설정 화면이 바로 나타나는데, 여기서 오른쪽 테이블의 데이터 범위를 설정할 수 있습니다.
6. 아래 그림과 같이 조건을 설정해 보겠습니다:
7. 데이터 범위 설정을 완료한 후에는 필터링된 결과를 표시하기 위해 블록을 새로고침해야 합니다. 이제 오른쪽 테이블 블록을 새로고침하는 방법을 설정해 보겠습니다. '대상 블록 새로고침(Refresh target blocks)' 단계를 추가하고 오른쪽 테이블의 UID를 입력합니다.
8. 마지막으로 오른쪽 하단의 저장 버튼을 클릭하면 설정이 완료됩니다.

#이벤트 유형 상세 설명

#렌더링 전(Before render)

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

#행 클릭(Row click)

테이블 블록 전용 이벤트입니다. 테이블 행을 클릭할 때 트리거됩니다. 트리거될 때 '클릭된 행 레코드(Clicked row record)'가 컨텍스트에 추가되며, 이는 조건 및 단계에서 변수로 사용할 수 있습니다.

#폼 값 변경(Form values change)

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

#클릭(Click)

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

#단계 유형 상세 설명

#사용자 정의 변수(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 코드를 실행합니다.