Un guide Lightning pour les tâches exigeant une forte densité d’informations : valeurs réelles d’espacement, de typographie et de couleurs sémantiques, espace de travail modifiable pour les dossiers, validation des champs et historique des activités reflétant les changements locaux.
Guide OpenDesign8 chapitres40 entrées de référenceGuide de l’application d’origine
01
Salesforce Lightning Aperçu de l’interface du système de design
Modifiez la priorité ou le statut, validez une note de mise à jour, enregistrez une entrée d’activité locale, puis abandonnez un brouillon ultérieur sans modifier l’enregistrement enregistré.
SLDS 2.264.1 natif CSS et ressources du package ; HTML et JavaScript originaux et accessibles. Aucun API Salesforce ni moteur Lightning. · Référence de mise en œuvre
02
Salesforce Lightning Référence de conception du système de design
Package natif publié @salesforce-ux/design-system 2.264.1 CSS et export de jetons ui-force. Il s’agit d’une référence figée au modèle classique, et non d’une affirmation de compatibilité avec le langage de conception SLDS 2 plus récent ou avec un moteur Lightning Web Components. Le dépôt historique en amont est archivé.
Salesforce Lightning Mise en page et contexte d’un dossier dans le système de design
Placez l’identité du dossier au-dessus des tâches locales
L’en-tête de la page contient un numéro de dossier, un objet, un compte et un responsable. Ces informations identifient l’objet avant que l’utilisateur ne modifie un champ. Le badge d’état résume le dossier local enregistré : il est donc mis à jour lors de l’enregistrement, et non à chaque changement non validé d’une valeur de sélection.
Séparez les détails de l’historique
La zone principale, plus large, regroupe le contexte client et le formulaire de modification. La zone secondaire contient un historique ordonné. Cette séparation permet à l’utilisateur de comparer le travail demandé aux changements déjà consignés sans passer à un autre écran. Sur mobile, ces zones sont empilées dans le même ordre sémantique.
Salesforce Lightning Couleurs sémantiques et états du système de design
Interprétez les noms des jetons selon leur rôle
L’export ui-force distingue le texte par défaut, le texte atténué, les bordures de sélection et les arrière-plans des boutons de marque. L’exemple conserve un texte courant foncé, des métadonnées discrètes et une action principale bleue. Le rouge est réservé au champ invalide et au message indiquant comment corriger l’erreur, et non à toute valeur non enregistrée.
Signalez l’état autrement que par la couleur
La priorité et l’état sont affichés sous forme de mots dans le résumé et dans la nouvelle entrée d’activité. L’état d’erreur associe le modificateur natif slds-has-error à aria-invalid et à un message lié à la zone de texte. La confirmation locale est affichée dans une région de statut ; un accent vert, à lui seul, n’indiquerait pas à l’utilisateur ce qui a été enregistré.
Salesforce Lightning Échelle typographique et densité des dossiers du système de design
Créez une hiérarchie sans titres surdimensionnés
L’échelle typographique numérotée publiée va de 0.625rem à 2.625rem. Un espace de travail consacré aux dossiers n’a pas besoin d’utiliser la plus grande taille d’affichage dans chaque zone. Le titre natif de l’en-tête de page identifie le dossier, les titres des cartes distinguent les sections et le texte courant présente la demande du client et la note.
Conservez les objets longs des dossiers en entier
La mise en page personnalisée permet au titre de la page de passer à la ligne plutôt que de tronquer l’objet sur un écran étroit. Les métadonnées peuvent également s’étaler sur plusieurs lignes. Ne réduisez pas la taille de tout le texte pour compenser un nom de compte long ; testez des longueurs réalistes pour l’objet et le responsable avant de décider où une troncature peut s’accompagner d’une solution de remplacement affichant le texte complet.
Salesforce Lightning Espacement et structure du blueprint du système de design
Ne mélangez pas les exports d’espacement classiques et ceux basés sur des variables
Ce guide répertorie les valeurs SPACING_* de ui-force. L’export var-spacing distinct contient d’autres valeurs compactes ; VAR_SPACING_MEDIUM ne correspond pas à SPACING_MEDIUM. Mélanger des valeurs sur la seule base de noms similaires peut déséquilibrer un formulaire. Choisissez le système de densité voulu et conservez-en la source.
Utilisez systématiquement le conteneur de champ
Salesforce Lightning Comportement des brouillons et des dossiers enregistrés dans le système de design
Conservez séparément le dossier enregistré et les contrôles
Le script conserve la dernière priorité et le dernier état enregistrés dans un objet record. La modification des champs de sélection ne change que le brouillon. L’enregistrement copie les valeurs dans cet objet, met à jour le résumé et ajoute une entrée à l’historique. L’action « Abandonner le brouillon » reste ainsi pertinente même après plusieurs modifications enregistrées avec succès.
Ne prétendez pas qu’une opération côté serveur a réussi
L’exemple ne comporte ni recherche par identifiant de dossier, ni modèle d’autorisations, ni API ni base de données. Le bouton et le message de confirmation précisent explicitement qu’il s’agit d’une opération locale. Une intégration Salesforce en production nécessiterait les API de données appropriées et des réponses du serveur avant de mettre à jour définitivement l’état d’un dossier. Les classes CSS ne peuvent pas offrir ces garanties.
Salesforce Lightning Validation des champs et historique du système de design
Expliquez le changement dans la note
La règle définie exige au moins dix caractères après suppression des espaces de début et de fin, et limite la zone de texte à 300 caractères. Une note vide ou trop courte empêche toute modification du dossier, affiche une erreur sur le champ et place le focus sur la note. Toute modification efface l’erreur devenue obsolète ; le prochain enregistrement valide à nouveau la valeur actuelle.
Soumettez sans note et vérifiez que les valeurs enregistrées dans le résumé restent inchangées.
Saisissez une note utile, enregistrez-la et examinez la nouvelle entrée d’activité.
Modifiez à nouveau les champs, abandonnez le brouillon et vérifiez que les dernières valeurs enregistrées sont rétablies.
Ajoutez une entrée de changement facile à lire
Une mise à jour locale réussie crée un titre d’activité à partir de l’état et de la priorité enregistrés, suivi du texte exact de la note. La nouvelle entrée est insérée en tête de liste afin que le changement le plus récent apparaisse en premier. La note n’est jamais interprétée comme HTML, et l’entrée d’activité initiale statique reste sous les entrées locales de l’utilisateur.
Salesforce Lightning Formulaires accessibles et récupération dans le système de design
Utilisez de vrais libellés et des descriptions explicites
Les champs de sélection et la zone de texte ont des libellés visibles associés au moyen de for et id. La note fait référence au texte d’aide et au message d’erreur, et l’indicateur de champ obligatoire possède un titre lisible. Les actions principales et d’abandon sont des boutons avec les types submit et button appropriés, ce qui évite de soumettre accidentellement le formulaire lorsque l’utilisateur abandonne un brouillon.
Après l’abandon, revenez à un emplacement prévisible
L’abandon rétablit la priorité et l’état enregistrés, efface la note et l’erreur du champ, puis place le focus sur le contrôle de priorité. Il ne supprime pas l’historique d’activité et ne réinitialise pas le dossier à son état initial. Cette distinction compte lorsqu’un utilisateur enregistre une première modification, essaie ensuite un autre changement, puis annule ce second brouillon.
Salesforce Lightning Intégration CSS et portée des versions du système de design
Installez le package de styles publié
Le code source complet importe la distribution CSS épinglée et une petite feuille de style pour l’application. Vite résout les URL des polices et des images du package. HTML et JavaScript fournissent ensuite le comportement de la fiche ; il s’agit d’une implémentation fondée sur les plans CSS, et non d’une surcouche autour de lightning-record-edit-form.
Le package natif CSS fournit l’apparence des champs, des boutons et des cartes.
Le HTML d’origine fournit la structure et les libellés de la fiche.
Le JavaScript d’origine gère l’état du brouillon, la validation et l’activité locale.
Considérez le code source archivé comme une référence versionnée
Exemples de composants du système de design Salesforce Lightning
index.html — espace de travail complet pour un dossier
Résumé de la fiche, formulaire et activité initiale en HTML sémantique.
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>
À enregistrer sous src/slds.css ; les styles du package restent séparés.
04
Configuration d’agent pour le système de design Salesforce Lightning
Point de départ de l’implémentation
Exemple natif CSS épinglé, sans déploiement sur une organisation Salesforce. Conservez les mentions relatives au package et aux ressources lors de la redistribution des ressources intégrées.
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
Un prompt pour votre projet
Prompt pour l’agent IA
Créez un espace de travail ciblé pour un dossier à l’aide des plans SLDS CSS épinglés. Distinguez l’identité de la fiche, le contexte client, l’état enregistré et le brouillon en cours de modification. Reprenez ici l’anatomie exacte des champs, les références réelles aux jetons et le code source complet. Validez la note avant de modifier le résumé, conservez l’activité locale après l’abandon du brouillon et ne laissez pas entendre qu’une connexion à un serveur Salesforce existe.
05
Sources et périmètre du système de design Salesforce Lightning
Guide OpenDesign du package SLDS CSS épinglé. L’aperçu utilise les composants natifs CSS avec HTML et JavaScript d’origine, des données fictives de dossier et un état local. Il ne charge pas Lightning Web Components et ne se connecte pas à Salesforce. Le dépôt en amont est archivé ; pour tout travail en production, évaluez les consignes actuelles de la plateforme Salesforce.
