Vorbefüllen von Feldern in adaptiven Formularen prefill-adaptive-form-fields

Adobe empfiehlt, die modernen und erweiterbaren Kernkomponentenzur Datenerfassung zu verwenden, um neue adaptive Formulare zu erstellenoder adaptive Formulare zu AEM Sites-Seiten hinzuzufügen. Diese Komponenten stellen einen bedeutenden Fortschritt bei der Erstellung adaptiver Formulare dar und sorgen für beeindruckende Anwendererlebnisse. In diesem Artikel wird der ältere Ansatz zum Erstellen adaptiver Formulare mithilfe von Foundation-Komponenten beschrieben.

Einführung introduction

Sie können die Felder eines adaptiven Formulars mit vorhandenen Daten vorbefüllen. Wenn ein Benutzer ein Formular öffnet, werden die Werte für diese Felder vorbefüllt. Um Daten in einem adaptiven Formular vorzubefüllen, stellen Sie die Benutzerdaten als vorbefüllte XML/JSON in dem Format bereit, das der Datenstruktur zum Vorbefüllen von adaptiven Formularen entspricht.

Struktur der Vorbefüllungsdaten the-prefill-structure

Ein adaptives Formular kann eine Mischung aus gebundenen und ungebundenen Feldern enthalten. Gebundene Felder sind diejenigen, die aus der Registerkarte für die Inhaltssuche gezogen werden und einen nicht leeren Wert für die bindRef-Eigenschaft im Dialogfeld zum Bearbeiten von Feldern enthalten. Ungebundene Felder werden direkt aus dem Sidekick gezogen und haben einen leeren bindRef-Wert.

Sie können sowohl gebundene als auch ungebundene Felder eines adaptiven Formulars vorbefüllen. Die Vorbefüllungsdaten enthalten die Abschnitte „afBoundData“ und „afUnBoundData“, um sowohl gebundene als auch ungebundene Felder eines adaptiven Formulars vorzubefüllen. Der Abschnitt afBoundData enthält die Daten zum Vorbefüllen für gebundene Felder und Bereiche. Diese Daten müssen mit dem verknüpften Formularmodellschema konform sein:

XML-Beispielstruktur zum Vorbefüllen 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-Beispielstruktur zum Vorbefüllen sample-prefill-json-structure

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

Im Fall von gebundenen Feldern mit demselben „bindref“ oder ungebundenen Feldern mit demselben Namen, werden die im XML-Tag oder JSON-Objekt angegebenen Daten in alle Felder eingefügt. Beispiel: Zwei Felder in einem Formular sind dem Namen textbox in den Vorbefüllungsdaten zugeordnet. Wenn das erste Feld für das Textfeld „A“ enthält, wird zur Laufzeit im zweiten Textfeld automatisch „A“ ausgefüllt. Diese Verknüpfung wird als Live-Verknüpfung von Feldern adaptiver Formulare bezeichnet.

Adaptives Formular mit XFA-Formularvorlage xfa-based-af

Die Struktur von XML zum Vorbefüllen und übermittelter XML für XFA-basierte adaptive Formulare ist:

Prefill-Submit-Data-ContentPackage.zip

Datei laden
Beispiel mit vorbefüllten und übermittelten Daten

XML-Schemabasierte adaptive Formulare xml-schema-af

Die Struktur von XML zum Vorbefüllen und von übermittelter XML für adaptive Formulare, die auf XML-Schemas basieren, ist wie folgt:

<?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>

Bei Feldern, deren Modell das XML-Schema ist, werden die Daten im afBoundData-Tag wie im XML-Beispielschema unten dargestellt vorbefüllt. Es kann zum Vorbefüllen eines adaptiven Formulars mit mindestens einem ungebundenen Textfeld verwendet werden.

<?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>

Beispiel ohne „afData“- und „afBoundData“-Wrapper 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-Schemabasierte adaptive Formulare json-schema-based-adaptive-forms

Für adaptive Formulare, die auf dem JSON-Schema basieren, wird im Folgenden die Struktur von JSON zum Vorbefüllen und übermitteltem JSON beschrieben. Weitere Informationen finden Sie unter Erstellen von adaptiven Formularen mit dem JSON-Schema.

{
  "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"
        }
      }
    }
  }
}

Bei Feldern, die das JSON-Schemamodell verwenden, sind die Daten im „afBoundData“-Objekt bereits vorbefüllt, wie im folgenden Beispiel-JSON gezeigt. Es kann zum Vorbefüllen eines adaptiven Formulars mit mindestens einem ungebundenen Textfeld verwendet werden. Im Folgenden finden Sie ein Beispiel für die Daten mit afData/afBoundData-Wrapper:

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

Im Folgenden finden Sie ein Beispiel ohne afData/afBoundData-Wrapper:

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

Adaptives Formular ohne Formularmodell adaptive-form-with-no-form-model

Bei adaptiven Formularen ohne Formularmodell befinden sich die Daten für alle Felder unter dem <data>-Tag von <afUnboundData> tag.

Beachten Sie außerdem Folgendes:

Die XML-Tags für die Benutzerdaten, die für verschiedene Felder übermittelt werden, werden mit dem Namen der Felder generiert. Daher müssen die Feldnamen eindeutig sein.

<?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>

Konfigurieren des Vorbefüllungs-Services configuring-prefill-service-using-configuration-manager

Verwenden Sie die alloweddataFileLocations-Eigenschaft der Standardkonfiguration für den Vorbefüllungs-Service, um den Speicherort der Datendateien oder eines Regex (regulärer Ausdruck) für die Datendateispeicherorte festzulegen.

Folgende JSON-Datei zeigt ein Beispiel:

  {
  "alloweddataFileLocations": "`file:///C:/Users/public/Document/Prefill/.*`"
  }

Um Konfigurationswerte festzulegen generieren Sie OSGi-Konfigurationen mit dem AEM-SDK und stellen Sie die Konfiguration in Ihrer Cloud Service-Instanz bereit.

Die Besonderheit wiederholbarer Bereiche the-curious-case-of-repeatable-panels

Im Allgemeinen werden gebundene (Formularschema) und ungebundene Felder im selben adaptiven Formular erstellt. Im Folgenden werden allerdings einige Ausnahmen genannt, die gelten, falls die gebundenen Bereiche wiederholbar sind:

Unterstützte Protokolle zum Vorbefüllen von Benutzerdaten supported-protocols-for-prefilling-user-data

Adaptive Formulare können mit Benutzerdaten im Vorbefüllungsdatenformat über folgende Protokolle vorbefüllt werden, wenn sie mit gültigem Regex konfiguriert sind:

„crx://“-Protokoll the-crx-protocol

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

Der angegebene Knoten muss die Eigenschaft jcr:data aufweisen und die Daten enthalten.

„file://“-Protokoll the-file-protocol-nbsp

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

Die referenzierte Datei muss sich auf demselben Server befinden.

„https://“-Protokoll the-http-protocol

https://`servername`/content/forms/af/xml.html?wcmmode=disabled&dataRef=https://servername/somesamplexmlfile.xml

„service://“-Protokoll the-service-protocol

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

Festlegen des Datenattributs in „slingRequest“ setting-data-attribute-in-slingrequest

Sie können auch das data-Attribut in slingRequest festlegen, wo das data-Attribut eine Zeichenfolge mit XML oder JSON ist, wie in folgendem Beispiel-Code dargestellt (Beispiel ist für 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);
%>

Sie können eine einfache XML- oder JSON-Zeichenfolge schreiben, die alle Ihre Daten enthält, und sie in slingRequest festlegen. Sie können dies einfach in der Renderer-JSP für jede Komponente durchführen, die Sie auf der Seite aufnehmen möchten, auf der Sie das „slingRequest“-Datenattribut festlegen können.

Beispiel: Sie wünschen ein spezifisches Design für Ihre Seite mit einem bestimmten Kopfzeilentyp. Um dies zu erreichen, können Sie eine eigene header.jsp schreiben, die Sie in Ihre Seitenkomponente aufnehmen, und das data-Attribut festlegen.

Ein weiteres gutes Beispiel ist ein Szenario, bei dem Sie Daten bei der Anmeldung über Social Madia-Konten wie Facebook, Twitter oder LinkedIn vorbefüllen möchten. In diesem Fall können Sie eine einfache JSP in header.jsp aufnehmen, die Daten aus dem Benutzerkonto abruft und den Datenparameter festlegt.

prefill-page component.zip

Datei abrufen
Beispieldatei „prefill.jsp“ in der Seitenkomponente

Benutzerdefinierter Vorbefüllungs-Service von AEM Forms aem-forms-custom-prefill-service

Sie können den benutzerdefinierten Vorbefüllungs-Service für die Szenarien verwenden, in denen Sie permanent Daten aus einer vordefinierten Quelle lesen. Der Vorbefüllungs-Service liest Daten aus definierten Datenquellen und befüllt die Felder des adaptiven Formulars mit dem Inhalt der Vorbefüllungsdatendatei vor. Außerdem können Sie vorbefüllte Daten dauerhaft mit einem adaptiven Formular verknüpfen.

Erstellen und Ausführen eines Vorbefüllungs-Service create-and-run-a-prefill-service

Der Vorbefüllungs-Service ist ein OSGi-Service und wird über das OSGi-Paket bereitgestellt. Sie erstellen das OSGi-Bundle, laden es hoch und installieren es in die AEM Forms-Pakete. Bevor Sie mit der Erstellung des Pakets beginnen:

Datei laden

Erstellen eines Vorbefüllungs-Service create-a-prefill-service

Das Textbausteinpaket (Vorbefüllungs-Service-Beispielpaket) enthält folgende Beispielimplementierung des AEM Forms-Vorbefüllungs-Service. Öffnen Sie das Textbausteinpaket in einem Code-Editor. Öffnen Sie beispielsweise das Textbausteinprojekt zur Bearbeitung in Eclipse. Nachdem Sie das Textbausteinpaket in einem Code-Editor geöffnet haben, führen Sie folgende Schritte aus, um den Service zu erstellen.

Starten und Verwenden des Vorbefüllungs-Service start-and-use-the-prefill-service

Um den Vorbefüllungs-Service zu starten, laden Sie die JAR-Datei in die AEM Forms-Web-Konsole hoch und aktivieren Sie den Service. Jetzt wird der Service im Editor für adaptive Formulare angezeigt. Verknüpfen eines Vorbefüllungs-Service mit einem adaptiven Formular: