Sie befinden sich hier:
Anpassen von Bildschirmelementen und Komponentenstil und -layout
Bieten Sie Benutzern, die Ihren Flow ausführen, eine bessere Erfahrung, indem Sie den Stil und das Layout Ihrer Bildschirme anpassen. Erhalten Sie das gewünschte Erscheinungsbild, indem Sie den Stil Ihres gesamten Bildschirmelements oder den Stil einzelner Komponenten ändern. Gestalten Sie Ihren Bildschirm benutzerfreundlicher, indem Sie Ihre Bildschirmkomponenten mithilfe von Abschnitten in Spalten organisieren. Passen Sie zudem die Komponentenbreite und die vertikale Ausrichtung an, um den Abstand und die Positionierung zu steuern.
Erforderliche Editionen
| Unterstützte Editionen anzeigen. |
| Erforderliche Benutzerberechtigungen | |
|---|---|
| Öffnen, Bearbeiten, Erstellen, Aktivieren oder Deaktivieren eines Flows mit allen in Flow Builder verfügbaren Flow-Typen, -Elementen und -Funktionen, einschließlich Einstein und Agentforce für Flow: | Flow verwalten |
Stilanpassungen überschreiben den Themenstil Ihrer Organisation oder Experience Cloud-Site. Wenn Sie einen ungültigen Wert für eine Stileigenschaft eingeben, wird die Stileigenschaft ignoriert und das Organisations- oder Experience Cloud-Site-Thema wird verwendet.
Siehe auch:
Bevor Sie loslegen
Wenn Sie nicht über einen Bildschirm-Flow verfügen, erstellen Sie einen.
-
Öffnen Sie die Listenansicht "Flows".
- Geben Sie unter "Setup" im Feld "Schnellsuche" den Text Flows ein und wählen Sie dann Flows aus.
- Wählen Sie in der Automatisierungsanwendung die Registerkarte Flows aus.
- Klicken Sie in einer beliebigen Lightning-Anwendung auf der Registerkarte "Flows" auf das Aktionsmenü und wählen Sie Flow öffnen aus.
-
Erstellen Sie einen Bildschirm-Flow.
- Klicken Sie in der Automatisierungsanwendung auf Neu | Bildschirmautomatisierungen | Bildschirm-Flow .
- Klicken Sie unter "Setup" auf Neuer Flow | Bildschirmautomatisierungen | Bildschirm-Flow .
-
Fügen Sie ein Bildschirmelement hinzu.
-
Klicken Sie auf
und wählen Sie Bildschirm aus.
- Geben eine Bezeichnung, einen API-Namen und eine Beschreibung ein.
-
Klicken Sie auf
Anpassen des Stils eines Bildschirmelements
Legen Sie den Stil Ihres gesamten Bildschirmelements fest. Fügen Sie beispielsweise einen Rahmen um Ihren Bildschirm hinzu.
-
Klicken Sie auf die Kopfzeile des Bildschirmelements.
Der Eigenschaftenbereich des Bildschirmelements wird geöffnet.
- Klicken Sie auf die Registerkarte "Stil".
- Wechseln Sie zum Abschnitt "Containerstil festlegen".
-
Passen Sie die Eigenschaften nach Bedarf an:
- Hintergrundfarbe: Legt die Hintergrundfarbe für den Textkörper des Bildschirms fest.
- Rahmenfarbe: Legt die Farbe des Rahmens um den Bildschirmkörper fest.
- Rahmenradius: Steuert die Rundung der Rahmenecken.
- Rahmengewicht: Passt die Dicke des Rahmens an.
Anpassen des Stils einer Bildschirmelementkopfzeile
Legen Sie den Stil der Kopfzeile Ihres Bildschirmelements fest. Ändern Sie beispielsweise die Schriftgröße der Kopfzeile.
-
Klicken Sie auf die Kopfzeile des Bildschirmelements.
Der Eigenschaftenbereich des Bildschirmelements wird geöffnet.
- Klicken Sie auf die Registerkarte "Stil".
- Wechseln Sie zum Abschnitt "Kopfzeilenstil festlegen".
- Schritt
-
Passen Sie die Eigenschaften nach Bedarf an:
- Textfarbe: Legt die Farbe des Texts in der Kopfzeile fest.
- Schriftgröße: Definiert die Größe des Texts in der Kopfzeile.
Anpassen des Stils einer Bildschirmelementfußzeile
Legen Sie den Stil der Fußzeile Ihres Bildschirmelements fest, einschließlich der Navigationsschaltflächen. Lassen Sie die Schaltfläche beispielsweise die Farbe ändern, wenn ein Benutzer darauf klickt.
-
Klicken Sie auf die Kopfzeile des Bildschirmelements.
Der Eigenschaftenbereich des Bildschirmelements wird geöffnet.
- Klicken Sie auf die Registerkarte "Stil".
- Wechseln Sie zum Abschnitt "Fußzeilenstil festlegen".
-
Legen Sie für jede Schaltfläche die Größe und Form der Schaltfläche und des Rahmens fest.
- Rahmenradius: Steuert die Rundung der Schaltflächenecken.
- Rahmengewicht: Passt die Dicke des Rahmens an.
-
Legen Sie für den Benutzerinteraktionsstatus der einzelnen Schaltflächen die zu verwendenden Farben fest. Interaktionsstatus:
- Standard: Wenn der Benutzer nicht mit der Schaltfläche interagiert.
- Hover: Wenn der Benutzer den Mauszeiger auf die Schaltfläche bewegt.
- Aktiv: Wenn der Benutzer auf die Schaltfläche klickt.
Farboptionen:- Hintergrundfarbe: Legt die Hintergrundfarbe für die Schaltfläche fest.
- Textfarbe: Steuert die Farbe des Texts innerhalb der Schaltfläche.
- Rahmenfarbe: Legt die Farbe des Rahmens um die Schaltfläche fest.
Ändern des Stils einer Komponente
Passen Sie das Erscheinungsbild einiger Bildschirmkomponenten an, indem Sie Farben, Rahmen und andere visuelle Eigenschaften an Ihre Designanforderungen anpassen.
Sie können den Stil für die folgenden Komponenten anpassen: Kontrollkästchen, Kontrollkästchengruppe, Währung, Datum, Datum/Uhrzeit, Anzeigetext, Zahl, langer Textbereich, Mehrfachauswahlliste, Kennwort, Auswahlliste, Optionsfeld, Repeater, Abschnitt und Text.
-
Fügen Sie eine Bildschirmkomponente hinzu.
-
Klicken Sie in der Liste "Komponenten" auf eine Komponente.
Der Bereich mit den Komponenteneigenschaften wird geöffnet.
-
Klicken Sie in der Liste "Komponenten" auf eine Komponente.
- Klicken Sie auf die Registerkarte "Stil".
- Wechseln Sie zum Abschnitt Stile festlegen <.
-
Passen Sie die Eigenschaften nach Bedarf an. Die verfügbaren Optionen hängen vom Komponententyp ab.
- Hintergrundfarbe: Legt die Hintergrundfarbe für die Komponente fest.
- Hintergrundfarbe – Ausgewählt: Legt die Hintergrundfarbe für die Komponente fest, wenn der Benutzer sie auswählt.
- Hintergrundfarbe – Fokus: Legt die Hintergrundfarbe für die Komponente fest, wenn der Benutzer auf die Komponente klickt oder die Tabulatortaste verwendet, um zur Komponente zu wechseln.
- Rahmenfarbe: Legt die Farbe des Rahmens um die Komponente fest.
- Rahmenfarbe – Ausgewählt: Legt die Farbe des Rahmens um die Komponente fest, wenn der Benutzer sie auswählt.
- Rahmenradius: Steuert die Rundung der Rahmenecken.
- Rahmengewicht: Passt die Dicke des Rahmens an.
- Textfarbe: Legt die Textfarbe in der Komponente fest.
- Textfarbe – Fokus: Legt die Textfarbe in der Komponente fest, wenn der Benutzer auf die Komponente klickt oder die Tabulatortaste verwendet, um zur Komponente zu wechseln.
- Textfarbe – Hover: Legt die Textfarbe in der Komponente fest, wenn der Benutzer den Mauszeiger auf die Komponente bewegt.
- Mindesthöhe: Die Mindesthöhe des Textfelds der Komponente.
- Speichern Sie Ihre Änderungen.
Organisieren von Bildschirmkomponenten und Feldern in Spalten mithilfe von Abschnitten
Abschnitte sind eine gute Möglichkeit, Ihre Komponenten und Felder zu organisieren, wenn Sie ein Bildschirmlayout mit einer oder mehreren Spalten erstellen möchten. Sie können bis zu vier Spalten in einem Abschnitt hinzufügen. Die Komponenten und Felder können so breit sein, wie es die Spalte zulässt, in der sie sich befinden. Sie können die Komponentenbreite und die vertikale Ausrichtung weiter anpassen, indem Sie im Editor für Bildschirmeigenschaften die Registerkarte "Stil" verwenden.
-
Fügen Sie eine Abschnittskomponente hinzu.
-
Klicken Sie in der Liste "Komponenten" auf Abschnitt.
Der Eigenschaftenbereich der Abschnittskomponente wird geöffnet.
-
Klicken Sie in der Liste "Komponenten" auf Abschnitt.
- Passen Sie die Spaltenbreite an und fügen Sie optional eine Kopfzeile ein.
- Fügen Sie der Spalte Bildschirmkomponenten hinzu.
- Fügen Sie bei Bedarf weitere Spalten hinzu.
- Speichern Sie Ihre Änderungen.
Ändern der Komponentenbreite und vertikalen Ausrichtung
Ein Bildschirm weist ein Layout mit 12 Spalten auf. Die Breite gibt die Anzahl der horizontalen Rasterspalten an, die die Bildschirmkomponente oder ein Datensatzfeld auf einem Bildschirm einnimmt. Beispielsweise nimmt eine Komponente oder ein Feld mit einer Breite von 8 von 12 Spalten 66 % des verfügbaren Platzes im Container ein. Die vertikale Ausrichtung bestimmt, wie die Komponente oder das Feld relativ zu anderen Komponenten oder Feldern auf dem Bildschirm positioniert wird. Die Standardbreite für Komponenten beträgt 12 von 12 (vollständige Breite) und die standardmäßige vertikale Ausrichtung lautet "Top".
-
Fügen Sie eine Bildschirmkomponente hinzu.
-
Klicken Sie in der Liste "Komponenten" auf eine Komponente.
Der Bereich mit den Komponenteneigenschaften wird geöffnet.
-
Klicken Sie in der Liste "Komponenten" auf eine Komponente.
- Klicken Sie auf die Registerkarte "Stil" und wechseln Sie dann zum Abschnitt "Layout festlegen".
-
Wählen Sie zum Ändern der Breite der Komponente in der Dropdown-Liste "Breite" eine Option aus.
Der Bildschirmbereich ist in 12 gleiche Spalten unterteilt. Die Breite einer Komponente wird anhand der Anzahl der Spalten gemessen, die sie einnimmt. Wenn die Breite einer Komponente beispielsweise auf 3 von 12 festgelegt ist, nimmt sie horizontal 3 der 12 Spalten ein oder 25 % des verfügbaren Platzes im Container. Die Standardkomponentenbreite beträgt 12 von 12 (vollständige Breite) oder 100 % des verfügbaren Platzes im Container.
-
Wenn Sie die vertikale Ausrichtung der Komponente ändern möchten, wählen Sie unter "Vertikale Ausrichtung" die Option Oben, Mitte oder Unten aus.
Die standardmäßige vertikale Ausrichtung lautet Top.
- Speichern Sie Ihre Änderungen.
