Edge Delivery Services Forms용 규칙 편집기

• 조건 → 작업(When/Then)

  code language-text
  WHEN Gross Salary > 50000 THEN Show "Additional Deduction"

  조건부 가시성 및 점진적 공개에 가장 적합합니다.

• 작업 ← 조건(Set If/Only if)

  code language-text
  SET Taxable Income = Gross Salary - Deductions IF Deductions are applicable

  계산 및 데이터 변환에 가장 적합합니다.

• If → Then → Else(대체 작업)

  code language-text
  IF Income > 50000 THEN Show "High Income" fields ELSE Show "Standard Income" fields

  분기 논리 및 상호 배타적 플로우에 가장 적합합니다.

• 조건: “총 급여가 50,000달러를 초과합니다”
• 기본 액션: “추가 공제” 표시
• 대체 작업: “추가 공제” 숨기기
• 결과: 사용자는 자신에게 적용되는 필드만 볼 수 있습니다.

필수 권한 및 설정:

• AEM as a Cloud Service: 양식 편집 권한이 있는 작성 액세스
• 범용 편집기: 환경에 설치 및 구성되어 있어야 합니다.
• 규칙 편집기 확장 기능: Extension Manager를 통해 활성화되어 있어야 합니다.
• 양식 편집 권한: 범용 편집기에서 양식 구성 요소를 만들고 수정할 수 있는 기능

인증 단계:

1. AEM Sites 콘솔에서 범용 편집기에 액세스할 수 있는지 확인합니다.
2. 양식 구성 요소를 만들고 편집할 수 있는지 확인합니다.
3. 양식 구성 요소를 선택할 때 규칙 편집기 아이콘( )이 나타나는지 확인합니다.

필요한 지식 및 기술:

• 범용 편집기 숙련도: 텍스트 입력, 드롭다운 및 기본 필드 속성으로 양식을 만드는 경험
• 비즈니스 논리 이해: 특정 사용 사례에 대한 조건부 요구 사항 및 유효성 검사 규칙을 정의하는 기능
• 양식 구성 요소 친숙도: 필드 유형(텍스트, 숫자, 드롭다운), 속성(필수, 표시, 읽기 전용) 및 양식 구조에 대한 지식

고급 사용을 위한 선택 사항:

• JavaScript 기본 사항: 사용자 정의 함수(데이터 유형, 함수, 기본 구문)를 만드는 경우에만 필요합니다.
• JSON 이해: 복잡한 데이터 조작 및 API 통합에 유용합니다.

평가 질문:

• 범용 편집기에서 텍스트 입력 및 제출 버튼이 있는 기본 양식을 만들 수 있습니까?
• 비즈니스 컨텍스트에서 필드가 필수인지 선택 사항인지 이해하고 있습니까?
• 사용 사례에서 조건부 가시성이 필요한 양식 요소를 식별할 수 있습니까?

중요: 규칙 편집기 확장 기능은 범용 편집기 환경에서 기본적으로 활성화되어 있지 않습니다.

활성화 단계:

1. AEM 환경의 Extension Manager로 이동합니다.
2. 사용 가능한 확장 기능 목록에서 “규칙 편집기” 확장 기능을 찾습니다.
3. 활성화 ​를 클릭하고 활성화를 확인합니다.
4. 스템이 새로 고쳐질 때까지 기다립니다(1-2분 정도 소요될 수 있음).

인증:

• 활성화 후 양식 구성 요소를 선택하면 규칙 편집기 아이콘( )이 나타납니다.

그림: 양식 구성 요소를 선택하면 규칙 편집기 아이콘이 표시됨

규칙 편집기를 열려면 다음을 수행하십시오.

1. 범용 편집기에서 양식 구성 요소를 선택합니다.
2. 규칙 편집기 아이콘을 클릭합니다.
3. 규칙 편집기가 사이드 패널에 열립니다.

그림: 구성 요소 규칙 편집을 위한 규칙 편집기 인터페이스

규칙 편집기 인터페이스 개요

그림: 번호가 매겨진 구성 요소가 포함된 전체 규칙 편집기 인터페이스

1. 구성 요소 제목 및 규칙 유형: 선택한 구성 요소 및 활성 규칙 유형을 확인합니다.

2. 양식 오브젝트 및 함수 패널:

   • 양식 오브젝트: 규칙에서 참조하기 위한 필드 및 컨테이너의 계층적 보기
   • 함수: 기본 제공되는 수학, 문자열, 날짜 및 유효성 검사 도우미

3. 패널 토글: 작업 영역을 늘리기 위해 오브젝트 및 함수 패널을 표시/숨기기

4. 시각적 규칙 빌더: 드래그 앤 드롭, 드롭다운 방식의 규칙 작성기

5. 컨트롤: 완료(저장), 취소(삭제) 저장하기 전에 항상 규칙을 테스트합니다.

구성 요소에 이미 규칙이 있는 경우 다음을 수행할 수 있습니다.

• 보기: 규칙 요약 및 논리보기
• 편집: 조건 및 작업 수정
• 재정렬: 실행 순서 변경(위에서 아래로)
• 활성화/비활성화: 테스트 규칙 토글
• 삭제: 규칙 안전하게 제거

• When: 복잡한 조건부 비헤이비어에 대한 기본 규칙(조건 → 작업 ± Else)
• 숨기기/표시: 조건에 따라 가시성 제어(점진적 공개)
• 활성화/비활성화: 필드가 대화형인지 여부를 제어(예: 필수 필드가 유효해질 때까지 제출 비활성화)

• 값 설정: 값 자동 채우기(예: 날짜, 총계, 사본)
• 값 지우기: 조건이 변경되면 데이터 제거
• 형식: 저장된 값을 변경하지 않고 디스플레이 형식(통화, 전화, 날짜) 변환

• 유효성 검사: 교차 필드 확인 및 비즈니스 규칙을 포함한 사용자 정의 유효성 검사 논리

• 수학적 표현식: 값을 실시간으로 계산(총계, 세금, 비율)

• 포커스 설정: 특정 필드로 포커스 이동(제한적으로 사용)
• 속성 설정: 구성 요소 속성 동적 수정(플레이스홀더, 옵션 등)

• 양식 제출: 프로그래밍 방식으로 양식 제출(유효성 검사가 통과된 후에만)
• 양식 재설정: 초기화 후 초기 상태로 복원(사용 전 확인)
• 양식 저장: 나중에 사용할 초안으로 저장(긴 양식, 다중 세션)

• 서비스 호출: 외부 API/서비스 호출(로딩 및 오류 처리)
• 인스턴스 추가/제거: 반복 가능한 섹션(예: 종속 항목, 주소) 관리
• 다음으로 이동: 다른 양식/페이지로 라우팅(탐색 전 데이터 보존)
• 패널 간 이동: 마법사 단계 탐색 및 건너뛰기 제어
• 이벤트 전달: 통합 또는 분석을 위한 사용자 정의 이벤트 트리거

이 예에서는 조건부 가시성 및 자동 계산을 보여 줍니다.

그림: 지능형 조건부 필드가 있는 세금 계산 양식

다음을 수행하는 양식을 빌드합니다.

1. 관련 필드를 표시하여 사용자 입력에 맞게 조정
2. 실시간으로 값 계산
3. 정확도 개선을 위해 데이터 유효성 검사

• 규칙 1: 조건부 디스플레이

  code language-text
  WHEN Gross Salary > 50,000 THEN Show "Additional Deduction" ELSE Hide "Additional Deduction"

• 규칙 2: 과세 소득 계산

  code language-text
  SET Taxable Income = Gross Salary - Additional Deduction (Only when Additional Deduction applies)

• 규칙 3: 미지급 세금 계산

  code language-text
  SET Tax Payable = Taxable Income × 10% (Simplified flat rate)

목표: 모든 필드 및 초기 설정을 사용하여 기본 양식을 빌드합니다.

1. 범용 편집기 열기:

   • AEM Sites 콘솔로 이동하여 페이지를 선택한 다음 편집 ​을 클릭합니다.
   • 범용 편집기가 올바르게 구성되었는지 확인합니다.

2. 다음 순서대로 양식 구성 요소를 추가합니다.

   • 제목(H2): “세금 계산 양식”
   • 숫자 입력: “총 급여”(필수: 예, 플레이스홀더: “연간 급여 입력”)
   • 숫자 입력: “추가 공제”(필수: 아니요, 플레이스홀더: “추가 공제를 입력합니다”)
   • 숫자 입력: “과세 소득”(읽기 전용: 예)
   • 숫자 입력: “미지급 세금”(읽기 전용: 예)
   • 제출 버튼: “세금 계산”

3. 초기 필드 속성 구성:

   • “추가 공제” 숨기기(속성 패널에서 표시: 아니요로 설정)
   • “과세 소득” 및 “미지급 세금”을 읽기 전용으로 설정: 예

그림: 기본 구성 요소가 구성된 초기 양식 구조

체크포인트: 모든 필수 필드가 있는 양식이 생겼으며, 이 양식의 “추가 공제”는 숨겨지고 계산된 필드는 읽기 전용입니다.

목표: 총 급여가 50,000달러를 초과하는 경우에만 “추가 공제” 필드를 표시합니다.

1. 총 급여 필드 를 선택 ​하고 규칙 편집기 아이콘( )을 클릭합니다.

2. 새 규칙 만들기:

   • 만들기 ​를 클릭합니다.
   • 규칙 유형을 “값 설정”에서 “When” ​으로 변경합니다.

3. 조건 구성:

   • 드롭다운에서 “보다 큼” ​을 선택합니다.
   • 숫자 필드에 50000을 입력합니다.

4. Then 작업 설정:

   • 작업 선택 드롭다운에서 “표시” ​를 선택합니다.
   • 양식 오브젝트에서 “추가 공제” 필드를 드래그하거나 선택합니다.

5. Else 작업 추가:

   • “다른 섹션 추가” ​를 클릭합니다.
   • 작업 선택 드롭다운에서 “숨기기” ​를 선택합니다.
   • “추가 공제” 필드를 선택합니다.

6. 규칙 저장: 완료 ​를 클릭합니다.

목표: 사용자 입력을 기반으로 “과세 소득”과 “미지급 세금”을 자동으로 계산합니다.

과세 소득 계산 구성:

1. “과세 소득” 필드를 선택 ​하고 규칙 편집기를 엽니다.

2. 수학적 표현식 만들기:

   • 만들기 → “수학 표현식”을 클릭합니다.
   • 표현식 빌드: 총 급여 − 추가 공제
   • “총 급여”를 첫 번째 필드로 드래그합니다.
   • “빼기” 연산자를 선택합니다.
   • “추가 공제”를 두 번째 필드로 드래그합니다.

3. 저장: 완료 ​를 클릭합니다.

미지급 세금 계산 구성:

1. “미지급 세금” 필드를 선택 ​하고 규칙 편집기를 엽니다.

2. 수학적 표현식 만들기:

   • 만들기 → “수학 표현식”을 클릭합니다.
   • 표현식 빌드: 과세 소득 × 10 ÷ 100
   • “과세 소득”을 첫 번째 필드로 드래그합니다.
   • “곱하기” 연산자를 선택합니다.
   • 10을 번호로 입력합니다.
   • “표현식 확장” ​을 클릭합니다.
   • “나누기” 연산자를 선택합니다.
   • 100을 번호로 입력합니다.

3. 저장: 완료 ​를 클릭합니다.

전체 플로우를 테스트하여 구현을 확인합니다.

1. 양식 미리보기: 범용 편집기에서 미리보기 모드를 클릭합니다.

2. 조건 논리 테스트:

   • 총 급여 입력 = 30000 → “추가 공제”는 숨겨져 있어야 합니다.
   • 총 급여 입력 = 60000 → “추가 공제”가 표시되어야 합니다.

3. 테스트 계산:

   • 총 급여 = 60000, 추가 공제를 입력합니다 = 5000
   • 과세 소득 확인 = 55000 ((60000 - 5000)
   • 미지급 세금 확인 = 5500 (55000 × 10%)

그림: 조건 필드와 자동 계산이 포함된 완성된 세금 계산기

성공 기준: 양식이 사용자가 입력할 때 동적으로 필드를 표시하거나 숨기고 값을 실시간으로 계산해야 합니다.

사용자 정의 함수에 대한 이상적인 시나리오:

• 복잡한 계산: 수학적 표현식 규칙에서 쉽게 표현할 수 없는 여러 단계 계산
• 비즈니스별 유효성 검사: 조직 또는 산업에 맞는 사용자 정의 유효성 검사 논리
• 데이터 변환: 형식 변환, 문자열 조작 또는 데이터 구문 분석
• 외부 통합: 내부 API 또는 서드파티 서비스에 대한 호출(제한 있음)

사용자 정의 함수의 이점:

• 재사용성: 한 번 작성하여 여러 양식 및 규칙에서 사용
• 유지 관리성: 업데이트 및 디버깅이 더 쉬운 중앙 집중식 논리
• 성능: 복잡한 규칙 체인과 비교하여 최적화된 JavaScript 실행
• 유연성: 표준 규칙으로 처리할 수 없는 극단적 사례 및 복잡한 시나리오 처리

파일 위치: 모든 사용자 정의 함수는 Edge Delivery Services 프로젝트의 /blocks/form/functions.js에 정의되어야 합니다.

개발 워크플로::

1. 함수 디자인

   • 설명적이고 작업 중심적인 함수 이름을 사용합니다.
   • 명확한 매개변수 유형 및 반환 값을 정의합니다.
   • 극단적 사례 및 잘못된 입력을 정상적으로 처리합니다.

2. 구현

   • 깔끔하고 주석이 잘 작성된 JavaScript를 작성합니다.
   • 입력 유효성 검사 및 오류 처리를 포함합니다.
   • 통합 전에 함수를 독립적으로 테스트합니다.

3. 설명서

   • 포괄적인 JSDoc 주석을 추가합니다.
   • 사용 예제 및 매개변수 설명을 포함합니다.
   • 제한 사항 또는 종속성을 문서화합니다.

4. 배포

   • 지정된 내보내기를 사용하여 함수를 내보냅니다.
   • 프로젝트 저장소에 배포합니다.
   • 테스트하기 전에 빌드 완료를 확인합니다.

구현 예시:

/**
 * Concatenates first and last name with proper formatting
 * @name getFullName
 * @description Combines first and last name, handles edge cases like missing values
 * @param {string} firstName - The person's first name
 * @param {string} lastName - The person's last name
 * @returns {string} Formatted full name or empty string if both inputs are invalid
 */
function getFullName(firstName, lastName) {
  // Handle null, undefined, or empty string inputs
  const first = (firstName || '').toString().trim();
  const last = (lastName || '').toString().trim();

  return `${first} ${last}`.trim();
}

/**
 * Calculates the number of days between two dates
 * @name days
 * @description Computes absolute difference in days, handles various date input formats
 * @param {Date|string} endDate - End date (Date object or ISO string)
 * @param {Date|string} startDate - Start date (Date object or ISO string)
 * @returns {number} Number of days between dates, 0 if inputs are invalid
 */
function days(endDate, startDate) {
  // Convert string inputs to Date objects
  const start = typeof startDate === 'string' ? new Date(startDate) : startDate;
  const end = typeof endDate === 'string' ? new Date(endDate) : endDate;

  // Validate date objects
  if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
    return 0;
  }

  // Calculate absolute difference in milliseconds, then convert to days
  const diffInMs = Math.abs(end.getTime() - start.getTime());
  return Math.floor(diffInMs / (1000 * 60 * 60 * 24));
}

// Export functions for use in Rule Editor
export { getFullName, days };

그림: functions.js 파일에 사용자 정의 함수 추가

통합 단계:

1. 프로젝트에 함수 추가

   • 프로젝트에서 /blocks/form/functions.js를 만들거나 편집합니다.
   • 내보내기 구문에 함수를 포함합니다.

2. 배포 및 빌드

   • 변경 사항을 저장소에 커밋합니다.
   • 빌드 프로세스가 성공적으로 완료되었는지 확인합니다.
   • CDN 캐시가 업데이트될 시간을 허용합니다.

3. 규칙 편집기에서 액세스

   • 모든 양식 구성 요소에 대해 규칙 편집기를 엽니다.
   • 작업 선택 드롭다운에서 “함수 출력” ​을 선택합니다.
   • 사용 가능한 함수 목록에서 사용자 정의 함수를 선택합니다.
   • 양식 필드 또는 정적 값을 사용하여 함수 매개변수를 구성합니다.

4. 철저히 테스트

   • 양식을 미리보기하여 함수 비헤이비어를 확인합니다.
   • 극단적 사례를 포함하여 다양한 입력 조합으로 테스트합니다.
   • 양식 로드 및 상호 작용에 대한 성능 영향을 확인합니다.

z
그림: 규칙 편집기 인터페이스에서 사용자 정의 함수 선택 및 구성

사용자 지정 이벤트 기반 규칙, 동적 변수에 대한 지원 및 API 통합을 포함하여 규칙 편집기에 대한 개선 사항을 Edge Delivery Services Forms에서도 사용할 수 있습니다. 이러한 개선 사항 및 사용 방법에 대한 자세한 내용은 규칙 편집기 개선 사항 및 사용 사례 문서를 참조하십시오.

함수 사용을 위한 모범 사례:

• 오류 처리: 함수 실패에 대한 대체 비헤이비어를 항상 포함합니다.
• 성능: 현실적인 데이터 볼륨으로 함수를 프로파일링합니다.
• 보안: 모든 입력을 유효성 검사하여 보안 취약성을 방지합니다.
• 테스트: 일반적인 사례 및 극단적 사례를 다루는 테스트 케이스를 만듭니다.

• 규칙 복잡성을 최소화하고 큰 논리를 작고 집중적인 규칙으로 분할합니다.
• 빈도별로 규칙을 정렬합니다(가장 일반적인 규칙이 먼저).
• 구성 요소당 규칙 집합을 관리 가능하게 유지합니다.
• 논리를 복제하는 대신 재사용 가능한 사용자 정의 함수를 선호합니다.

• 명확한 유효성 검사 및 인라인 피드백을 제공합니다.
• 갑작스러운 시각적 변경을 피하고 신중하게 표시/숨기기를 사용합니다.
• 여러 디바이스 및 레이아웃에서 테스트합니다.

• 극단적 사례 및 알려진 값으로 테스트합니다.
• 여러 브라우저에서 확인합니다.
• 복잡한 규칙의 메커니즘뿐만 아니라 의도를 문서화합니다.
• 대규모 양식에 대한 규칙 인벤토리를 유지 관리합니다.
• 구성 요소 및 규칙에 대해 일관된 이름을 사용합니다.
• 사용자 정의 함수에 버전을 지정하고 비프로덕션 환경에서 테스트합니다.

• 구성 요소 이름 및 참조를 확인합니다.
• 실행 순서(위에서 아래로)를 확인합니다.
• 알려진 값으로 조건을 유효성 검사합니다.
• 브라우저 콘솔에서 차단 오류를 검사합니다.

• 연산자 및 그룹화(AND/OR)를 검토합니다.
• 표현식 조각을 개별적으로 테스트합니다.
• 데이터 유형(숫자 대 문자열)을 확인합니다.

• 깊이 중첩된 조건을 단순화합니다.
• 사용자 정의 함수를 프로파일링합니다.
• 규칙 내에서 외부 호출을 최소화합니다.
• 특정 선택기 및 참조를 사용합니다.

• 파일 경로 확인: /blocks/form/functions.js
• 지정된 내보내기가 올바른지 확인합니다.
• 빌드에 변경 사항이 포함되었는지 확인합니다.
• 배포 후 브라우저 캐시를 지웁니다.
• 매개변수 유형 및 오류 처리를 유효성 검사합니다.

• 규칙 편집기 확장 기능이 활성화되었는지 확인합니다.
• 지원되는 구성 요소를 선택합니다.
• 지원되는 브라우저(Chrome, Firefox, Safari)를 사용합니다.
• 필요한 권한이 있는지 확인합니다.

중요한 제한 사항

요약

범용 편집기의 규칙 편집기는 정적 양식을 사용자 입력에 실시간으로 적응하는 지능적이고 반응적인 경험으로 변환합니다. 조건 논리, 자동 계산 및 사용자 정의 비즈니스 규칙을 활용하여 애플리케이션 코드를 작성하지 않고도 정교한 양식 워크플로를 만들 수 있습니다.

학습한 주요 기능:

• 조건 논리: 사용자의 입력에 따라 필드를 표시하고 숨겨서 집중적이고 관련 있는 경험을 만듭니다.
• 동적 계산: 사용자가 양식과 상호 작용할 때 값(세금, 총계, 요금)을 자동으로 계산합니다.
• 데이터 유효성 검사: 명확하고 실행 가능한 피드백 메시지를 사용하여 실시간 유효성 검사를 구현합니다.
• 사용자 정의 함수: 복잡한 비즈니스 논리 및 통합을 위해 JavaScript로 기능을 확장합니다.
• 성능 최적화: 유지 관리가 용이하고 효율적인 규칙 개발을 위한 모범 사례를 적용합니다.

제공되는 가치:

• 향상된 사용자 경험: 점진적 공개 및 지능형 양식 플로우로 인지 부하를 줄입니다.
• 오류 감소: 실시간 유효성 검사 및 안내된 입력으로 잘못된 제출을 방지합니다.
• 향상된 효율성: 계산 및 데이터 입력을 자동화하여 사용자 노력을 최소화합니다.
• 유지 가능한 솔: 조직 전체에서 확장되는 재사용 가능하고 잘 문서화된 규칙을 만듭니다.

비즈니스 영향:

양식이 데이터 수집, 리드 자격 및 사용자 참여를 위한 강력한 도구가 됩니다. 규칙 편집기를 통해 비기술적 작성자는 정교한 비즈니스 논리를 구현하여 개발 비용을 절감하고 양식 완료율 및 데이터 품질을 개선할 수 있습니다.