패널 컨테이너

적응형 양식에서 패널은 관련 양식 요소를 함께 그룹화하는 데 사용할 수 있는 컨테이너 요소입니다. 패널 컨테이너를 사용하면 논리적이고 의미 있는 방식으로 다양한 양식 요소를 그룹화하고 구성할 수 있습니다. 이렇게 하면 양식의 전체 구조와 가독성을 개선하여 사용자가 더 쉽게 이해하고 탐색할 수 있습니다.

패널을 사용하여 축소 가능한 섹션을 만들 수도 있습니다. 이 섹션을 사용하여 복잡하거나 자주 사용하지 않는 양식 필드를 숨길 수 있으므로 양식이 간단하고 사용하기 쉽게 유지됩니다. 패널을 사용하면 텍스트, 확인란, 버튼 등과 같은 다른 구성 요소를 포함할 수 있습니다.

또한 양식 제출, 웹 사이트 열기, 구성 요소 표시/숨기기 또는 패널 인스턴스 추가와 같은 다양한 규칙 기반 작업을 설정하는 데 사용할 수도 있습니다.

예

사용

양식에서 패널을 사용하는 데에는 다음과 같은 몇 가지 이유가 있습니다.

  • 양식 요소 구성: 패널을 사용하면 관련 양식 요소를 함께 그룹화할 수 있으므로 사용자가 양식을 더 쉽게 이해하고 탐색할 수 있습니다.

  • 양식 구조 개선: 양식 요소를 패널로 그룹화하여 양식의 전체 구조와 가독성을 개선하고 이해하기 쉽게 만들 수 있습니다.

  • 축소 가능한 섹션 만들기: 패널을 사용하면 축소 가능한 섹션을 만들 수 있습니다. 이 섹션을 사용하여 복잡하거나 자주 사용하지 않는 양식 필드를 숨길 수 있으므로 양식이 간단하고 사용하기 쉽게 유지됩니다.

  • 유용성 개선: 패널을 사용하여 양식 요소를 구성함으로써 양식을 보다 사용자 친화적이고 사용하기 쉽게 만들어 완료율을 높일 수 있습니다.

버전 및 호환성

적응형 양식 패널 컨테이너 핵심 구성 요소는 핵심 구성 요소 2.0.4의 일부로 2023년 2월에 릴리스되었습니다. 다음 표에서는 지원되는 모든 버전, AEM 호환성 및 해당 문서에 대한 링크를 보여 줍니다.
구성 요소 버전 AEM as a Cloud Service
— —
v1 호환 가능
2.0.4 및 이후 릴리스

핵심 구성 요소 버전 및 릴리스에 대한 자세한 내용은 핵심 구성 요소 버전 문서를 참조하십시오.

기술 세부 정보

적응형 양식 패널 컨테이너 핵심 구성 요소에 대한 최신 정보는 GitHub의 기술 설명서에서 확인할 수 있습니다. 핵심 구성 요소 개발에 대한 자세한 내용은 핵심 구성 요소 개발자 설명서를 확인하십시오.

구성 대화 상자

구성 대화 상자를 사용하여 방문자를 위한 패널 컨테이너 경험을 손쉽게 사용자 정의할 수 있습니다. 패널 컨테이너 옵션을 간편하게 정의하여 원활한 사용자 경험을 제공할 수도 있습니다.

기본 탭

기본 탭

  • 이름 - 양식과 규칙 편집기 모두에서 고유한 이름으로 양식 구성 요소를 쉽게 식별할 수 있습니다. 단, 이름에는 공백이나 특수 문자가 포함되어서는 안 됩니다.

  • 제목 - 제목을 사용하면 양식에서 구성 요소를 쉽게 식별할 수 있으며, 기본적으로 제목은 구성 요소 상단에 나타납니다. 제목을 추가하지 않으면 제목 텍스트 대신 구성 요소의 이름이 표시됩니다.

  • 제목 숨기기 - 구성 요소의 제목을 숨기려면 이 옵션을 선택합니다.

  • 양식 제출 시 하위 구성 요소의 데이터 그룹화(오브젝트에 데이터 래핑) - 이 옵션을 선택하면 하위 구성 요소의 데이터가 상위 구성 요소의 JSON 오브젝트 내에 중첩됩니다. 그러나 이 옵션을 선택하지 않으면 제출된 JSON 데이터는 상위 구성 요소에 대한 오브젝트가 없는 평면 구조를 갖습니다. 예:

    • 이 옵션을 선택하면 하위 구성 요소(예: 도로 번호, 구/군/시 및 우편 번호)의 데이터가 상위 구성 요소(주소) 내에 JSON 오브젝트로 중첩됩니다. 이렇게 하면 계층 구조가 생성되고 데이터는 상위 구성 요소 아래에 구성됩니다.

      제출된 데이터의 구조:

      { "Address":

{ "Street": "123 Main Street", "City": "New York", "Zip Code": "12345" }

}

    • 이 옵션을 선택하지 않으면 제출된 JSON 데이터는 상위 구성 요소(주소)에 대한 오브젝트가 없는 평면 구조를 갖습니다. 모든 데이터는 계층 구조 없이 동일한 수준에 있습니다.

      제출된 데이터의 구조:

         { "Street": "123 Main Street", "City": "New York", "Zip Code": "12345" }

  • 레이아웃 - 마법사에 대해 고정 레이아웃(단순) 또는 유연한 레이아웃(반응형 격자)을 설정할 수 있습니다. 단순 레이아웃은 모든 요소를 제자리에 고정하고 반응형 격자를 사용하면 필요에 맞게 구성 요소의 위치를 조정할 수 있습니다. 예를 들어 반응형 격자를 사용하여 양식의 “이름”, “중간 이름” 및 “성”을 단일 행에 정렬할 수 있습니다.

  • 바인드 참조 - 바인드 참조는 외부 데이터 소스에 저장되고 양식에서 사용되는 데이터 요소에 대한 참조입니다. 바인드 참조를 사용하면 데이터를 양식 필드에 동적으로 바인딩하여 양식이 데이터 소스의 최신 데이터를 표시하도록 할 수 있습니다. 예를 들어 바인드 참조를 사용하여 양식에 입력된 고객의 ID를 기반으로 고객의 이름과 주소를 양식에 표시할 수 있습니다. 바인드 참조를 사용하여 양식에 입력된 데이터로 데이터 소스를 업데이트할 수도 있습니다. 이러한 방식으로 AEM Forms를 사용하면 외부 데이터 소스와 상호 작용하는 양식을 만들어 데이터 수집 및 관리를 위한 원활한 사용자 경험을 제공할 수 있습니다.

  • 구성 요소 숨기기 - 양식에서 구성 요소를 숨기려면 이 옵션을 선택합니다. 구성 요소는 다른 용도로(예: 규칙 편집기에서 계산에 사용) 계속 액세스할 수 있습니다. 구성 요소 숨기기는 사용자가 보거나 직접 변경할 필요가 없는 정보를 저장해야 할 때 유용합니다.

  • 구성 요소 비활성화 - 구성 요소를 비활성화하려면 이 옵션을 선택합니다. 비활성화된 구성 요소는 활성 상태가 아니므로 최종 사용자가 편집할 수 없습니다. 사용자는 필드 값을 볼 수 있지만 수정할 수는 없습니다. 구성 요소는 다른 용도로(예: 규칙 편집기에서 계산에 사용) 계속 액세스할 수 있습니다.

반복 패널 탭

반복 탭

반복 옵션을 사용하여 패널 컨테이너와 해당 하위 구성 요소를 복제하고, 최소 및 최대 반복 횟수를 정의하고, 양식 내에서 유사한 섹션을 손쉽게 복제할 수 있습니다. 패널 컨테이너 구성 요소와 상호 작용하고 설정에 액세스할 때 다음 옵션이 표시됩니다.

  • 마법사가 반복 가능하도록 설정: 사용자가 반복 기능을 활성화 또는 비활성화할 수 있는 토글 기능입니다.
  • 최소 반복: 패널 컨테이너를 반복할 수 있는 최소 횟수를 설정합니다. 값이 0이면 마법사 패널이 반복되지 않음을 나타냅니다. 기본값은 0입니다.
  • 최대 반복: 패널 컨테이너를 반복할 수 있는 최대 횟수를 설정합니다. 기본적으로 이 값은 무제한입니다.

패널 컨테이너 내에서 반복 가능한 섹션을 효율적으로 관리하려면 반복 가능한 섹션이 있는 양식 만들기 문서에 기재되어 있는 단계를 따르십시오.

도움말 콘텐츠 탭

도움말 콘텐츠 탭

  • 간단한 설명 - 간단한 설명은 특정 양식 필드의 용도에 대한 추가 정보 또는 설명을 제공하는 간단한 텍스트 설명입니다. 사용자가 필드에 입력해야 하는 데이터 유형을 이해하는 데 도움이 되며 입력된 정보가 유효하고 원하는 기준을 충족하는지 확인하는 데 도움이 되는 지침 또는 예시를 제공할 수 있습니다. 기본적으로 간단한 설명은 숨겨진 상태로 유지됩니다. 간단한 설명 항상 표시 옵션을 활성화하여 구성 요소 아래에 표시할 수 있습니다.

  • 간단한 설명 항상 표시 - 이 옵션을 활성화하여 구성 요소 아래에 간단한 설명을 표시할 수 있습니다.

  • 도움말 텍스트 - 도움말 텍스트는 양식 필드를 올바르게 작성하는 데 도움이 되도록 사용자에게 제공되는 추가 정보 또는 지침을 나타냅니다. 구성 요소 옆에 있는 도움말 아이콘(i)을 클릭하면 표시됩니다. 도움말 텍스트는 양식 필드의 레이블이나 플레이스홀더 텍스트보다 더 자세한 정보를 제공하며 사용자가 필드의 요구 사항이나 제한 사항을 이해하는 데 도움이 되도록 설계되었습니다. 또한 양식을 보다 쉽고 정확하게 작성할 수 있도록 제안이나 예시를 제공할 수도 있습니다.

접근성 탭

접근성 탭

  • 화면 판독기용 텍스트 - 화면 판독기용 텍스트는 시각 장애인이 사용하는 화면 판독기와 같은 보조 기술로 읽을 수 있도록 특별히 고안된 추가 텍스트를 나타냅니다. 이 텍스트는 양식 필드의 용도에 대한 오디오 설명을 제공하며, 여기에는 필드의 제목, 설명, 이름 및 관련 메시지(사용자 정의 텍스트)에 대한 정보가 포함될 수 있습니다. 화면 판독기 텍스트는 시각 장애가 있는 사용자를 포함한 모든 사용자가 양식에 액세스할 수 있도록 돕고 양식 필드 및 해당 요구 사항을 완전히 이해할 수 있도록 합니다.

  • 화면 판독기가 알릴 HTML 역할 - HTML 역할은 화면 판독기와 같은 보조 기술에 대한 HTML 요소의 용도를 지정하는 데 사용되는 속성입니다. 역할 속성은 요소에 추가 컨텍스트 및 의미를 제공하는 데 사용되며, 이를 통해 화면 판독기는 콘텐츠를 더 쉽게 해석하고 사용자에게 알릴 수 있습니다. 예를 들어 AEM Forms에서 양식 필드의 레이블은 “레이블”이라는 역할을 가질 수 있으며 해당 입력 필드는 “텍스트 상자”라는 역할을 가질 수 있습니다. 이렇게 하면 화면 판독기가 레이블과 입력 필드 간의 관계를 이해하고 사용자에게 올바르게 알릴 수 있습니다.

관련 문서

추가 참조

이 페이지에서는