Layout und Positionierung von Fehlermeldungen eines adaptiven Formulars anpassen

Sie sehen sich Hilfeinhalte der folgenden Version an:

Sie können Layout und Positionierung von Fehlermeldungen eines adaptiven Formulars anpassen. Sie können die folgenden Anpassungen vornehmen:

Position und Layout der Beschriftung eines Felds ohne Ändern der entsprechenden CSS-Eigenschaften anpassen
Position von Inline-Fehlermeldungen anpassen
Inhalt der dynamischen Hilfeanzeige anpassen
Position der Feldkomponenten (Beschriftung, Widget, Kurzbeschreibung, Langbeschreibung und Komponenten der Hilfeanzeige) ohne Ändern der entsprechenden CSS-Eigenschaften anpassen

Sie können das Layout eines einzelnen Felds oder aller Felder anpassen, um die Position von Beschriftungen und Fehlermeldungen anzupassen. Führen Sie die folgenden Schritte aus, um ein benutzerdefiniertes Layout auf ein Feld anzuwenden:

Führen Sie die folgenden Schritte aus, um ein benutzerdefiniertes Layout auf ein einzelnes Feld anzuwenden:

Öffnen Sie das Formular im Stilmodus. Um das Formular im Stilmodus zu öffnen, tippen Sie in der Seitensymbolleiste auf > Stil.

Wählen Sie in der Randleiste unter „Formularobjekte“ das Feld aus und tippen Sie auf die Schaltfläche zum Bearbeiten .

Wählen Sie den Status des Feldes, das Sie anpassen möchten, und geben Sie den Stil für diesen Status an.

Mit AEM Forms können Sie jetzt ein Design erstellen und auf Ihr Formular anwenden. Im Design-Editor können Sie zentral den Stil von Formularkomponenten angeben. Beim Erstellen eines Designs geben Sie Stile auf der Komponentenebene an. Weitere Informationen zu Designs finden Sie unter Designs in AEM Forms.

Indem Sie Designs im Design-Editor erstellen, könen Sie das Layout aller Felder im Formular anpassen. Nachdem Sie ein Design erstellt haben, führen Sie die folgenden Schritte aus, um es auf ein Formular anzuwenden:

Öffnen Sie das Formular im Bearbeitungsmodus.

Wählen Sie im Bearbeitungsmodus eine Komponente aus und tippen Sie anschließend zuerst auf > Adaptive Form-Container und dann auf .

Wählen Sie in der Seitenleiste unter „Adaptives Formulardesign“ das Design, das Sie im Design-Editor erstellt haben.

Öffnen Sie CRXDE Lite. Die Standard-URL lautet http://[Server]:[Port]/crx/de.

Kopieren Sie ein Feldlayout vom Knoten „/libs/fd/af/layouts/field“ (z. B. defaultFieldLayout) in den Knoten „/apps“ (z. B. „/apps/af-field-layout“).

Benennen Sie den kopierten Knoten und die Datei „defaultFieldLayout.jsp“ um. Beispielsweise in „errorOnRight.jsp“.

Ändern Sie den Wert der Eigenschaften „qtip“ und „jcr:description“ des kopierten Knotens. Ändern Sie z. B. den Wert der Eigenschaften in „Error On Right“

Um neue Stile und Verhaltensweisen hinzuzufügen, erstellen Sie eine Clientbibliothek unter dem Knoten „/etc“.

Erstellen Sie z. B. im Verzeichnis „/etc/af-field-layout-clientlib“ den Knoten „client-library“. Fügen Sie die Kategorieneigenschaft mit dem Wert „af.field.errorOnRight“ und die style.less-Datei mit folgendem Code hinzu:

.widgetErrorWrapper {
	
	height: 38px;
	margin: 5px;

	.guideFieldWidget{
	width: 60%;
	float: left;	
	}

	.guideFieldError{
	overflow:hidden;
	width:40%;	
	}

}

Beziehen Sie zur Verbesserung des Erscheinungsbilds und der Verhaltensweise die in der Layout-Datei (errorOnRight.jsp) erstellte Clientbibliothek ein.

Öffnen Sie das Dialogfeld „Bearbeiten“ und wählen Sie Formatieren. Wählen Sie im Dropdownfeld Feldlayout konfigurieren das neu erstellte Layout aus und klicken Sie auf OK.

Herunterladen

Datei abrufen

Das ErrorOnRight.zip-Paket enthält Code, um Fehlermeldungen auf der rechten Seite der Felder anzuzeigen.

Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise | Online-Datenschutzrichtlinie

Layout und Positionierung von Fehlermeldungen eines adaptiven Formulars anpassen

Layout von Feldern anpassen

Layout eines einzelnen Felds anpassen

Layout aller Felder eines Formulars anpassen

Benutzerdefiniertes Feldlayout definieren

Fragen an die Community

Wenden Sie sich an Adobe