Adaptive Forms

Was sind Adaptive Forms?

Die Adaptive Forms Technologie ermöglicht die Erstellung dynamischer und responsiver Formulare, die sich an die Bildschirmgröße optimal anpassen. 

Adaptive Forms

Adaptive Form

Ein adaptives Formular in unterschiedlichen Situationen: Desktop, Tablet, Smartphone

"Adaptive Forms" ist eine Technologie zur Entwicklung und Auslieferung responsiver Formulare, die auf allen Endgeräte optimal angezeigt werden. Anwendung findet diese Technologie:

  • für endgeräteübergreifende Formularprozesse (z.B. bei Versicherungen, Banken, Versorgern etc.)
  • als offline-fähige HTML Formulare in Verbindung mit der AEM Forms Workspace App (zum Beispiel als Anwendung für Außendienstmitarbeiter, Bank- oder Versicherungsberater, Makler)
  • als zentraler und unternehmensweiter Formularstandard

In ein AEM Forms Projekt sind folgende Personen involviert

            

Der AEM Forms Entwickler

AEM Forms Developer

Die AEM Forms Adaptive Forms Technologie beinhaltet einen vorkonfigurierten Formularbaukasten, der an die CI des Unternehmens angepasst werden sollte. Dabei fallen für den AEM Entwickler initial die folgenden Tätigkeiten an:

  • Im sogenannten Theme Editor wird das Look-and-Feel des Adaptive Forms definiert. Dazu gehören Farbgebung, Bilder-Sprites, Dimensionen und Positionen.
  • Zudem stellt der AEM Entwickler Templates mit fest vorgegebener Struktur bereit, auf welchen die Formulare aufbauen. Im sogenannten „Structure“ Modus definiert er den Header und Footer sowie die Template Logik, die zum festen Bestandteil der Templates gehören. Im sogenannten „Initial Content“ definiert er den Content-Bereich des „Adaptive Forms“, den der Formulardesigner mit Formularfeldern befüllen kann. Das fertige Template entspricht schließlich einer responsiven Formularvorlage, mit vordefinierten Eigenschaften und einer vorgegebenen Inhaltsstruktur, aus denen ein adaptives Formular erstellt wird. Die Vorlage hat vorkonfigurierte Layouts, Styles und eine einfache, bereits vorgegebene Inhaltsstruktur.
  • AEM Forms Adaptive Forms bietet eine Vielzahl an Standard Komponenten mit diversen Dialog Optionen. Diese können durch den AEM Entwickler an die Bedürfnisse des Kunden angepasst werden. Zudem kann der Entwickler Komponenten auch selbst entwickeln.

Das Ergebnis der Entwicklung ist ein Formularbaukasten, der den Formulardesignern für die Erstellung der Formulare bereitgestellt wird.

 

(Diese Dienstleistung wird in der Regel von eggs unimedia erbracht)

Der Formulardesigner aus dem Fachbereich

Formulardesigner

AEM Forms bietet ein intuitives, webbasiertes User Interface, in welchem Formulardesigner (i.d.R. Fachanwender), auf Basis des bereitgestellten Formularbaukastens, Formulare überwiegend mittels Drag-and-Drop erstellen können. Das User Interface für den Formulardesigner bietet:

  • Ein umfangreiches Set an Standard Formularkomponenten (Textfeld, Drop-Down, Check-Boxen, Radio Buttons, Attachment Upload etc.)
  • Drag-and-drop Funktionalität für das einfache Hereinziehen von Formularfeldern
  • Zugriff auf das integrierte Asset Repository

Wenn Autoren ein neues Formular erstellen oder ein bestehendes bearbeiten, arbeiten sie mit den folgenden Elementen des User Interfaces:

  • Sidebar
  • Page toolbar
  • Component toolbar
  • Adaptive form page

(Diese Dienstleistung kann sowohl vom Kunden, als auch von eggs unimedia erbracht werden)

User Interface für den Formulardesigner

           

Oberfläche (UI) für das Erstellen der Formulare per Drag and Drop

bubu

Sidebar

Die Sidebar Oberfläche verwenden Formulardesigner für Folgendes:

  • Anzeige von Formular Inhalten wie Panels, Komponenten, Felder und Layout
  • Ändern von Eigenschaften von Komponenten
  • Suchen, Anzeigen und Verwenden von Assets, die im AEM Digital Asset Management (DAM) hinterlegt sind
  • Drag-and-Drop von Formular Komponenten in das Adaptive Form

Form Objects

Diese stellen die Hierarchie des Formulars dar. Autoren können in dieser Sicht zu den jeweiligen Formularkomponenten navigieren, die Reihenfolge in der Baumstruktur ändern und nach Objekten suchen.

Data Model Objects

Diese stellen die Hierarchie des Datenmodells dar (falls für das Formular ein XML Schema, JSON Schema oder ein XDP Template verwendet wird).

Es ermöglicht das einfache Drag-and-Drop von Formularfeldern in das Adaptive Form. Das hinzugefügte Element wird automatisch in eine Formularkomponente konvertiert und behält dabei die ursprünglichen Eigenschaften bei (Feldlänge, optionales Feld oder Pflichtfeld, Validierung etc.).

Oberfläche für Konfigutration der Eigenschaften, Einbinden von Asstes und Komponenten

dwa

A: Content B: Eigenschaften (Properties) C: Assets D: Komponenten

Eigenschaften (Properties)

In diesem Tab lassen sich die Eigenschaften einer Komponente ändern, wie z.B. Feldname, Pflichtfeld oder optionales Feld, Hilfetext, Validierung, Vorbefüllung.

Assets

In diesem Tab lassen sich unterschiedliche Arten von Assets wie Bilder und Videos über die Schnittstelle aus dem Digital Asset Management in das Formular einbinden.

Components

Dieser Tab beinhaltet alle Komponenten, die dem Formulardesigner zur Erstellung eines Adaptive Forms zur Verfügung stehen. Komponenten lassen sich per Drag-and-Drop in das Formular ziehen und je nach Anforderungen konfigurieren. AEM Forms bietet eine Vielzahl an Standard Komponenten mit diversen Dialog Optionen. Dieser Baukasten ermöglicht Formulardesignern, Formulare individuell zu erstellen. Einige Komponenten die bereits standardmäßig enthalten sind und zu Projektstart durch den AEM Entwickler angepasst werden können sind:

  • Adobe Sign Block
  • Captcha
  • Drop-down list
  • Password
  • Save Button
  • etc.

Toolbar

Die Toolbar bietet Funktionen zur Voransicht des Formulars, Ändern der Formulareigenschaften und Ändern des Formularlayouts.

Sobald eine Komponente ausgewählt wurde, wird die Komponenten Toolbar eingeblendet, die Optionen zum konfigurieren, kopieren, ausschneiden, hinzufügen etc. bietet.

Integration in bestehende Architektur

Formulare können auch auf Basis eines Datenschemas erstellt werden, damit Unternehmen mit strukturierten Daten arbeiten können. Dabei kann man zwischen den folgenden Möglichkeiten wählen:

 

Form Data Model

Die AEM Forms Data Integration ermöglicht die Integration von Services unterschiedlicher Datenquellen in ein Datenmodell, welches für die Erstellung Adaptiver Formulare verwendet werden kann. Diese Option ist sinnvoll, wenn das Adaptive Formular mit Daten aus unterschiedlichen Datenquellen vorbelegt sein soll und Daten an Drittsysteme übergeben werden sollen.

XDP Formular Template

Falls im Unternehmen bereits XFA oder XDP-basierte Adobe Formulare verwendet werden, können diese als Grundlage für Adaptive Form eingesetzt werden. Alle bestehenden Regeln werden für die auf Basis der XFA Formulare erstellten Adaptive Form übernommen, sodass Formularfelder automatisch Validierungen von Feldinhalten, Events, Eigenschaften (bspw. Pflichtfeld/optionales Feld), etc. beinhalten.

XML Schema (XSD) / JSON Schema

XML und JSON Schemas repräsentieren die Struktur, in welcher Daten erstellt oder von Back-End Systemen Ihrer Organisation konsumiert werden. Das Datenschema kann mit einem adaptiven Formular verknüpft werden und die einzelnen Elemente des Schemas können verwendet werden, Content in das Formular zu ziehen. Die Elemente des Schemas stehen den Formulardesigners  im „Data Model Objects“ Tab des Authoring UIs zur Verfügung. 

Ablauf der Formularbereitstellung

Author Publisher Dispatcher

Author Publisher Dispatcher

AEM Forms beinhaltet die folgenden Umgebungen (siehe Schaubild), die miteinander interagieren:

 

Die Autorenumgebung

Die Autorenumgebung bietet die Mechanismen zum Erstellen und Aktualisieren von Formularen, bevor die Formulare tatsächlich veröffentlicht werden.

Technisch gesehen sind Adaptive Forms responsive HTML5 Webseiten, also "gewöhnlicher" Web Content. Zur Erstellung des Formular Contents arbeitet der Formulardesigner (ein Content Author) in der sogenannten Autorenumgebung. In dieser steht ihm eine einfach zu verwendende grafische Benutzeroberfläche für das Erstellen der Formulare zur Verfügung (siehe oben). Die Autorenumgebung befindet sich hinter der Firewall eines Unternehmens, was eine Anmeldung des Autors sowie entsprechende Zugriffsrechte erfordert.

 

Je nachdem, wie die jeweilige Instanz und die entsprechenden Benutzerrechte konfiguriert sind, können Autoren unter anderem die folgenden Aufgaben durchführen:

  • Erstellen neuer Inhalte (Formulare) oder Bearbeiten vorhandener Inhalte auf einer Seite
  • Verwenden vordefinierter Vorlagen zum Erstellen neuer Inhalte
  • Erstellen, Bearbeiten und Verwalten von Assets
  • Erstellen, Bearbeiten und Verwalten von Veröffentlichungen
  • Verschieben, Kopieren oder Löschen von Formularen, Assets usw.
  • Veröffentlichen (oder Rückgängigmachen der Veröffentlichung) von Formularen etc.

 

Außerdem gibt es diverse Features, die Autoren bei der Erstellung von Formularen und Websites unterstützen. Dazu gehören z.B.:

  • Workflows zur Genehmigung einer Formularveröffentlichung
  • Projekte zur Koordination einzelner Aufgaben
  • etc.

 

Die Publisher Umgebung

Wenn die Formulare fertig erstellt wurden, werden sie (über einen Genehmigungsworkflow) in der Publisher Instanz veröffentlicht. Hier werden die entsprechenden Websites / Adaptive Forms zur Verfügung gestellt. Bei einer normalen Internet-Site befindet sich die Veröffentlichungsumgebung innerhalb der DMZ, d.h. es besteht die Zugriffsmöglichkeit aus dem Internet.

 

Der Dispatcher

Um eine optimale Nutzung der Website durch Besucher zu gewährleisten, führt in der Regel ein Dispatcher Lastverteilung und Caching durch. 

Der vollintegrierte Formularworkflow

dwa

Da Unternehmen das selbe Formular häufig für unterschiedliche Kanäle (Web, Portal, App, etc.) verwenden und Formularprozesse laufend optimiert werden sollten, bietet sich der folgende Workflow an:

 

Schritt 1: In einem zentralen Formularportal, das Bestandteil von AEM Forms ist, können alle Formulare verwaltet werden. Die Verwaltungsoberfläche bietet eine Such- und Filteroption zum einfachen Auffinden von Formularen.

Sobald ein Formulardesigner ein neues Formular erstellt hat, überprüft er den Inhalt und stößt den (Genehmigungs-) Workflow zum Publizieren des/der Formulare an. Da es sich um responsive Formulare handelt, gibt es eine zentrale Version eines Formulars, auch wenn es in mehreren Kanälen verwendet wird (App, Website, Intranet etc.). Änderungen an dem Formular erfolgen also einmal zentral und vererben sich entsprechend.

Schritt 2: Im Rahmen des Publizierungsworkflows wird das Formular in der Publish Instanz veröffentlicht.  Bei der Verwendung der Mobile App von AEM Forms synchronisiert sich diese mit den für die App zu veröffentlichenden Adaptive Forms auf der Publish Instanz.

Schritt 3: Falls Adaptive Forms im Web mit Adobe Analytics verknüpft sind, lassen sich Informationen zur Formularnutzung ableiten wie:

  • Anzahl der Formularabrufe, Anzahl der Übertragungen, Abbruchrate
  • Wo wird auf Hilfe geklickt
  • Wie lange dauert es, das Formular auszufüllen
  • An welchen Stellen brechen Anwender den Formularprozess ab
  • etc.

Auf Basis dieser Erkenntnisse lassen sich Formulare stetig verbessern.

Schritt 4: Um unterschiedliche Versionen eines Formulars im Web hinsichtlich Benutzbarkeit / Conversion etc. zu erproben, lassen sich A/B Tests durchführen. Für einen definierten Zeitraum werden also zwei Versionen eines Formulars ausgespielt und können anschließend miteinander verglichen werden. Das Gewinner-Formular wird dann perspektivisch verwendet und kann dann weiter optimiert werden.

Schritt 5: Nachdem ein Formular überarbeitet wurde, erfolgt ein automatisches Formularupdate in alle Kanäle.