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

Layout von Feldern 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:

Layout eines einzelnen Felds anpassen

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

  1. Im Dialogfeld „Bearbeiten“

  2. Wählen Sie im Dropdownfeld Feldlayout konfigurieren ein benutzerdefiniertes Layout aus und klicken Sie auf OK.

Layout aller Felder eines Formulars anpassen

Führen Sie die folgenden Schritte aus, um ein benutzerdefiniertes Layout auf alle Felder eines Formulars anzuwenden:

  1. Klicken Sie im Bereich Beginn eines adaptiven Formulars auf Bearbeiten und wählen Sie die Registerkarte Stile aus.

  2. Wählen Sie im Dropdownfeld Feldlayout konfigurieren ein benutzerdefiniertes Layout aus und klicken Sie auf OK.

Benutzerdefiniertes Feldlayout definieren

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

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

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

  4. Ä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“

  5. 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%;	
    	}
    
    }
    
    
  6. Beziehen Sie zur Verbesserung des Erscheinungsbilds und der Verhaltensweise die in der Layout-Datei (errorOnRight.jsp) erstellte Clientbibliothek ein.

  7. Ö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

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie