규칙 편집기 확장 기능을 활성화하는 방법
범용 편집기에서는 규칙 편집기 확장 기능이 기본적으로 활성화되어 있지 않습니다. 규칙 편집기 확장 기능을 활성화하려면 공식 이메일 ID에서 aem-forms-ea@adobe.com로 문의해 주십시오.
사용자 환경에서 규칙 편집기 확장 기능을 활성화하면 편집기의 오른쪽 상단에
규칙을 작성하고자 하는 양식 구성 요소를 선택하고
이 문선에서는 form object 및 form component를 서로 바꿔서 사용할 수 있습니다.
이제 규칙 편집기에서 사용 가능한 규칙 유형을 사용하여 선택한 양식 필드에 대한 규칙이나 비즈니스 로직을 작성할 수 있습니다.
규칙 편집기 사용자 인터페이스 이해
규칙 편집기의 편집기는
| 규칙 편집기의 구성 요소 | 설명 |
|---|---|
| 1. 제목 | 양식 구성 요소의 제목과 선택한 규칙 유형을 표시합니다. 예를 들어 “총 급여 입력”은 “언제” 규칙 유형이 선택된 텍스트 상자 구성 요소입니다. |
| 2. 양식 오브젝트 및 함수 | 양식 오브젝트 탭에는 양식에 포함된 모든 구성 요소의 계층적 보기가 표시됩니다. 기능 탭에는 규칙 편집기에서 기본 제공되는 기능 세트가 포함되어 있습니다. |
| 3. 양식 오브젝트 및 함수 토글 | 토글 버튼은 양식 오브젝트와 함수 창을 번갈아 가며 표시하거나 숨깁니다. |
| 4. 시각적 규칙 편집기 | 시각적 규칙 편집기는 양식 구성 요소에 대한 규칙을 만들 수 있는 인터페이스입니다. |
| 5. 완료 및 취소 버튼 | 완료 버튼은 규칙을 저장하는 데 사용됩니다. 취소 버튼을 클릭하면 규칙에 대한 모든 변경 사항이 삭제되고 규칙 편집기가 닫힙니다. |
구성 요소를 선택하면 양식 구성 요소의 기존 규칙이 나열됩니다. 규칙 편집기에서 제목을 확인하고 규칙 요약을 미리 볼 수 있습니다. 또한 규칙의 순서를 변경하고, 규칙을 편집하고, 규칙을 활성화/비활성화하고, 규칙을 삭제할 수도 있습니다.
사용 가능한 규칙 유형
규칙 편집기는 아래 테이블에 표시된 것처럼 규칙을 작성하는 데 사용할 수 있는 사전 정의된 규칙 유형 세트를 제공합니다.
| 규칙 유형 | 설명 |
|---|---|
| 값 설정 | 지정된 조건이 충족되는지 여부에 따라 양식 구성 요소의 값을 설정합니다. |
| 값 지우기 | 지정된 양식 구성 요소의 값을 지웁니다. |
| 숨기기/표시 | 조건이 충족되는지 여부에 따라 양식 구성 요소를 숨기거나 표시합니다. |
| 활성화/비활성화 | 조건이 충족되는지 여부에 따라 양식 구성 요소를 활성화하거나 비활성화합니다. |
| 유효성 검사 | 조건에 따라 양식 구성 요소를 확인하고 조건이 충족되지 않으면 오류를 표시합니다. |
| 언제 | 평가 조건을 지정하고, 해당 조건이 충족되면 트리거되는 동작을 지정합니다. condition-action-alternate 액션 규칙 구성 또는 condition-action 규칙 구성을 따릅니다. |
| 포맷 | 양식 구성 요소의 값이 변경되면 주어진 표현식을 사용하여 양식 구성 요소의 표시 값을 수정합니다. |
| 서비스 호출 | 외부 API, 양식 데이터 모델 또는 RESTful 웹 서비스를 사용하여 구성된 서비스를 호출합니다. |
| 속성 설정 | 조건에 따라 지정된 양식 구성 요소의 속성 값을 설정합니다. |
| 포커스 설정 | 지정된 양식 구성 요소에 포커스를 설정합니다. |
| 양식 저장 | 사용자는 초안 및 제출 양식 포털 구성 요소를 사용하여 양식을 초안으로 저장할 수 있습니다. |
| 양식 제출 | 양식을 제출합니다. |
| 양식 재설정 | 양식을 재설정합니다. |
| 인스턴스 추가/제거 | 지정된 반복 가능한 패널이나 테이블 행의 인스턴스를 추가하거나 제거합니다. |
| 다음으로 이동 | 다른 적응형 양식, 다른 자산(예: 이미지 또는 문서 조각) 또는 외부 URL로 이동합니다. |
| 이벤트 발송 | 사전 정의된 조건이나 이벤트에 따라 특정 액션을 트리거합니다. |
| 패널 중에서 탐색 | 양식에서 여러 패널 간에 포커스를 이동할 수 있습니다. |
이제 규칙 편집기에서 규칙을 작성하는 방법을 살펴보겠습니다.
규칙 작성
시각적 규칙 편집기에서 규칙을 작성하는 방법을 이해하려면 세금 계산 양식의 간단한 예를 살펴보겠습니다.
위에 설명된 양식에서 사용자는 총 급여를 입력합니다. 이러한 입력을 기준으로 조건부 필드가 표시되고 미지급 세금이 계산됩니다.
양식 필드:
- 총 급여 (사용자 입력)
- 추가 공제 (조건부 필드)
- 과세 소득 (계산된 필드)
- 미지급 세금 (계산된 필드)
조건부 규칙:
- 조건: 총 급여 > 50,000
- 액션: 추가 공제 필드 표시
계산 규칙:
- 과세 소득 = 총 급여 - 추가 공제 (해당되는 경우)
- 미지급 세금 = 과세 소득 * 세율 (단순성을 위해 10% 고정 세율을 가정)
규칙을 작성하려면 다음 단계를 수행합니다.
1. 양식 작성
범용 편집기에서 양식을 작성하는 방법은 다음과 같습니다.
-
편집을 위해 범용 편집기에서 양식을 엽니다.
-
다음 양식 구성 요소를 추가합니다.
- 세금 계산 양식 (제목)
- 총 급여 (숫자 입력)
- 추가 공제 (숫자 입력)
- 과세 소득 (숫자 입력)
- 미지급 세금 (숫자 입력)
- 제출 (제출 버튼)
-
Additional Deduction양식 필드의Properties를 열어 해당 필드를 숨깁니다.
2. 양식 필드에 대한 조건부 규칙 추가
양식을 작성했으면 총 급여가 50,000달러를 초과하는 경우에만 Additional Deduction 필드를 표시하도록 첫 번째 규칙을 작성합니다. 조건부 규칙을 추가하려면 다음 작업을 수행하십시오.
- 범용 편집기에서 양식을 열어 편집하고 콘텐츠 트리에서 총 급여 필드를 선택한 다음
시각적 규칙 편집기 인터페이스가 나타납니다. - 만들기 를 클릭하여 규칙을 생성합니다.
기본적으로Set Value Of규칙 유형이 선택되어 있습니다. 선택한 오브젝트를 변경하거나 수정할 수는 없지만 규칙 드롭다운을 사용하여 다른 규칙 유형을 선택할 수 있습니다.
- 규칙 유형 드롭다운 목록을 열고 When 규칙 유형을 선택합니다.
- 상태 선택 드롭다운을 선택하고 다음보다 큼 을 선택합니다. 숫자 입력 필드가 나타납니다.
- 규칙의 숫자 입력 필드에서
50000을 입력합니다.
조건을When Gross Salary is greater than 50000으로 정의했습니다. 다음으로 이 조건이True일 경우 수행할 액션을 정의합니다. Then문에서 액션 선택 드롭다운의 표시 를 선택합니다.
- 오브젝트 드롭 또는 여기에서 선택 필드의 양식 오브젝트 탭에서 추가 공제 필드를 드래그 앤 드롭합니다. 또는 오브젝트를 놓거나 여기에서 선택 필드를 선택하고 팝업 메뉴에서 추가 공제 필드를 선택하면 양식의 모든 양식 오브젝트가 나열됩니다.
50000미만의 급여를 입력하는 경우를 위해 다른 섹션 추가 를 선택하여 총 급여 필드에 다른 조건을 추가합니다.
Else문에서 액션 선택 드롭다운의 숨기기 를 선택합니다.
- 오브젝트 드롭 또는 여기에서 선택 필드의 양식 오브젝트 탭에서 추가 공제 필드를 드래그 앤 드롭합니다. 또는 오브젝트를 놓거나 여기에서 선택 필드를 선택하고 팝업 메뉴에서 추가 공제 필드를 선택하면 양식의 모든 양식 오브젝트가 나열됩니다.
- 완료 를 선택하여 규칙을 저장합니다.
규칙이 규칙 편집기에 다음과 같이 나타납니다.
NOTE3. 양식 필드에 대한 계산 규칙 추가
다음으로 Taxable Income을 계산하는 규칙을 작성합니다. 이는 Gross Salary에서 Additional Deduction(해당되는 경우)을 뺀 값입니다. 과세 소득 필드에 계산 규칙을 추가하려면 다음 단계를 수행합니다.
-
작성 모드에서 과세 소득 필드를 선택하고
-
그 다음 만들기 를 선택하여 규칙을 생성합니다.
-
옵션 선택 을 선택하고 수학 표현식 을 선택합니다. 수학 표현식을 작성하는 필드가 열립니다.
-
수학 표현 필드에서 다음 작업을 수행하십시오.
-
양식 오브젝트 탭의 첫 번째 오브젝트 드롭 또는 여기에서 선택 필드에서 총 급여 필드를 선택하거나 드래그 앤 드롭합니다.
-
연산자 선택 필드에서 빼기 를 선택합니다.
-
양식 오브젝트 탭의 기타 오브젝트 드롭 또는 여기에서 선택 필드에서 추가 공제 필드를 선택하거나 드래그 앤 드롭합니다.
-
-
완료 를 선택하여 규칙을 저장합니다.
이제 과세 소득에 세율을 곱하여 결정되는
Tax Payable필드에 대한 규칙을 추가합니다. 단순성을 위해 고정 세율을10%로 가정합니다. -
작성 모드에서 미지급 세금 필드를 선택하고
-
옵션 선택 을 선택하고 수학 표현식 을 선택합니다. 수학 표현식을 작성하는 필드가 열립니다.
-
수학 표현 필드에서 다음 작업을 수행하십시오.
-
양식 오브젝트 탭의 첫 번째 오브젝트 드롭 또는 여기에서 선택 필드에서 과세 소득 필드를 선택하거나 드래그 앤 드롭합니다.
-
연산자 선택 필드에서 곱하기 를 선택합니다.
-
옵션 선택 필드에서 숫자 를 선택하고 숫자 입력 필드에 값을
10으로 입력합니다.
-
-
다음으로 표현식 필드 주변의 강조 표시된 영역을 선택하고 표현식 확장 을 선택합니다.
-
확장된 표현식 필드의 연산자 선택 필드에서 나누기 를 선택하고 옵션 선택 필드에서 숫자 를 선택합니다. 그런 다음 숫자 필드에
100을 지정합니다.
-
완료 를 선택하여 규칙을 저장합니다.
4. 양식 미리보기
이제 양식을 미리 보고 총 급여 를 60,000으로 입력하면 추가 공제 필드가 나타나고 과세 소득 과 미지급 세금 이 이에 따라 계산됩니다.
함수 출력에 나열된 합계, 평균과 같은 기본 제공 함수 외에도 사용자 정의 함수를 작성하여 복잡한 비즈니스 로직을 구현할 수 있습니다.
규칙 편집기의 사용자 정의 함수
Edge Delivery Services 양식은 사용자가 복잡한 비즈니스 규칙을 구현하기 위한 JavaScript 함수를 정의할 수 있는 사용자 정의 함수를 지원합니다. 사용자 정의 함수는 입력된 데이터의 조작과 처리를 용이하게 하여 지정된 요구 사항을 충족하게 함으로써 양식의 기능을 확장합니다.
사용자 정의 함수 만들기
사용자 정의 함수를 만들려면 ../[blocks]/form/functions.js 파일을 편집합니다. 만들기 프로세스에는 일반적으로 다음 단계가 포함됩니다.
- 함수 선언: 함수 이름과 함수의 매개변수(허용되는 입력)를 정의합니다.
- 논리 구현: 함수에 의해 수행되는 특정 계산이나 조작을 개략적으로 설명하는 코드를 작성합니다.
- 함수 내보내기: 해당 파일에서 함수를 내보내 규칙에서 액세스할 수 있도록 합니다.
이 예제에서는 두 개의 사용자 정의 함수인 getFullName과 days를 설명합니다.
/**
* Get Full Name
* @name getFullName Concats first name and last name
* @param {string} firstname in Stringformat
* @param {string} lastname in Stringformat
* @return {string}
*/
function getFullName(firstname, lastname) {
return `${firstname} ${lastname}`.trim();
}
/**
* Calculate the number of days between two dates.
* @param {*} endDate
* @param {*} startDate
* @name days Calculates the numebr of days between two dates
* @returns {number} returns the number of days between two dates
*/
function days(endDate, startDate) {
const start = typeof startDate === 'string' ? new Date(startDate) : startDate;
const end = typeof endDate === 'string' ? new Date(endDate) : endDate;
// return zero if dates are valid
if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
return 0;
}
const diffInMs = Math.abs(end.getTime() - start.getTime());
return Math.floor(diffInMs / (1000 * 60 * 60 * 24));
}
// eslint-disable-next-line import/prefer-default-export
export { getFullName, days };
규칙 편집기의 사용자 정의 함수 사용
규칙 편집기에서 사용자 정의 함수를 사용하는 방법은 다음과 같습니다.
-
함수 추가: 사용자 정의 함수를
../[blocks]/form/functions.js파일에 포함시킵니다. 파일 내export구문에 추가해야 합니다. -
파일 배포: 업데이트된
functions.js파일을 GitHub 프로젝트에 배포하고 빌드되었는지 확인합니다. -
함수 사용: 양식의 규칙 편집기에서 함수에 액세스하려면 액션 선택 필드에서
Function Output옵션을 선택합니다.
-
양식 미리보기: 새로 구현된 함수가 포함된 양식을 미리 봅니다.
추가 정보
NOTE../[blocks]/form/functions.js 파일에 전체 코드를 추가해야 합니다.이 문서에서는 범용 편집기에서 제공되는 규칙 편집기에 대해 일부 정보를 제공합니다. 규칙 편집기와 사용자 정의 기능에 대해 자세히 알아보려면 다음 문서를 참조하십시오.
- 핵심 구성 요소 기반 적응형 양식의 규칙 편집기 소개
- 핵심 구성 요소 기반 적응형 양식의 규칙 편집기에서 사용 가능한 연산자 유형 및 이벤트
- 핵심 구성 요소 기반 적응형 양식의 규칙 편집기 사용자 인터페이스
- 핵심 구성 요소 기반 적응형 양식의 규칙 편집기의 다양한 사용 사례
- 다양한 규칙 편집기 에디션의 차이점
- 적응형 양식에서 비동기 함수 사용
- 핵심 구성 요소 기반 양식의 시각적 규칙 편집기에서 Service 개선 사항 호출
- 핵심 구성 요소 기반 적응형 양식의 사용자 정의 함수 소개
- 핵심 구성 요소 기반 적응형 양식의 사용자 정의 함수 만들기
- 사용자 정의 함수의 범위 오브젝트
- 사용자 정의 함수 개발 및 사용의 예
