적응형 양식 필드 미리 채우기 prefill-adaptive-form-fields

새 적응형 양식 만들기또는 AEM Sites 페이지에 적응형 양식 추가작업을 할 때 현대적이고 확장 가능한 데이터 캡처 핵심 구성 요소를 사용하는 것이 좋습니다. 이러한 구성 요소는 적응형 양식 만들기 작업이 대폭 개선되어 우수한 사용자 경험을 보장할 수 있게 되었음을 나타냅니다. 이 문서에서는 기초 구성 요소를 사용하여 적응형 양식을 작성하는 이전 접근법에 대해 설명합니다.

소개 introduction

기존 데이터를 사용하여 적응형 양식의 필드를 미리 채울 수 있습니다. 사용자가 양식을 열면 해당 필드의 값이 미리 채워집니다. 적응형 양식에 데이터를 미리 채우려면 적응형 양식의 미리 채우기 데이터 구조를 준수하는 형식으로 사용자 데이터를 미리 채우기 XML/JSON으로 사용할 수 있도록 합니다.

미리 채우기 데이터 구조 the-prefill-structure

적응형 양식에는 바인딩된 필드와 바인딩되지 않은 필드가 혼합되어 있을 수 있습니다. 바인딩된 필드는 콘텐츠 파인더 탭에서 드래그하고 비어 있지 않은 필드를 포함합니다 bindRef 필드 편집 대화 상자의 속성 값입니다. 바인딩되지 않은 필드는 Sidekick의 구성 요소 브라우저에서 직접 드래그되며 비어 있습니다. bindRef 값.

적응형 양식의 바인딩된 필드와 바인딩되지 않은 필드를 모두 미리 채울 수 있습니다. 미리 채우기 데이터에는 적응형 양식의 바인딩된 필드와 바인딩되지 않은 필드를 모두 미리 채우는 afBoundData 섹션과 afUnBoundData 섹션이 포함됩니다. 다음 afBoundData 섹션에는 바인딩된 필드 및 패널의 미리 채우기 데이터가 포함됩니다. 이 데이터는 연결된 양식 모델 스키마와 호환되어야 합니다.

샘플 미리 채우기 XML 구조 sample-prefill-xml-structure

<?xml version="1.0" encoding="UTF-8"?>
<afData>
  <afBoundData>
     <employeeData>
        .
     </employeeData>
  </afBoundData>

  <afUnboundData>
    <data>
      <textbox>Hello World</textbox>
         .
         .
      <numericbox>12</numericbox>
         .
         .
    </data>
  </afUnboundData>
</afData>

샘플 미리 채우기 JSON 구조 sample-prefill-json-structure

{
   "afBoundData": {
      "employeeData": { }
   },
   "afUnboundData": {
      "data": {
         "textbox": "Hello World",
         "numericbox": "12"
      }
   }
}

동일한 bindref를 가진 바인딩된 필드 또는 이름이 같은 바인딩되지 않은 필드의 경우 XML 태그 또는 JSON 개체에 지정된 데이터가 모든 필드에 채워집니다. 예를 들어 양식의 두 필드는 이름에 매핑됩니다. textbox 를 추가합니다. 런타임 중에 첫 번째 텍스트 상자 필드에 "A"가 포함되어 있으면 두 번째 텍스트 상자에 자동으로 "A"가 채워집니다. 이러한 연결을 적응형 양식 필드의 라이브 연결이라고 합니다.

XFA 양식 템플릿을 사용한 적응형 양식 xfa-based-af

XFA 기반 적응형 양식을 위한 미리 채우기 XML 및 제출된 XML의 구조는 다음과 같습니다.

Prefill-Submit-Data-ContentPackage.zip

파일 가져오기
미리 채우기 데이터 및 제출된 데이터가 포함된 샘플

XML 스키마 기반 적응형 양식  xml-schema-af

XML 스키마를 기반으로 하는 적응형 양식에 대해 사전 작성된 XML 및 제출된 XML의 구조는 다음과 같습니다.

<?xml version="1.0" encoding="utf-8" ?>
<xs:schema targetNamespace="https://adobe.com/sample.xsd"
            xmlns="https://adobe.com/sample.xsd"
            xmlns:xs="https://www.w3.org/2001/XMLSchema">

    <xs:element name="sample" type="SampleType"/>

    <xs:complexType name="SampleType">
        <xs:sequence>
            <xs:element name="noOfProjectsAssigned" type="xs:string"/>
        </xs:sequence>
    </xs:complexType>
</xs:schema>

모델이 XML 스키마인 필드의 경우 데이터가 afBoundData 아래 샘플 XML에 표시된 대로 태그를 지정합니다. 하나 이상의 바인딩되지 않은 텍스트 필드로 적응형 양식을 미리 채우는 데 사용할 수 있습니다.

<?xml version="1.0" encoding="UTF-8"?><afData>
  <afUnboundData>
    <data>
      <textbox>Ignorance is bliss :) </textbox>
    </data>
  </afUnboundData>
  <afBoundData>
    <data>
      <noOfProjectsAssigned>twelve</noOfProjectsAssigned>
    </data>
  </afBoundData>
</afData>

afData 및 afBoundData 래퍼가 없는 예 an-example-without-afdata-and-afbounddata-wrapper

<?xml version="1.0" encoding="UTF-8"?><config>
 <assignmentDetails descriptionOfAssignment="Some Science Project" durationOfAssignment="34" financeRelatedProject="1" name="Lisa" numberOfMentees="1"/>
 <assignmentDetails descriptionOfAssignment="Kidding, right?" durationOfAssignment="4" financeRelatedProject="1" name="House" numberOfMentees="3"/>
</config>

JSON 스키마 기반 적응형 양식 json-schema-based-adaptive-forms

JSON 스키마 기반의 적응형 양식의 경우 사전 채우기 JSON 및 제출된 JSON의 구조가 아래에 설명되어 있습니다. 자세한 내용은 JSON 스키마를 사용하여 적응형 양식 만들기.

{
    "id": "https://some.site.somewhere/entry-schema#",
    "$schema": "https://json-schema.org/draft-04/schema#",
    "type": "object",
    "properties": {
        "address": {
            "type": "object",
            "properties": {
    "name": {
     "type": "string"
    },
    "age": {
     "type": "integer"
}}}}}

JSON 스키마 모델을 사용하는 필드의 경우, 데이터는 아래 샘플 JSON에 표시된 대로 afBoundData 개체에 미리 채워집니다. 하나 이상의 바인딩되지 않은 텍스트 필드로 적응형 양식을 미리 채우는 데 사용할 수 있습니다. 다음은 가 포함된 데이터의 예입니다. afData/afBoundData 래퍼:

{
  "afData": {
    "afUnboundData": {
      "data": { "textbox": "Ignorance is bliss :) " }
    },
    "afBoundData": {
      "data": { {
   "user": {
    "address": {
     "city": "Noida",
     "country": "India"
}}}}}}}

다음은 가 없는 예제입니다. afData/afBoundData 래퍼:

{
 "user": {
  "address": {
   "city": "Noida",
   "country": "India"
}}}

양식 모델이 없는 적응형 양식 adaptive-form-with-no-form-model

양식 모델이 없는 적응형 양식의 경우 모든 필드에 대한 데이터는 <data> 태그 / <afUnboundData> tag.

또한 다음 사항에 유의하십시오.

다양한 필드에 대해 제출된 사용자 데이터의 XML 태그는 필드의 이름을 사용하여 생성됩니다. 따라서 필드 이름은 고유해야 합니다.

<?xml version="1.0" encoding="UTF-8"?><afData>
  <afUnboundData>
    <data>
      <radiobutton>2</radiobutton>
      <repeatable_panel_no_form_model>
        <numericbox>12</numericbox>
      </repeatable_panel_no_form_model>
      <repeatable_panel_no_form_model>
        <numericbox>21</numericbox>
      </repeatable_panel_no_form_model>
      <checkbox>2</checkbox>
      <textbox>Nopes</textbox>
    </data>
  </afUnboundData>
  <afBoundData/>
</afData>

구성 관리자를 사용하여 미리 채우기 서비스 구성 configuring-prefill-service-using-configuration-manager

미리 채우기 서비스를 활성화하려면 AEM 웹 콘솔 구성에서 기본 미리 채우기 서비스 구성 을 지정합니다. 다음 단계를 사용하여 미리 채우기 서비스를 구성합니다.

반복 가능한 패널의 이상한 사례 the-curious-case-of-repeatable-panels

일반적으로 바인딩된(양식 스키마) 필드와 바인딩되지 않은 필드는 동일한 적응형 양식으로 작성되지만, 바인딩이 반복될 수 있는 경우 다음과 같은 몇 가지 예외가 있습니다.

사용자 데이터 미리 채우기에 대해 지원되는 프로토콜 supported-protocols-for-prefilling-user-data

적응형 양식은 유효한 정규 표현식으로 구성된 경우 다음 프로토콜을 통해 미리 채우기 데이터 형식의 사용자 데이터로 미리 채울 수 있습니다.

crx:// 프로토콜 the-crx-protocol

https://localhost:4502/content/forms/af/xml.html?wcmmode=disabled&dataRef=crx:///tmp/fd/af/myassets/sample.xml

지정한 노드에는 라는 속성이 있어야 합니다. jcr:data 데이터를 보관합니다.

file:// 프로토콜  the-file-protocol-nbsp

https://localhost:4502/content/forms/af/someAF.html?wcmmode=disabled&dataRef=file:///C:/Users/form-user/Downloads/somesamplexml.xml

참조된 파일은 동일한 서버에 있어야 합니다.

https:// 프로토콜 the-http-protocol

https://localhost:4502/content/forms/af/xml.html?wcmmode=disabled&dataRef=https://localhost:8000/somesamplexmlfile.xml

service:// 프로토콜 the-service-protocol

https://localhost:4502/content/forms/af/abc.html?wcmmode=disabled&dataRef=service://[SERVICE_NAME]/[IDENTIFIER]

slingRequest에서 데이터 속성 설정 setting-data-attribute-in-slingrequest

다음을 설정할 수도 있습니다 data 의 속성 slingRequest, 여기서 data 속성은 아래 샘플 코드에 표시된 대로 XML 또는 JSON이 포함된 문자열입니다(예: XML용).

<%
           String dataXML="<afData>" +
                            "<afUnboundData>" +
                                "<data>" +
                                    "<first_name>"+ "Tyler" + "</first_name>" +
                                    "<last_name>"+ "Durden " + "</last_name>" +
                                    "<gender>"+ "Male" + "</gender>" +
                                    "<location>"+ "Texas" + "</location>" +
                                    "</data>" +
                            "</afUnboundData>" +
                        "</afData>";
        slingRequest.setAttribute("data", dataXML);
%>

모든 데이터가 포함된 간단한 XML 또는 JSON 문자열을 작성하여 slingRequest에서 설정할 수 있습니다. 이 작업은 slingRequest 데이터 속성을 설정할 수 있는 페이지에 포함하려는 모든 구성 요소에 대해 렌더러 JSP에서 쉽게 수행할 수 있습니다.

예를 들어 특정 유형의 헤더가 있는 페이지에 특정 디자인을 사용하려는 경우. 이를 달성하기 위해 자신의 것을 쓸 수 있다 header.jsp: 페이지 구성 요소에 포함하고 data 특성.

또 다른 좋은 예는 Facebook, Twitter 또는 LinkedIn과 같은 소셜 계정을 통해 로그인할 때 데이터를 미리 채우는 사용 사례입니다. 이 경우 간단한 JSP를 포함할 수 있습니다 header.jsp: 사용자 계정에서 데이터를 가져오고 데이터 매개 변수를 설정합니다.

prefill-page component.zip

파일 가져오기
페이지 구성 요소의 샘플 prefill.jsp

AEM Forms 사용자 지정 미리 채우기 서비스 aem-forms-custom-prefill-service

사전 정의된 소스에서 데이터를 지속적으로 읽는 시나리오에 대해 사용자 지정 미리 채우기 서비스를 사용할 수 있습니다. 미리 채우기 서비스는 정의된 데이터 소스에서 데이터를 읽고 적응형 양식의 필드를 미리 채우기 데이터 파일의 콘텐츠로 채웁니다. 또한 미리 채워진 데이터를 적응형 양식과 영구적으로 연결할 수 있습니다.

미리 채우기 서비스 만들기 및 실행 create-and-run-a-prefill-service

프리필 서비스는 OSGi 서비스이며 OSGi 번들을 통해 패키징된다. OSGi 번들을 만들고 업로드한 다음 AEM Forms 번들에 설치합니다. 번들 만들기를 시작하기 전에 다음을 수행하십시오.

파일 가져오기

미리 채우기 서비스 만들기 create-a-prefill-service

보일러플레이트 패키지(샘플 미리 채우기 서비스 패키지)에는 AEM Forms 미리 채우기 서비스의 샘플 구현이 포함되어 있습니다. 코드 편집기에서 상용구 패키지를 엽니다. 예를 들어 편집할 Eclipse에서 보일러판 프로젝트를 엽니다. 코드 편집기에서 상용구 패키지를 연 후 다음 단계를 수행하여 서비스를 만듭니다.

미리 채우기 서비스 시작 및 사용 start-and-use-the-prefill-service

미리 채우기 서비스를 시작하려면 JAR 파일을 AEM Forms 웹 콘솔에 업로드하고 서비스를 활성화합니다. 이제 서비스가 적응형 양식 편집기에 표시되기 시작합니다. 미리 채우기 서비스를 적응형 양식에 연결하려면 다음 작업을 수행하십시오.

클라이언트에서 데이터 미리 채우기 prefill-at-client

적응형 양식을 미리 채우면 AEM Forms 서버가 데이터를 적응형 양식과 병합하고 채워진 양식을 사용자에게 전달합니다. 기본적으로 데이터 병합 작업은 서버에서 수행됩니다.

서버 대신 클라이언트에서 데이터 병합 작업을 수행하도록 AEM Forms 서버를 구성할 수 있습니다. 적응형 양식을 미리 채우고 렌더링하는 데 필요한 시간을 크게 줄입니다. 기본적으로 이 기능은 비활성화되어 있습니다. 구성 관리자 또는 명령줄에서 활성화할 수 있습니다.