Bild image-adaptive-forms-core-component

Mit einer Bildkomponente in einem adaptiven Formular können Sie Bilder in ein Formular einfügen. Diese Bilder können verwendet werden, um das Gesamt-Design des Formulars zu verbessern, zusätzliche Informationen bereitzustellen oder eine visuelle Hilfe zu bieten, sodass Benutzende leichter den Zweck des Formulars verstehen. Die Bildkomponente kann verwendet werden, um ein Logo, ein Foto oder eine Grafik in ein Formular einzufügen.

Für die Barrierefreiheit ist es wichtig, Alternativtext zum Bild anzugeben, um eine kurze, beschreibende Textalternative für das Bild bereitzustellen, die das Bild für Benutzende beschreibt, die es nicht sehen können.

Beispiel

Beispiel

Verwendung reasons-to-use-image-in-a-form

Es gibt verschiedene Gründe, warum es sinnvoll sein kann, eine Bildkomponente zu einem adaptiven Formular hinzuzufügen:

  • Branding: Ein Bild kann verwendet werden, um das Logo oder den Namen der Organisation anzuzeigen, die das Formular erstellt hat, und so zur Erkennung und Glaubwürdigkeit der Marke beizutragen.

  • Visuelle Hilfe: Ein Bild kann Benutzenden zusätzliche Informationen liefern, damit sie den Zweck des Formulars leichter verstehen können.

  • Dekoration: Ein Bild kann verwendet werden, um das Gesamtdesign des Formulars zu verbessern und es visuell ansprechender zu gestalten.

  • Benutzererlebnis: Mit einem Bild können Sie das Formular benutzerfreundlicher gestalten, indem Sie Benutzenden eine klare und intuitive Möglichkeit bieten, auf Formularfelder zuzugreifen und diese auszufüllen.

Version und Kompatibilität version-and-compatibility

Die Kernkomponente „Akkordeon“ für adaptive Formulare wurde im Februar 2023 als Teil der Kernkomponenten 2.0.4 für Cloud Service und der Kernkomponenten 1.1.12 für AEM 6.5.16.0 Forms oder höher veröffentlicht. Hier finden Sie eine Tabelle mit allen unterstützten Versionen, AEM-Kompatibilität und Links zur entsprechenden Dokumentation:

Komponentenversion
AEM as a Cloud Service
AEM 6.5.16.0 Forms oder höher
v1
Kompatibel mit
Version 2.0.4 und höher
Kompatibel mit
Version 1.1.12 und höher (aber nur bis Version 2.0.0).

Informationen zu Versionen und Freigaben der Kernkomponente finden Sie im Dokument Kernkomponenten-Versionen.

Technische Details technical-details

Aktuelle Informationen zur Kernkomponente „Bild“ für adaptive Formulare finden Sie in der technischen Dokumentation auf GitHub. Weitere Informationen zur Entwicklung von Kernkomponenten finden Sie in der Entwicklerdokumentation für Kernkomponenten.

Dialogfeld „Konfigurieren“ configure-dialog

Im Dialogfeld „Konfigurieren“ können Sie die Bildkomponente für Besuchende einfach anpassen. Sie können auch Bildoptionen definieren, um das Benutzererlebnis zu verbessern.

Registerkarte „Eigenschaften“

  • Name: Sie können eine Formularkomponente sowohl im Formular als auch im Regeleditor durch ihren eindeutigen Namen identifizieren. Der Name darf keine Leerzeichen oder Sonderzeichen enthalten.

  • Titel: Sie können mit dem Titel leicht eine Komponente in einem Formular identifizieren. Standardmäßig wird der Titel über der Komponente angezeigt. Wenn Sie keinen Titel hinzufügen, wird der Name der Komponente anstelle des Titeltexts angezeigt.

  • Als ungebundenes Formularelement markieren: Mit dieser Option können Sie Formularfelder konfigurieren, die mit keinem Schema verbunden sind. Mit dieser Option können Sie Daten speichern, ohne die Datenquelle zu aktualisieren. Außerdem können Sie damit Daten auf eine benutzerdefinierte Art und Weise verarbeiten, getrennt von der standardmäßigen Datenbankintegration.

  • Beschreibung: Eine Beschreibung ist eine kurze Texterklärung, die zusätzliche Informationen oder Klarstellungen zum Zweck eines bestimmten Bildes bietet.

  • Asset hier ablegen oder nach einer hochzuladenden Datei suchen – Mit dieser Option können Sie ein Asset wie ein Bild per Drag-and-Drop mit der Maus ablegen. Sie können auch eine Datei aus einem lokalen Dateisystem mit der Schaltfläche Durchsuchen hochladen. Nach dem Hinzufügen eines Bildes erscheinen unten im Bild drei Schaltflächen:

    • Bearbeiten – Tippen oder klicken Sie auf Bearbeiten, um die Wiedergabeversionen des Assets im Asset-Editor zu verwalten.
    • Löschen – Tippen oder klicken Sie auf Löschen, um die Auswahl des aktuell ausgewählten Bilds aufzuheben.
    • Auswahl – Tippen oder klicken Sie auf die Option Auswahl, um ein anderes Bild aus dem Ordner „Assets“ auszuwählen.
  • Alternativtext: Diese Option wird verwendet, um eine kurze Textalternative für das Bild einzugeben, um es für sehbehinderte Benutzende zu beschreiben.

  • Komponente ausblenden: Wählen Sie diese Option, um die Komponente aus dem Formular auszublenden. Die Komponente bleibt für andere Zwecke verfügbar, z. B. für Berechnungen im Regel-Editor. Dies ist nützlich, wenn Sie Informationen speichern müssen, die Benutzende nicht sehen oder direkt ändern müssen.

Dialogfeld „Design“ design-dialog

Das Dialogfeld „Design“ wird verwendet, um CSS-Stile für die Bild-Komponente zu definieren und zu verwalten.

Registerkarte „Stile“ styles-tab

Sie können die Registerkarte zum Definieren und Verwalten von CSS-Stilen für eine Komponente verwenden. Die Kernkomponente „Bild“ für adaptive Formulare unterstützt das AEM-Stilsystem.

Dialogfeld „Design“

  • Standard-CSS-Klassen: Sie können eine standardmäßige CSS-Klasse für die Kernkomponente „Bild“ für adaptive Formulare bereitstellen.

  • Zulässige Stile: Sie können Stile definieren, indem Sie den Namen und die CSS-Klasse für den Stil angeben. Sie können beispielsweise einen Stil mit dem Namen „Fettschrift“ erstellen und die CSS-Klasse „Schriftbreite: Fett“ bereitstellen. Sie können diese Stile bei einem adaptiven Formular im adaptiven Formular-Editor anwenden. Um einen Stil anzuwenden, wählen Sie im Editor für adaptive Formulare die Komponente aus, auf die Sie den Stil anwenden möchten, navigieren Sie zum Eigenschaften-Dialog und wählen Sie den gewünschten Stil aus der Dropdown-Liste Stile. Wenn Sie die Stile aktualisieren oder ändern müssen, kehren Sie einfach zum Dialogfeld „Design“ zurück, aktualisieren die Stile auf der Registerkarte „Stile“ und speichern die Änderungen.

Benutzerdefinierte Eigenschaften

Dialogfeld „Benutzerdefinierte Eigenschaften“

Mit der Option „Benutzerdefinierte Eigenschaften“ können Sie mithilfe der Formularvorlage benutzerdefinierte Attribute (Schlüsselwertpaare) mit einer Kernkomponente eines adaptiven Formulars verknüpfen. Die benutzerdefinierten Eigenschaften werden im Eigenschaftenbereich der Headless-Ausgabedarstellung der Komponente angezeigt. So kann ein dynamisches Formularverhalten erzeugt werden, das sich je nach den benutzerdefinierten Attributwerten anpasst. Beispielsweise können Entwickelnde verschiedene Ausgabedarstellungen einer Headless-Formularkomponente für Mobile-, Desktop- oder Web-Plattformen entwerfen und so das Benutzererlebnis auf einer Vielzahl von Geräten erheblich verbessern.

  • Gruppenname: Sie können einen Namen angeben, um die Gruppe der benutzerdefinierten Eigenschaften zu kennzeichnen. Sie können mehrere Gruppen benutzerdefinierter Eigenschaften hinzufügen, löschen oder neu anordnen. Nach dem Hinzufügen der Gruppe benutzerdefinierter Eigenschaften werden folgende Optionen angezeigt:

    • Schlüssel-Wert-Paare: Sie können mehrere Namen und Werte benutzerdefinierter Eigenschaften hinzufügen, indem Sie für jede Gruppe benutzerdefinierter Eigenschaften auf Hinzufügen klicken.

    • Löschen: Tippen oder klicken Sie auf diese Option, um den Namen und den Wert der benutzerdefinierten Eigenschaft zu löschen.

    • Neu anordnen: Ordnen Sie den Namen und Wert der benutzerdefinierten Eigenschaft Antippen oder Klicken und Ziehen neu an.

Ähnliche Artikel related-articles

Siehe auch see-also

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c