Vertikales Layout

Bei dem Element 'Vertikales Layout' handelt es sich um eine als Layout-Container konfigurierte Coach-Ansicht, die einen Bereich erstellt, in dem Sie Layoutelemente vertikal übereinander anordnen können. Wenn der Abschnitt an eine Liste gebunden wird, wird der vertikale Abschnitt für jedes Element in der Liste wiederholt. Dies führt im Ergebnis zu einer Darstellung, die einer Tabelle ähnlich ist.

Die Elemente 'Vertikales Layout' und 'Horizontales Layout' gehören zu den Steuerelementen, die für das Design einer Benutzerschnittstelle am häufigsten verwendet werden. Gemeinsam bieten die Steuerelemente 'Horizontales Layout' und 'Vertikales Layout' die Mehrzahl der Leistungsmerkmale des Ablauflayouts, die Sie für die Gestaltung komplexer Benutzerschnittstellen verwenden können.

Tipp: Typischerweise werden die Steuerelemente 'Horizontales Layout' und 'Vertikales Layout' im BPM-Benutzerschnittstellen-Toolkit zusammen mit dem Ausblendbares Fenster verwendet. Das entsprechende Steuerelement im veralteten Toolkit für responsive Coaches ist das Element Abschnitt.

Konfigurationseigenschaften

Legen Sie die Konfigurationseigenschaften für das Element 'Vertikales Layout' wie Darstellung, Responsiv und Leistungseigenschaften in der Eigenschaftsregisterkarte für Konfiguration fest oder ändern Sie sie dort.

Anzeigegröße: Eine Konfigurationseigenschaft mit dem Symbol für Anzeigegrößen neben dem Namen der Eigenschaft kann verschiedene Werte für die einzelnen Anzeigegrößen aufweisen. Wenn Sie keinen Wert festlegen, wird der Wert der nächstgrößeren Anzeigegröße als Standardwert für die Anzeigegröße übernommen. Wenn Sie den Process Designer-Desktopeditor (veraltet) verwenden, legen Sie den Wert für die große Anzeigegröße fest. Alle anderen Anzeigegrößen übernehmen diesen Wert.

Motivdefinitionen: Motivdefinitionen geben die Farben und Stile für ein Steuerelement an und bestimmen die Darstellung des Steuerelements. Sie können den Look-and-feel von Steuerelementen im Motiv-Editor voranzeigen. Weitere Informationen finden Sie unter Motive.

Die Darstellungskonfigurationseigenschaften für das Element 'Vertikales Layout' werden in der folgenden Tabelle aufgeführt:

Tabelle 1. Darstellungskonfigurationseigenschaften für das Element 'Vertikales Layout'
Darstellungskonfigurationseigenschaft	Beschreibung	Datentyp
Layoutablauf	Das Layout der Steuerelemente: Horizontal Horizontales integriertes Scrollen Horizontal anliegend Horizontaler automatischer Zeilenumbruch Vertikal Vertikal anliegend	`String`
Horizontale Ausrichtung	Die horizontale Ausrichtung der Steuerelemente im Layout: Ausgerichtet Links Zentriert Rechts Hinweis: Ausgerichtet funktioniert in Kombination mit dem Layoutablauf Horizontales integriertes Scrollen und Horizontaler automatischer Zeilenumbruch nicht gut. Wenn Sie diese Kombination verwenden, kann es zu nicht erwarteten Ergebnissen kommen.	`String`
Vertikale Ausrichtung	Die vertikale Ausrichtung der Steuerelemente im Layout. Diese Eigenschaft gilt nur für horizontales Layoutabläufe. Oben Mitte Unten	`String`
Breite	Gibt die Breite des Steuerelements an. Sie können die Breite in `px` (Pixel), `%` (Prozent) oder `em`-Einheiten angeben. Beispiele: `50px`, `20%` oder `0,4em`. Wenn kein Einheitentyp angegeben wird, wird `px` angenommen.	`String`
Höhe	Gibt die Höhe des Steuerelements in `px` (Pixel) oder `em`-Einheiten an. Wenn kein Einheitentyp angegeben wird, wird `px` angenommen.	`String`

Die responsiven Konfigurationseigenschaften für das Element 'Vertikales Layout' werden in der folgenden Tabelle aufgeführt:

Tabelle 2. Responsive Konfigurationseigenschaften für das Element 'Vertikales Layout'
Responsive Konfigurationseigenschaft	Beschreibung	Datentyp
Responsiver Sensor	(Optional) Die Kennung des Steuerelements 'Responsiver Sensor', die dieses Layout enthält. Wenn keine Angabe erfolgt, wird der nächste Sensor im übergeordneten Container verwendet.	`Boolean`
Verhalten	Gibt an, wie der Abschnitt sich auf Grundlage der Feldfaktoren verhalten muss, die im responsiven Sensor definiert sind. Feldfaktorname: Der Name des Feldfaktors des responsiven Sensors, für den diese Attribute gelten. Untergeordnetes Layout: Das Layout, das Sie mit dem angegebenen Feldfaktor verwenden können. Vertikal Vertikal anliegend Horizontal Horizontales integriertes Scrollen Horizontal anliegend Horizontaler automatischer Zeilenumbruch Untergeordnete Ausrichtung: Die Ausrichtung, die Sie mit dem angegebenen Feldfaktor verwenden können: Ausgerichtet Links Zentriert Rechts Untergeordnete Breite: Die Breite des untergeordneten Steuerelements, die Sie mit diesem Feldfaktor verwenden können. Beispiel: `60%`. Beachten Sie, dass Sie mehrere Breiten für die Steuerelemente angeben können, die im Layout einbezogen sind. Zum Beispiel: `80%`, `20%`. Sichtbarkeit: Die Einstellungen für die Sichtbarkeit, die Sie mit dem angegebenen Feldfaktor verwenden können. Sichtbar Keine Ausgeblendet Breite: Die Abschnittbreite, die Sie mit dem angegebenen Feldfaktor verwenden können. Höhe: Die Abschnitthöhe, die Sie mit dem angegebenen Feldfaktor verwenden können. CSS-Stil: Der CSS-Stil, den Sie auf den angegebenen Feldfaktor anwenden können. CSS-Klasse: Die CSS-Klasse, die Sie zum angegebenen Feldfaktor hinzufügen können.	`ResponsiveBehavior[]`

Sie können die Flexibilität in Bezug auf die Inhalte auch steuern, indem Sie Ihr vertikales Layout in einem Element Responsiver Sensor verschachteln.

Die Leistungskonfigurationseigenschaften für das Element 'Vertikales Layout' werden in der folgenden Tabelle aufgeführt:

Tabelle 3. Leistungskonfigurationseigenschaften für das Element 'Vertikales Layout'
Leistungskonfigurationseigenschaft	Beschreibung	Datentyp
Asynchrones Laden	Verbessert die Benutzerschnittstellenerfahrung bei großen Datenmenge. Allerdings erfolgt das Laden von Zeilen insgesamt langsamer, sobald das Laden des Abschnitts beginnt. Diese Eigenschaft wird nur dann verwendet, wenn der Abschnitt an eine Liste gebunden ist.	`Boolean`
Asynchrone Stapelgröße	Gibt die Anzahl der Zeilen an, die in einem asynchronen Stapel synchron geladen werden. Verwenden Sie diese Eigenschaft, um das synchrone und asynchrone Laden zu optimieren. Diese Eigenschaft wird nur dann verwendet, wenn der Abschnitt an eine Liste gebunden ist.	`Integer`

Beispiel

Fügen Sie in Web-Process Designer ein Steuerelement 'Vertikales Layout' zu dem Coach-Layout hinzu, das Sie als Containersteuerelement verwenden. Platzieren Sie innerhalb des Containers drei Steuerelemente 'Fenster', die Sie z. B. Arbeitskategorien, Anforderungstyp und Elemente nennen. Legen Sie die Konfigurationseigenschaften für jedes Steuerelement wie folgt fest.

Für Vertikales Layout: Legen Sie unter Darstellung für Layoutablauf die Einstellung Vertikal, für Horizontale Ausrichtung die Einstellung Ausgerichtet und für Vertikale Ausrichtung die Einstellung Oben fest. Lassen Sie die Felder Breite und Höhe leer.
Für Arbeitskategorien: Legen Sie unter Darstellung für Farbstil die Einstellung Warnung und für Breite die Einstellung 350px fest.
Für Anspruchstyp: Legen Sie unter Darstellung für Farbstil die Einstellung Erfolg und für Breite die Einstellung 350px fest.
Für Elemente: Legen Sie unter Darstellung für Farbstil die Einstellung Gefahr und für Breite die Einstellung 350px fest.

Wenn Sie den Coach ausführen, werden als Ergebnis drei Anzeigen derselben Höhe und Breite angezeigt, die übereinander in einem vertikalen Abschnitt dargestellt werden: Arbeitskategorien ist als Zeichen für Warnung gelb, Anforderungstyp ist als Zeichen für Erfolg grün und Elemente ist als Zeichen für Gefahr rot.

Ereignisse

Auf der Registerkarte Ereignisse können Sie Ereignishandler für das Steuerelement festlegen oder ändern. Sie können Ereignisse festlegen, die programmgesteuert ausgelöst werden sollen oder wenn ein Benutzer mit dem Steuerelement interagiert. Informationen dazu, wie Codeereignisse definiert werden, finden Sie im Abschnitt Benutzerdefinierte Ereignisse. Das Element 'Vertikales Layout' verfügt über die folgenden Typen von Ereignishandlern:

Bei Laden: Aktivierung erfolgt beim Laden der Seiten. Beispiel:
```
me.setWidth("100%");
```
Bei responsiver Aktualisierung: Aktivierung erfolgt beim Anpassen der Abschnittsgröße an die Anzeigegröße eines Geräts.

Methoden

Die für das Element 'Vertikales Layout' verfügbaren Methoden finden Sie unter Vertikales Layout - JavaScript-API.

Zusätzliche Ressourcen

Informationen zum Erstellen eines Coach finden Sie unter Coaches erstellen.
Informationen zu Standardeigenschaften (Allgemein, Konfiguration, Positionierung, Sichtbarkeit und HTML-Attribute) finden Sie unter Eigenschaften für Coach-Ansichten.