Una guida Lightning per attività con record ad alta densità: spaziature, tipografia e colori semantici reali, un’area di lavoro modificabile per i casi, convalida dei campi e cronologia delle attività che riflette le modifiche locali.
Guida OpenDesign8 capitoli40 voci di riferimentoGuida applicativa originale
01
Anteprima dell’interfaccia del sistema di design Salesforce Lightning
Modifica la priorità o lo stato, convalida una nota di aggiornamento, salva una voce nell’attività locale e annulla una bozza successiva senza modificare il record salvato.
SLDS 2.264.1 CSS nativo e risorse del pacchetto; HTML e JavaScript originali e accessibili. Nessun runtime Salesforce API o Lightning. · Riferimento per l’implementazione
02
Riferimento di progettazione del sistema di design Salesforce Lightning
Pacchetto pubblicato @salesforce-ux/design-system 2.264.1 nativo CSS ed esportazione dei token ui-force. È un riferimento blueprint classico con versione bloccata, non una dichiarazione di compatibilità con il linguaggio di progettazione SLDS 2 più recente o con un runtime Lightning Web Components. Il repository upstream storico è archiviato.
Riferimento al pacchetto pubblicato. Mantieni il ruolo specifico del testo, della superficie o dell’azione, invece di applicare ovunque un unico colore del brand.
COLOR_BACKGROUND_ALT
rgb(255, 255, 255)
Riferimento al pacchetto pubblicato. Mantieni il ruolo specifico del testo, della superficie o dell’azione, invece di applicare ovunque un unico colore del brand.
COLOR_TEXT_DEFAULT
rgb(3, 45, 96)
Riferimento al pacchetto pubblicato. Mantieni il ruolo specifico del testo, della superficie o dell’azione, invece di applicare ovunque un unico colore del brand.
COLOR_TEXT_WEAK
rgb(116, 116, 116)
Riferimento al pacchetto pubblicato. Mantieni il ruolo specifico del testo, della superficie o dell’azione, invece di applicare ovunque un unico colore del brand.
COLOR_BORDER
rgb(201, 201, 201)
Riferimento al pacchetto pubblicato. Mantieni il ruolo specifico del testo, della superficie o dell’azione, invece di applicare ovunque un unico colore del brand.
COLOR_BORDER_ERROR
rgb(234, 0, 30)
Riferimento al pacchetto pubblicato. Mantieni il ruolo specifico del testo, della superficie o dell’azione, invece di applicare ovunque un unico colore del brand.
COLOR_BORDER_SELECTION
rgb(1, 118, 211)
Riferimento al pacchetto pubblicato. Mantieni il ruolo specifico del testo, della superficie o dell’azione, invece di applicare ovunque un unico colore del brand.
COLOR_BACKGROUND_BUTTON_BRAND
rgb(1, 118, 211)
Riferimento al pacchetto pubblicato. Mantieni il ruolo specifico del testo, della superficie o dell’azione, invece di applicare ovunque un unico colore del brand.
COLOR_BACKGROUND_BUTTON_BRAND_HOVER
rgb(1, 68, 134)
Riferimento al pacchetto pubblicato. Mantieni il ruolo specifico del testo, della superficie o dell’azione, invece di applicare ovunque un unico colore del brand.
COLOR_BACKGROUND_BUTTON_BRAND_ACTIVE
rgb(3, 45, 96)
Riferimento al pacchetto pubblicato. Mantieni il ruolo specifico del testo, della superficie o dell’azione, invece di applicare ovunque un unico colore del brand.
Layout e contesto dei record del sistema di design Salesforce Lightning
Mantieni l’identità del record sopra le attività locali
L’intestazione della pagina contiene il numero del caso, l’oggetto, l’account e il proprietario. Questi valori identificano l’oggetto prima che l’utente modifichi un campo. Il badge di stato riepiloga il record salvato localmente, quindi cambia al salvataggio e non segue il valore non ancora confermato del menu a discesa.
Separa i dettagli dall’attività
La regione più ampia combina il contesto del cliente e il modulo di modifica. La regione secondaria contiene una cronologia ordinata. Questa separazione consente all’utente di confrontare il lavoro richiesto con le modifiche già registrate senza passare a un’altra schermata. Sui dispositivi mobili, le regioni vengono disposte in colonna mantenendo lo stesso ordine semantico.
Colori e stati semantici del sistema di design Salesforce Lightning
Interpreta i nomi dei token in base al loro ruolo
L’esportazione ui-force distingue il testo predefinito, il testo secondario, i bordi di selezione e gli sfondi dei pulsanti del brand. L’esempio mantiene scuro il testo principale, discreti i metadati e blu l’azione primaria. Il rosso è riservato al campo non valido e al relativo messaggio di correzione, non a tutti i valori non salvati.
Rendi lo stato riconoscibile anche senza affidarti solo al colore
La priorità e lo stato vengono mostrati come testo nel riepilogo e nella nuova voce di attività. Lo stato di errore combina il modificatore nativo slds-has-error con aria-invalid e un messaggio associato all’area di testo. La conferma locale è presentata in un’area di stato: un semplice accento verde non direbbe all’utente cosa è stato salvato.
Scala tipografica e densità dei record del sistema di design Salesforce Lightning
Crea gerarchie senza usare titoli eccessivamente grandi
La scala numerica pubblicata parte da 0.625rem e arriva a 2.625rem. Un’area di lavoro per i casi non richiede la dimensione massima per ogni sezione. Il titolo nativo dell’intestazione identifica il record, i titoli delle schede distinguono le aree e il testo del corpo presenta la richiesta del cliente e la nota.
Mantieni per intero gli oggetti lunghi dei record
Il layout personalizzato consente al titolo della pagina di andare a capo, invece di troncare l’oggetto a larghezze ridotte. I metadati possono distribuirsi su più righe. Non ridurre tutto il testo per adattarlo a un nome account lungo: verifica la lunghezza realistica di oggetti e nomi dei proprietari prima di decidere dove troncare, assicurandoti che sia disponibile un’alternativa che mostri il testo completo.
Spaziatura e struttura del blueprint del sistema di design Salesforce Lightning
Non unire le esportazioni classiche e quelle delle variabili di spaziatura
Questa guida elenca SPACING_* da ui-force. L’esportazione var-spacing separata contiene valori compatti diversi; VAR_SPACING_MEDIUM non corrisponde allo stesso riferimento di SPACING_MEDIUM. Mescolare i valori basandosi solo sulla somiglianza dei nomi può rendere disomogeneo un modulo. Scegli il sistema di densità desiderato e mantienine la fonte.
Usa in modo coerente il contenitore del campo
Comportamento delle bozze e dei record salvati nel sistema di design Salesforce Lightning
Mantieni il record salvato separato dai controlli
Lo script conserva in un oggetto record l’ultima priorità e l’ultimo stato salvati. La modifica dei menu a discesa aggiorna solo la bozza. Il salvataggio copia i valori nell’oggetto, aggiorna il riepilogo e aggiunge una voce all’attività. In questo modo, dopo diverse modifiche salvate, Annulla bozza mantiene un significato preciso.
Non simulare il successo di un backend
L’esempio non include la ricerca di un ID del record, un modello di autorizzazioni, API né un database. I pulsanti e i messaggi di conferma specificano esplicitamente che le operazioni sono locali. Un’integrazione Salesforce di produzione richiederebbe le API dati appropriate e le risposte del server prima di aggiornare lo stato definitivo di un record. Le classi CSS non possono garantire questi risultati.
Convalida dei campi e attività nel sistema di design Salesforce Lightning
La nota deve spiegare la modifica
La regola implementata richiede dieci caratteri dopo aver rimosso gli spazi iniziali e finali e impone un limite di 300 caratteri all’area di testo. Una nota vuota o troppo breve impedisce tutte le modifiche al record, mostra l’errore del campo e sposta il focus sulla nota. Quando l’utente modifica il testo, l’errore precedente viene cancellato; al salvataggio successivo, il valore corrente viene convalidato di nuovo.
Invia senza inserire una nota e verifica che i valori salvati nel riepilogo non cambino.
Inserisci una nota utile, salva e controlla la voce di attività più recente.
Modifica di nuovo i campi, annulla la bozza e verifica che vengano ripristinati gli ultimi valori salvati.
Aggiungi una voce di modifica leggibile
Un aggiornamento locale riuscito crea una voce di attività con un titolo composto dallo stato e dalla priorità salvati, seguito dal testo esatto della nota. La voce viene inserita in cima, così la modifica più recente appare per prima. La nota non viene mai interpretata come HTML e l’attività statica iniziale rimane sotto alle voci locali dell’utente.
Moduli accessibili e recupero del sistema di design Salesforce Lightning
Usa etichette reali e descrizioni esplicite
I menu a discesa e l’area di testo hanno etichette visibili collegate tramite for e id. La nota fa riferimento al testo di assistenza e a quello dell’errore, mentre l’indicatore di campo obbligatorio ha un titolo leggibile. Le azioni principale e di annullamento sono pulsanti con i tipi submit e button appropriati, per evitare invii accidentali quando l’utente annulla una bozza.
Dopo l’annullamento, riporta l’utente in una posizione prevedibile
Annulla ripristina la priorità e lo stato salvati, cancella la nota e l’errore del campo e porta il focus sul controllo della priorità. Non elimina la cronologia delle attività né riporta il record allo stato iniziale. Questa distinzione è importante quando l’utente salva una modifica, ne prova un’altra e poi annulla la seconda bozza.
Integrazione CSS e ambito delle versioni del sistema di design Salesforce Lightning
Installa il pacchetto di stili pubblicato
Il sorgente completo importa la distribuzione CSS con versione bloccata e un piccolo foglio di stile dell’applicazione. Vite risolve gli URL di font e immagini del pacchetto. L’HTML e l’JavaScript forniscono poi il comportamento del record: è un’implementazione blueprint CSS, non un wrapper per lightning-record-edit-form.
Il pacchetto nativo CSS fornisce l’aspetto di campi, pulsanti e schede.
L’HTML originale fornisce la struttura e le etichette del record.
L’JavaScript originale gestisce lo stato della bozza, la convalida e l’attività locale.
Considera il sorgente archiviato come riferimento versionato
Esempi di componenti del sistema di design Salesforce Lightning
index.html — area di lavoro completa per i casi
Riepilogo del record, modulo e attività iniziale in HTML semantico.
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>
Salva come src/slds.css; gli stili del pacchetto rimangono separati.
04
Configurazione dell’agente per il sistema di design Salesforce Lightning
Punto di partenza per l’implementazione
Esempio nativo CSS con versione bloccata, non una distribuzione su un’organizzazione Salesforce. Quando ridistribuisci le risorse incluse nel pacchetto, mantieni le note sul pacchetto e sulle risorse.
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 per il tuo progetto
Prompt per l’agente
Crea un’area di lavoro dedicata ai casi usando i blueprint SLDS CSS bloccati. Mantieni distinti l’identità del record, il contesto del cliente, lo stato salvato e la bozza in modifica. Usa qui la struttura esatta dei campi, i riferimenti reali ai token e il sorgente completo. Convalida la nota prima di modificare il riepilogo, conserva l’attività locale dopo l’annullamento e non suggerire che esista una connessione al backend Salesforce.
05
Fonti e ambito del sistema di progettazione sistema di design Salesforce Lightning
Guida OpenDesign al pacchetto SLDS CSS bloccato. L’anteprima usa CSS nativo con HTML e JavaScript originali, dati di casi fittizi e stato locale. Non carica Lightning Web Components né si connette a Salesforce. Il repository upstream è archiviato; per il lavoro in produzione, valuta le indicazioni aggiornate della piattaforma Salesforce.
