[AEM Forms]{class="badge positive" title="AEM Forms에 적용됩니다)."}
인터랙티브 커뮤니케이션 편집기의 날짜/시간 필드 구성 요소
1. 소개
대화형 통신(IC) 편집기의 날짜/시간 필드 구성 요소를 사용하면 작성자가 날짜 및/또는 시간 값을 선택하거나 입력할 수 있는 필드를 삽입할 수 있습니다. 이 구성 요소는 일반적으로 생년월일, 약속 일정, 예약 슬롯 또는 문서 문제/만료 날짜와 같은 정보를 캡처하는 데 사용됩니다.
이 필드는 통신 디자인에 맞게 다양한 서식 옵션(예: DD/MM/YYYY, 24시간 또는 12시간 형식), 유효성 검사 제한 및 모양 사용자 지정을 지원합니다. 수동 입력 오류를 줄이고 데이터 수집의 일관성을 향상시켜 사용자 경험을 향상시킵니다.
2. 표시 패턴
속성 패널에서 날짜/시간 필드에 표시 패턴을(를) 할당할 수 있습니다(예: 04/01/2007 2:30 오후).
구성된 패턴은 캔버스 미리 보기에 즉시 반영되며 저장 및 다시 로드 주기 동안 유지됩니다. 고급 사용 사례의 경우 사용자 지정 XFA picture 절을(를) 정의하여 원하는 출력 형식을 달성할 수 있습니다.
표시 패턴 구성
- 디자인 캔버스에서 날짜/시간 필드 구성 요소를 선택합니다.
- 속성 패널을 엽니다.
- 표시 패턴 섹션에서 미리 정의된 패턴을 선택하거나 사용자 지정 그림 절을 입력하십시오.
- 캔버스에서 서식이 지정된 값을 미리 봅니다.
사용자 정의 패턴 예(날짜/시간)
date{MM/DD/YYYY} time{HH:MM}일반 시간 토큰:
2007-04-01T14:30). 이 형식을 따르지 않는 값은 패턴 형식을 적용하지 않고 있는 그대로 표시됩니다.3. 속성
날짜/시간 필드 구성 요소에는 몇 가지 구성 가능한 속성이 포함됩니다.
2.1. 기본 필드
-
이름: 필드의 고유 식별자입니다. 규칙, 표현식 및 데이터 바인딩에서 참조에 사용됩니다.
-
캡션: 필드의 목적을 나타내기 위해 필드 옆에 표시되는 레이블(예: “생년월일”).
-
날짜: 사용자가 일정 날짜를 선택하거나 입력할 수 있습니다.
-
시간: 구성된 경우 특정 시간 값을 입력하거나 선택할 수 있도록 합니다.
-
예약: 입력이 제공되지 않을 때 표시되는 대체 값으로, 읽기 전용 또는 인쇄 시나리오에 유용합니다.
-
모양: 일관된 UI 렌더링을 위해 밑줄, 테두리 또는 평면과 같은 시각적 스타일을 선택합니다.
2.2. 타이포그라피
날짜/시간 필드 내의 텍스트 스타일을 제어합니다.
-
글꼴 변형: 옵션에는 테마 요구 사항에 따라 Regular, Bold, Italic이 포함됩니다.
-
글꼴 크기: 양식 레이아웃과의 일관성을 유지하기 위해 기본값을 10pt로 설정합니다.
2.3. 위치
-
설명: 양식 레이아웃에서 날짜/시간 필드의 배치를 정의합니다.
-
설정:
-
X 및 Y 좌표
-
필드의 크기를 정확하게 조정할 수 있는 높이 및 너비(mm 또는 픽셀 단위)입니다.
-
2.4. 여백
깔끔한 정렬 및 레이아웃 유연성을 위해 필드 주위의 간격을 정의합니다.
-
상단(위)
-
아래쪽(아래쪽)
-
왼쪽
-
오른쪽
2.5. 모양
컨테이너의 스타일을 정의하여 시각적 일관성과 명확성을 유지합니다.
-
필드의 채우기: 배경색입니다.
-
필드 주위의 획: 테두리 색입니다.
-
테두리의 너비: 두께입니다.
-
스타일: 실선, 파선 또는 없음 같은 테두리 형식입니다.
-
가장자리: 양식 테마에 따라 예리하거나 둥근 모서리 중에서 선택합니다.
2.6. 현재 상태
런타임 시 필드가 작동하는 방식을 결정합니다.
-
표시: 필드가 사용자에게 표시되고 레이아웃 공간을 차지합니다.
-
숨김(공간 유지): 필드가 표시되지 않지만 레이아웃에서는 공간이 아직 예약되어 있습니다.
2.7. 데이터 바인딩
필드를 데이터 소스에 연결하여 값을 저장하거나 검색합니다.
-
데이터 바인딩 형식: 필드가 데이터에 연결되는 방식을 지정합니다.
-
이름 사용: 스키마에 정의된 필드 이름을 사용하여 필드를 바인딩합니다.
-
전역 데이터 사용: 필드를 통신에서 공유되는 전역 수준 데이터에 연결합니다.
-
데이터 바인딩 없음: 필드가 백 엔드 데이터에 연결되어 있지 않습니다(시각적 전용 또는 계산된 값에 사용됨).
4. 사용량
날짜/시간 필드는 일관된 시간 데이터가 필요한 시나리오에 이상적입니다. 일반적인 사용 사례는 다음과 같습니다.
-
생년월일, 약속 일자 또는 이벤트 시간 캡처
-
문서 문제/만료 날짜 로깅
-
배달 또는 픽업 슬롯 선택
-
트랜잭션 타임스탬프 기록
작성자는 필드를 레이아웃 컨테이너, 유효성 검사 또는 조건부 규칙과 결합하여 형식, 필수 필드 및 문맥에 따른 가시성을 제어할 수 있습니다.
5. 모범 사례
-
사용자를 안내하려면 “날짜 선택” 또는 "약속 시간"과 같은 명확한 캡션을 사용합니다.
-
UX를 향상시키고 입력 오류를 줄이려면 날짜/시간 선택기를 활성화하십시오.
-
필요한 경우 형식 제한(예: 미래 날짜만)을 적용합니다.
-
접근성 또는 인쇄 폴백에 대한 예약 값을 제공합니다.
-
타이포그래피 및 모양을 전체 양식 디자인과 일관되게 유지합니다.
-
필드를 유효한 스키마 경로에 바인딩하여 적절한 데이터 캡처 및 처리를 보장합니다.
대화형 통신 편집기의 날짜/시간 필드 구성 요소는 시간 기반 입력을 간소화하는 강력하고 사용자 친화적인 구성 요소입니다. 스타일, 데이터 처리 및 레이아웃 컨트롤의 올바른 구성을 통해 사용자와 백엔드 시스템 모두에서 깔끔하고 안정적이며 직관적인 양식 경험을 사용할 수 있습니다.