Ein Lightning-Blueprint-Leitfaden für die Bearbeitung umfangreicher Datensätze: realistische Abstände, Typografie und semantische Farben, ein bearbeitbarer Fallarbeitsbereich, Feldvalidierung und ein Aktivitätsverlauf, der lokale Änderungen widerspiegelt.
Ändere Priorität oder Status, validiere eine Änderungsnotiz, speichere einen lokalen Aktivitätseintrag und verwirf einen späteren Entwurf, ohne den gespeicherten Datensatz zu ändern.
Native SLDS 2.264.1 CSS und Paketdateien; eigenständige, barrierefreie HTML und JavaScript. Keine Salesforce-API- oder Lightning-Runtime. · Implementierungsreferenz
02
Salesforce Lightning-Designsystem: Designreferenz
Veröffentlichtes natives CSS aus @salesforce-ux/design-system 2.264.1 und ui-force-Tokenexport. Dies ist eine fixierte Referenz für das klassische Blueprint, kein Anspruch auf Kompatibilität mit der neueren SLDS-2-Designsprache oder einer Lightning Web Components-Runtime. Das historische Upstream-Repository ist archiviert.
Salesforce Lightning-Designsystem: Datensatzlayout und Kontext
Die Datensatzidentität oberhalb lokaler Aufgaben platzieren
Der Seitenkopf enthält eine Vorgangsnummer, einen Betreff, ein Konto und eine zuständige Person. Diese Werte kennzeichnen das Objekt, bevor die Person ein Feld ändert. Das Statusbadge fasst den lokal gespeicherten Datensatz zusammen. Es ändert sich daher erst beim Speichern und nicht schon beim Ändern eines noch nicht übernommenen Auswahlfelds.
Details und Aktivitäten voneinander trennen
Der größere Bereich vereint den Kundenkontext und das Bearbeitungsformular. Der sekundäre Bereich enthält einen chronologischen Verlauf. Durch diese Trennung können Nutzer die angeforderte Arbeit mit bereits erfassten Änderungen vergleichen, ohne zu einer anderen Seite wechseln zu müssen. Auf Mobilgeräten werden die Bereiche in derselben semantischen Reihenfolge untereinander angeordnet.
Salesforce Lightning Semantische Farben und Zustände des Designsystems
Token-Namen als Rollen verstehen
Der Export ui-force unterscheidet zwischen Standardtext, zurückhaltendem Text, ausgewählten Rahmen und Markenfarben für Schaltflächenhintergründe. Das Beispiel hält den Fließtext dunkel, Metadaten zurückhaltend und die primäre Aktion blau. Rot ist dem ungültigen Feld und seiner schriftlichen Fehlermeldung vorbehalten – nicht jedem ungespeicherten Wert.
Zustände nicht nur durch Farben vermitteln
Priorität und Status werden in der Zusammenfassung und im neuen Aktivitätseintrag als Wörter angezeigt. Der Fehlerzustand kombiniert den nativen Modifier slds-has-error mit aria-invalid und einer Meldung, die dem Textbereich zugeordnet ist. Die lokale Bestätigung steht in einem Statusbereich; ein grüner Akzent allein würde nicht vermitteln, was gespeichert wurde.
Salesforce Lightning Typografische Abstufungen und Datensatzdichte im Designsystem
Hierarchie ohne übergroße Überschriften schaffen
Die veröffentlichte nummerierte Schriftgrößenskala beginnt bei 0.625rem und reicht bis 2.625rem. Ein Arbeitsbereich für Fälle benötigt nicht in jedem Bereich die größte Anzeigegröße. Der native Titel im Seitenkopf kennzeichnet den Datensatz, Kartenüberschriften unterscheiden die Bereiche, und der normale Fließtext enthält die Kundenanfrage und den Vermerk.
Lange Betreffzeilen von Datensätzen vollständig anzeigen
Das benutzerdefinierte Layout lässt den Seitentitel umbrechen, statt den Betreff bei schmaler Darstellung abzuschneiden. Metadaten können auf zusätzliche Zeilen verteilt werden. Verringern Sie nicht die Schriftgröße aller Texte, nur weil ein Kontoname lang ist. Testen Sie realistische Längen für Betreff und Verantwortliche, bevor Sie entscheiden, an welcher Stelle eine Kürzung mit einer sicheren Alternative zur Anzeige des vollständigen Textes vertretbar ist.
Salesforce Lightning Abstände und Blueprint-Struktur des Designsystems
Klassische und variable Abstandsexporte nicht vermischen
Dieser Leitfaden führt SPACING_* aus ui-force auf. Der separate Export var-spacing enthält andere, kompakte Werte; VAR_SPACING_MEDIUM entspricht nicht SPACING_MEDIUM. Werden Werte nur aufgrund ähnlicher Namen vermischt, kann das Formular ungleichmäßig wirken. Wählen Sie das gewünschte Dichtesystem und verwenden Sie konsequent dessen Quelle.
Feld-Wrapper durchgängig verwenden
Salesforce Lightning Entwurfs- und Speicherverhalten von Datensätzen im Designsystem
Gespeicherten Datensatz getrennt von den Steuerelementen verwalten
Das Skript speichert die zuletzt gespeicherte Priorität und den Status in einem Datensatzobjekt. Änderungen an den Auswahlfeldern betreffen nur den Entwurf. Beim Speichern werden die Werte in das Objekt übernommen, die Zusammenfassung aktualisiert und ein Aktivitätseintrag hinzugefügt. So ist „Entwurf verwerfen“ auch nach mehreren erfolgreich gespeicherten Änderungen sinnvoll.
Keine Backend-Erfolge vortäuschen
Das Beispiel enthält weder eine Suche nach Datensatz-ID noch ein Berechtigungsmodell, API oder eine Datenbank. Die Schaltfläche und die Bestätigung weisen ausdrücklich darauf hin, dass der Vorgang lokal erfolgt. Eine Integration in Salesforce für den Produktionseinsatz benötigt die passenden Daten-APIs und Serverantworten, bevor ein endgültiger Datensatzstatus aktualisiert werden kann. CSS-Klassen können diese Garantien nicht bieten.
Salesforce Lightning Feldvalidierung und Aktivitäten im Designsystem
Mit dem Vermerk die Änderung erläutern
Die implementierte Regel verlangt mindestens zehn Zeichen nach dem Entfernen umgebender Leerzeichen und begrenzt den Textbereich auf 300 Zeichen. Ein leerer oder zu kurzer Vermerk verhindert sämtliche Änderungen am Datensatz, zeigt den Feldfehler an und setzt den Fokus auf den Vermerk. Bei einer Bearbeitung wird der veraltete Fehler gelöscht; beim nächsten Speicherversuch wird der aktuelle Wert erneut geprüft.
Senden Sie das Formular ohne Vermerk ab und prüfen Sie, ob sich die gespeicherten Werte in der Zusammenfassung nicht ändern.
Geben Sie einen aussagekräftigen Vermerk ein, speichern Sie ihn und prüfen Sie den neuesten Aktivitätseintrag.
Ändern Sie die Felder erneut, verwerfen Sie den Entwurf und prüfen Sie, ob die zuletzt gespeicherten Werte wiederhergestellt werden.
Einen gut lesbaren Änderungseintrag hinzufügen
Bei einer erfolgreichen lokalen Aktualisierung wird ein Aktivitätstitel aus dem gespeicherten Status und der Priorität erstellt. Darunter folgt der genaue Vermerk als Textinhalt. Der neue Eintrag wird vorangestellt, sodass die jüngste Änderung zuerst erscheint. Der Vermerk wird niemals als HTML interpretiert, und der statische ursprüngliche Aktivitätseintrag bleibt unter den lokalen Einträgen der Nutzer erhalten.
Salesforce Lightning Barrierefreie Formulare und Fehlerbehebung im Designsystem
Echte Beschriftungen und explizite Beschreibungen verwenden
Auswahlfelder und Textbereich haben sichtbare Beschriftungen, die über for und id zugeordnet sind. Der Vermerk verweist auf den Hilfs- und Fehlertext, und das Pflichtfeldzeichen hat einen lesbaren Titel. Die Aktionen „Speichern“ und „Entwurf verwerfen“ sind Schaltflächen mit den passenden Typen submit und button. So wird ein versehentliches Absenden beim Verwerfen eines Entwurfs verhindert.
Nach dem Verwerfen an eine vorhersehbare Stelle zurückkehren
Beim Verwerfen werden die gespeicherte Priorität und der gespeicherte Status wiederhergestellt, der Vermerk und der Feldfehler gelöscht und der Fokus auf das Prioritätsfeld gesetzt. Der Aktivitätsverlauf wird weder gelöscht noch der Datensatz auf seinen ursprünglichen Zustand zurückgesetzt. Das ist wichtig, wenn ein Nutzer einmal speichert, eine weitere Änderung ausprobiert und anschließend diesen zweiten Entwurf abbricht.
Salesforce Lightning Integration und Versionsumfang des Designsystems CSS
Das veröffentlichte Styling-Paket installieren
Der vollständige Quellcode importiert die Version der Distribution CSS, auf die er festgelegt ist, sowie ein kleines Anwendungs-Stylesheet. Vite löst die Schrift- und Bild-URLs des Pakets auf. HTML und JavaScript stellen anschließend das Verhalten für Datensätze bereit. Dies ist eine CSS-Implementierung des Blueprints, kein Wrapper um lightning-record-edit-form.
Das native Paket CSS stellt die Darstellung von Feldern, Schaltflächen und Karten bereit.
Der ursprüngliche HTML stellt die Datensatzstruktur und Beschriftungen bereit.
Der ursprüngliche JavaScript verwaltet den Entwurfszustand, die Validierung und lokale Aktivitäten.
Den archivierten Quellcode als versionsgebundene Referenz behandeln
Salesforce Lightning Komponentenbeispiele des Designsystems
index.html — vollständiger Case-Arbeitsbereich
Die Zusammenfassung des Datensatzes, das Formular und die ersten Aktivitäten in semantischem HTML.
html
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Local case workspace</title>
<body>
<main class="slds-example">
<header class="slds-page-header">
<p class="slds-text-title_caps">Service workspace · fictional record</p>
<div class="record-title">
<div>
<h1 class="slds-page-header__title">
Case 004218 · Delivery address update
</h1>
<p class="slds-text-body_small">
Northstar Studio · Opened today · Owner: Maya Chen
</p>
</div>
<span id="status-badge" class="slds-badge">New</span>
</div>
</header>
<div class="record-grid">
<section class="slds-card">
<div class="slds-card__header">
<h2 class="slds-card__header-title">Case details</h2>
</div>
<div class="slds-card__body slds-card__body_inner">
<div class="summary">
<div>
<span class="slds-text-title">Contact</span>
<p>Alex Morgan</p>
</div>
<div>
<span class="slds-text-title">Channel</span>
<p>Email</p>
</div>
<div>
<span class="slds-text-title">Priority</span>
<p id="read-priority">Medium</p>
</div>
<div>
<span class="slds-text-title">Status</span>
<p id="read-status">New</p>
</div>
</div>
<div class="slds-box slds-theme_shade slds-m-top_medium">
<h3 class="slds-text-heading_small">Customer request</h3>
<p class="slds-m-top_small">
Please update the delivery location for order NS-1842 before it
leaves the warehouse. The contact is available to confirm the new
address.
</p>
</div>
<form id="case-form" class="slds-m-top_large" novalidate>
<h3 class="slds-text-heading_small slds-m-bottom_medium">
Update the local case
</h3>
<div class="field-grid">
<div class="slds-form-element">
<label class="slds-form-element__label" for="priority"
>Priority</label
>
<div class="slds-form-element__control">
<div class="slds-select_container">
<select class="slds-select" id="priority">
<option>Low</option>
<option selected>Medium</option>
<option>High</option>
</select>
</div>
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="case-status"
>Status</label
>
<div class="slds-form-element__control">
<div class="slds-select_container">
<select class="slds-select" id="case-status">
<option>New</option>
<option>Working</option>
<option>Escalated</option>
<option>Closed</option>
</select>
</div>
</div>
</div>
</div>
<div id="note-field" class="slds-form-element slds-m-top_medium">
<label class="slds-form-element__label" for="case-note"
><abbr class="slds-required" title="required">*</abbr> Update
note</label
>
<div class="slds-form-element__control">
<textarea
class="slds-textarea"
id="case-note"
rows="3"
maxlength="300"
aria-describedby="note-help note-error"
></textarea>
</div>
<p id="note-help" class="slds-form-element__help">
Explain the change in 10–300 characters. Nothing is sent to
Salesforce.
</p>
<p id="note-error" class="slds-form-element__help" hidden>
Enter an update note of at least 10 characters.
</p>
</div>
<div class="form-actions">
<button
type="button"
id="cancel"
class="slds-button slds-button_neutral"
>
Discard draft</button
><button type="submit" class="slds-button slds-button_brand">
Save local update
</button>
</div>
<p id="save-result" class="slds-m-top_small" role="status"></p>
</form>
</div>
</section>
<aside class="slds-card">
<div class="slds-card__header">
<h2 class="slds-card__header-title">Case activity</h2>
</div>
<div class="slds-card__body slds-card__body_inner">
<p class="slds-text-body_small slds-m-bottom_medium">
Newest updates first
</p>
<ol id="activity" class="activity">
<li>
<span class="activity-dot"></span>
<div>
<h3 class="slds-text-heading_small">Case opened</h3>
<p>Customer requested a delivery address change.</p>
<small>Initial example activity</small>
</div>
</li>
</ol>
</div>
</aside>
</div>
<footer>
Native SLDS 2.264.1 CSS with original HTML and JavaScript. Local
demonstration; no Salesforce record or message is created.
</footer>
</main>
<script type="module" src="/src/main.js"></script>
</body></html>
Als src/slds.css speichern; die Paketstile bleiben getrennt.
04
Einrichtung des Salesforce Lightning-Designsystem-Agenten
Ausgangspunkt für die Implementierung
Fixiertes natives CSS-Beispiel, keine Bereitstellung in einer Salesforce-Organisation. Hinweise zu Paketen und Assets bei der Weitergabe gebündelter Assets beibehalten.
sh
npm create vite@latest slds-case -- --template vanilla
cd slds-case
npm install
npm install @salesforce-ux/[email protected]
# Replace index.html; add src/main.js and src/slds.css from the complete examples.
npm run dev
Ein Prompt für dein Projekt
Agenten-Prompt
Erstellen Sie einen fokussierten Case-Arbeitsbereich mit den fixierten SLDS-CSS-Vorlagen. Halten Sie Datensatzidentität, Kundenkontext, gespeicherten Status und Bearbeitungsentwurf voneinander getrennt. Verwenden Sie hier die exakte Feldstruktur, echte Token-Referenzen und den vollständigen Quellcode. Validieren Sie die Notiz, bevor Sie die Zusammenfassung ändern, behalten Sie lokale Aktivitäten nach dem Verwerfen bei und erwecken Sie nicht den Eindruck, dass eine Verbindung zu einem Salesforce-Backend besteht.
05
Quellen und Geltungsbereich des Salesforce Lightning-Designsystems
OpenDesign-Leitfaden zum festgelegten SLDS-Paket CSS. Die Vorschau verwendet natives CSS mit originalem HTML und JavaScript, fiktiven Falldaten und lokalem Zustand. Sie lädt keine Lightning Web Components und stellt keine Verbindung zu Salesforce her. Das Upstream-Repository ist archiviert; berücksichtigen Sie für Produktionsarbeiten die aktuellen Richtlinien zur Salesforce-Plattform.
