83.3K+Скачать
Корпоративное ПО · Новый ресурс

Salesforce Lightning — дизайн-система.

Руководство по Lightning для работы с большим количеством записей: реальные отступы, типографика и семантические цвета, редактируемая рабочая область дела, проверка полей и история действий, отражающая локальные изменения.

Скачать OpenDesign Скачать DESIGN.md
Руководство OpenDesign8 глав40 справочных записейАвторское руководство по приложению
01

Предварительный просмотр интерфейса дизайн-системы Salesforce Lightning

Измените приоритет или статус, проверьте примечание к изменению, сохраните запись в локальной истории действий, а затем отмените последующий черновик, не изменяя сохранённую запись.

Измените обращение и просмотрите локальную историю действийОткрыть полный пример
Нативные ресурсы SLDS 2.264.1 CSS и пакета; исходные доступные HTML и JavaScript. Без Salesforce API и среды выполнения Lightning. · Справочник по реализации
02

Справочник по дизайн-системе Salesforce Lightning

Опубликованный нативный пакет @salesforce-ux/design-system 2.264.1 CSS и экспорт токенов ui-force. Это справочник по закреплённой классической спецификации, а не заявление о совместимости с более новым языком дизайна SLDS 2 или средой выполнения Lightning Web Components. Исторический исходный репозиторий находится в архиве.

Поверхности записей и семантический текст

Источник
Название / правилоЗначение / конфигурацияПрименение
COLOR_BACKGROUNDrgb(243, 243, 243)Справочник по опубликованному пакету. Сохраняйте назначенную роль текста, поверхности или действия, а не применяйте один фирменный цвет повсюду.
COLOR_BACKGROUND_ALTrgb(255, 255, 255)Справочник по опубликованному пакету. Сохраняйте назначенную роль текста, поверхности или действия, а не применяйте один фирменный цвет повсюду.
COLOR_TEXT_DEFAULTrgb(3, 45, 96)Справочник по опубликованному пакету. Сохраняйте назначенную роль текста, поверхности или действия, а не применяйте один фирменный цвет повсюду.
COLOR_TEXT_WEAKrgb(116, 116, 116)Справочник по опубликованному пакету. Сохраняйте назначенную роль текста, поверхности или действия, а не применяйте один фирменный цвет повсюду.
COLOR_BORDERrgb(201, 201, 201)Справочник по опубликованному пакету. Сохраняйте назначенную роль текста, поверхности или действия, а не применяйте один фирменный цвет повсюду.
COLOR_BORDER_ERRORrgb(234, 0, 30)Справочник по опубликованному пакету. Сохраняйте назначенную роль текста, поверхности или действия, а не применяйте один фирменный цвет повсюду.
COLOR_BORDER_SELECTIONrgb(1, 118, 211)Справочник по опубликованному пакету. Сохраняйте назначенную роль текста, поверхности или действия, а не применяйте один фирменный цвет повсюду.
COLOR_BACKGROUND_BUTTON_BRANDrgb(1, 118, 211)Справочник по опубликованному пакету. Сохраняйте назначенную роль текста, поверхности или действия, а не применяйте один фирменный цвет повсюду.
COLOR_BACKGROUND_BUTTON_BRAND_HOVERrgb(1, 68, 134)Справочник по опубликованному пакету. Сохраняйте назначенную роль текста, поверхности или действия, а не применяйте один фирменный цвет повсюду.
COLOR_BACKGROUND_BUTTON_BRAND_ACTIVErgb(3, 45, 96)Справочник по опубликованному пакету. Сохраняйте назначенную роль текста, поверхности или действия, а не применяйте один фирменный цвет повсюду.

Классическая шкала отступов

Источник
Название / правилоЗначение / конфигурацияПрименение
SPACING_X_SMALL0.5remКлассический экспорт SPACING_*. Это не отдельный компактный набор VAR_SPACING_*.
SPACING_XXX_SMALL0.125remКлассический экспорт SPACING_*. Это не отдельный компактный набор VAR_SPACING_*.
SPACING_XX_SMALL0.25remКлассический экспорт SPACING_*. Это не отдельный компактный набор VAR_SPACING_*.
SPACING_SMALL0.75remКлассический экспорт SPACING_*. Это не отдельный компактный набор VAR_SPACING_*.
SPACING_MEDIUM1remКлассический экспорт SPACING_*. Это не отдельный компактный набор VAR_SPACING_*.
SPACING_NONE0Классический экспорт SPACING_*. Это не отдельный компактный набор VAR_SPACING_*.
SPACING_X_LARGE2remКлассический экспорт SPACING_*. Это не отдельный компактный набор VAR_SPACING_*.
SPACING_XX_LARGE3remКлассический экспорт SPACING_*. Это не отдельный компактный набор VAR_SPACING_*.
SPACING_LARGE1.5remКлассический экспорт SPACING_*. Это не отдельный компактный набор VAR_SPACING_*.

Шкала типографики

Источник
Название / правилоЗначение / конфигурацияПрименение
FONT_SIZE_10.625remВыбирайте размер текста в соответствии с его ролью, сохраняя удобочитаемость примечаний к обращениям и подписей полей.
FONT_SIZE_20.75remВыбирайте размер текста в соответствии с его ролью, сохраняя удобочитаемость примечаний к обращениям и подписей полей.
FONT_SIZE_30.8125remВыбирайте размер текста в соответствии с его ролью, сохраняя удобочитаемость примечаний к обращениям и подписей полей.
FONT_SIZE_40.875remВыбирайте размер текста в соответствии с его ролью, сохраняя удобочитаемость примечаний к обращениям и подписей полей.
FONT_SIZE_51remВыбирайте размер текста в соответствии с его ролью, сохраняя удобочитаемость примечаний к обращениям и подписей полей.
FONT_SIZE_61.125remВыбирайте размер текста в соответствии с его ролью, сохраняя удобочитаемость примечаний к обращениям и подписей полей.
FONT_SIZE_71.25remВыбирайте размер текста в соответствии с его ролью, сохраняя удобочитаемость примечаний к обращениям и подписей полей.
FONT_SIZE_81.5remВыбирайте размер текста в соответствии с его ролью, сохраняя удобочитаемость примечаний к обращениям и подписей полей.
FONT_SIZE_91.75remВыбирайте размер текста в соответствии с его ролью, сохраняя удобочитаемость примечаний к обращениям и подписей полей.
FONT_SIZE_102remВыбирайте размер текста в соответствии с его ролью, сохраняя удобочитаемость примечаний к обращениям и подписей полей.
FONT_SIZE_112.625remВыбирайте размер текста в соответствии с его ролью, сохраняя удобочитаемость примечаний к обращениям и подписей полей.

Радиус углов

Источник
Название / правилоЗначение / конфигурацияПрименение
BORDER_RADIUS_SMALL0.125remСправочник по опубликованным радиусам. Круглый маркер статуса отличается от прямоугольного элемента формы.
BORDER_RADIUS_MEDIUM0.25remСправочник по опубликованным радиусам. Круглый маркер статуса отличается от прямоугольного элемента формы.
BORDER_RADIUS_LARGE0.5remСправочник по опубликованным радиусам. Круглый маркер статуса отличается от прямоугольного элемента формы.
BORDER_RADIUS_CIRCLE50%Справочник по опубликованным радиусам. Круглый маркер статуса отличается от прямоугольного элемента формы.

Анатомия нативной спецификации CSS

Источник
Название / правилоЗначение / конфигурацияПрименение
slds-page-headerRecord contextРазмещайте идентификатор и сводку обращения над формой редактирования.
slds-cardGrouped content regionДля сведений об обращении и истории действий предусмотрены отдельные семантические области.
slds-form-elementLabel + control + helpОборачивайте каждое редактируемое значение в отдельный логически связанный блок поля.
slds-has-errorInvalid field modifierУстанавливайте рядом с aria-invalid и конкретным сообщением об ошибке.
slds-button_brandPrimary actionСохраняйте локальное изменение; класс отвечает за оформление, а не за сохранение данных.
slds-button_neutralSecondary actionОтмените черновик и восстановите последние сохранённые локальные значения.
03

Полное руководство по дизайн-системе Salesforce Lightning

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

DESIGN-salesforce-lightning.md

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

Скачать руководство

Структура и контекст записи в дизайн-системе Salesforce Lightning

Размещайте идентификатор записи над локальными задачами

В заголовке страницы указываются номер обращения, тема, учётная запись и владелец. Эти значения идентифицируют объект до того, как пользователь изменит какое-либо поле. Значок статуса отражает сводку сохранённой локальной записи, поэтому он меняется при нажатии кнопки сохранения, а не вслед за несохранённым значением в раскрывающемся списке.

Из этого руководства OpenDesign

Отделяйте сведения от истории действий

В более широкой области объединены контекст клиента и форма редактирования. Во вторичной области представлена упорядоченная история. Благодаря такому разделению пользователь может сопоставить запрошенную работу с уже зарегистрированными изменениями, не переходя на другой экран. В мобильной версии эти области располагаются вертикально в том же семантическом порядке.

Семантические цвета и состояния в дизайн-системе Salesforce Lightning

Рассматривайте названия токенов как обозначения ролей

Экспорт ui-force различает основной текст, приглушённый текст, границы выделения и фоны кнопок фирменного цвета. В примере основной текст тёмный, метаданные оформлены сдержанно, а основная кнопка синяя. Красный цвет используется для недопустимого значения поля и поясняющего сообщения о том, как исправить ошибку, а не для всех несохранённых значений.

Передавайте состояние не только цветом

Приоритет и статус отображаются словами в сводке и новой записи истории действий. Состояние ошибки обозначено нативным модификатором slds-has-error, атрибутом aria-invalid и сообщением, связанным с текстовой областью. Подтверждение локального сохранения выводится в области статуса; одного зелёного акцента недостаточно, чтобы сообщить пользователю, что именно сохранено.

Типографическая шкала и плотность записей в дизайн-системе Salesforce Lightning

Выстраивайте иерархию без чрезмерно крупных заголовков

Опубликованная нумерованная типографическая шкала начинается с 0.625rem и доходит до 2.625rem. Рабочему пространству обращения не требуется самый крупный размер заголовка во всех областях. Заголовок страницы по нативной спецификации идентифицирует запись, заголовки карточек разделяют области, а обычный текст содержит запрос клиента и примечание.

Не обрезайте длинные темы записей

В пользовательской компоновке заголовок страницы переносится на следующую строку, а не обрезается при узкой ширине. Метаданные также могут переноситься на дополнительные строки. Не уменьшайте весь текст из-за длинного названия учётной записи; прежде чем решать, где допустимо обрезание, проверьте макет на реалистичной длине тем и имён владельцев и убедитесь, что для обрезанного текста доступен полный вариант.

Отступы и структура спецификации в дизайн-системе Salesforce Lightning

Не смешивайте классические и переменные экспорты отступов

В этом руководстве перечислены SPACING_* из ui-force. Отдельный экспорт var-spacing содержит другие, более компактные значения; VAR_SPACING_MEDIUM и SPACING_MEDIUM — не один и тот же параметр. Смешивание значений только из-за похожих названий может привести к неравномерному оформлению формы. Выберите нужную систему плотности и придерживайтесь её источника.

Единообразно используйте обёртку поля

Поведение черновика и сохранённой записи в дизайн-системе Salesforce Lightning

Храните сохранённую запись отдельно от элементов управления

Скрипт хранит последние сохранённые значения приоритета и статуса в объекте record. Изменение элементов выбора влияет только на черновик. При нажатии кнопки сохранения значения копируются в этот объект, обновляется сводка и добавляется запись в историю действий. Благодаря этому действие «Отменить черновик» остаётся осмысленным и после нескольких успешных изменений.

Не имитируйте успешное обращение к серверу

В примере нет поиска по ID записи, модели разрешений, API или базы данных. Текст на кнопке и подтверждение явно указывают, что изменения локальные. Для интеграции с Salesforce в рабочей среде потребуются соответствующие API данных и ответы сервера, прежде чем можно будет обновить окончательный статус записи. Классы CSS не обеспечивают таких гарантий.

Проверка полей и история действий в дизайн-системе Salesforce Lightning

В примечании должно быть объяснение изменения

Заданное правило требует не менее десяти символов после удаления пробелов по краям и ограничивает текстовую область 300 символами. Пустое или слишком короткое примечание блокирует любые изменения записи, отображает ошибку поля и переводит фокус на примечание. При редактировании прежняя ошибка сбрасывается, а при следующем нажатии кнопки сохранения текущее значение проверяется заново.

  1. Отправьте форму без примечания и убедитесь, что значения в сохранённой сводке не изменились.
  2. Введите полезное примечание, сохраните его и проверьте самую новую запись в истории действий.
  3. Снова измените поля, отмените черновик и убедитесь, что восстановлены последние сохранённые значения.

Добавляйте понятную запись об изменении

После успешного локального обновления создаётся запись истории действий: сначала заголовок на основе сохранённых статуса и приоритета, затем точное примечание в виде текстового содержимого. Новая запись добавляется в начало, поэтому самое последнее изменение отображается первым. Примечание не интерпретируется как HTML, а статическая начальная запись истории располагается после локальных записей пользователя.

Доступные формы и восстановление состояния в дизайн-системе Salesforce Lightning

Используйте настоящие подписи и явные описания

Для элементов select и textarea предусмотрены видимые подписи, связанные с ними через атрибуты for и id. Примечание связано с текстами подсказки и ошибки, а у маркера обязательного поля есть читаемое название. Основное действие и отмена оформлены кнопками с подходящими типами submit и button, что исключает случайную отправку формы при отмене черновика.

После отмены возвращайте пользователя в предсказуемое место

При отмене восстанавливаются сохранённые значения приоритета и статуса, очищаются примечание и ошибка поля, а фокус переводится на элемент управления приоритетом. История действий не удаляется, а запись не сбрасывается в исходное состояние. Это различие важно, если пользователь сначала сохраняет изменения, затем пробует внести другие и отменяет второй черновик.

Интеграция CSS и область применения версии дизайн-системы Salesforce Lightning

Установите опубликованный пакет стилей

Полный исходный код импортирует закреплённый дистрибутив CSS и небольшую таблицу стилей приложения. Vite обрабатывает URL шрифтов и изображений из пакета. Далее за поведение записи отвечают HTML и JavaScript; это реализация спецификации CSS, а не обёртка над lightning-record-edit-form.

  • Нативный пакет CSS задаёт оформление полей, кнопок и карточек.
  • Исходный HTML задаёт структуру записи и подписи.
  • Исходный JavaScript отвечает за состояние черновика, проверку и локальную историю действий.

Используйте архивный исходный код как справочник с указанной версией

Примеры компонентов дизайн-системы Salesforce Lightning

index.html — полное рабочее пространство обращения

Сводка записи, форма и начальная история действий в семантическом 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>

Справочник по коду

  • Сохраните файл в корне проекта Vite.

main.js — черновик, проверка и история действий

Полное поведение приложения и импорт нативного CSS.

js
import "@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css";
import "./slds.css";
let record = { priority: "Medium", status: "New" };
const form = document.querySelector("#case-form"),
  priority = document.querySelector("#priority"),
  status = document.querySelector("#case-status"),
  note = document.querySelector("#case-note"),
  field = document.querySelector("#note-field"),
  error = document.querySelector("#note-error"),
  result = document.querySelector("#save-result");
function clearError() {
  field.classList.remove("slds-has-error");
  error.hidden = true;
  note.removeAttribute("aria-invalid");
  result.textContent = "";
}
form.addEventListener("input", clearError);
form.addEventListener("submit", (e) => {
  e.preventDefault();
  const text = note.value.trim();
  if (text.length < 10) {
    field.classList.add("slds-has-error");
    error.hidden = false;
    note.setAttribute("aria-invalid", "true");
    note.focus();
    return;
  }
  record = { priority: priority.value, status: status.value };
  document.querySelector("#read-priority").textContent = record.priority;
  document.querySelector("#read-status").textContent = record.status;
  document.querySelector("#status-badge").textContent = record.status;
  const li = document.createElement("li"),
    dot = document.createElement("span"),
    body = document.createElement("div"),
    h = document.createElement("h3"),
    p = document.createElement("p"),
    small = document.createElement("small");
  dot.className = "activity-dot";
  h.className = "slds-text-heading_small";
  h.textContent = record.status + " · " + record.priority + " priority";
  p.textContent = text;
  small.textContent = "Local update · this session";
  body.append(h, p, small);
  li.append(dot, body);
  document.querySelector("#activity").prepend(li);
  note.value = "";
  clearError();
  result.textContent = "Local case updated. No server request was made.";
});
document.querySelector("#cancel").addEventListener("click", () => {
  priority.value = record.priority;
  status.value = record.status;
  note.value = "";
  clearError();
  priority.focus();
});

Справочник по коду

  • Сохраните как src/main.js. Все изменения остаются локальными.

slds.css — адаптивная компоновка

Только исходная сетка записи, оформление истории и мобильная компоновка.

css
[hidden] { display: none !important; }
body {
  margin: 0;
}
.slds-example {
  background: #f3f3f3;
  padding: 24px;
  min-height: 680px;
}
.record-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-top: 12px;
}
.record-title h1 {
  white-space: normal;
}
.record-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.record-grid > .slds-card {
  margin: 0;
  min-width: 0;
}
.summary,
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.summary p {
  font-weight: 600;
  margin-top: 4px;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.activity {
  list-style: none;
  padding: 0;
  margin: 0;
}
.activity li {
  display: flex;
  gap: 12px;
  padding-bottom: 24px;
  position: relative;
}
.activity li:not(:last-child):before {
  content: "";
  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 0;
  border-left: 1px solid #c9c9c9;
}
.activity-dot {
  flex: none;
  width: 11px;
  height: 11px;
  background: #0176d3;
  border-radius: 50%;
  margin-top: 5px;
}
.activity p {
  margin: 8px 0;
}
.activity small {
  color: #747474;
}
.slds-example footer {
  font-size: 12px;
  color: #747474;
  margin-top: 20px;
}
.slds-form-element.slds-has-error #note-help {
  color: #444;
}
@media (max-width: 760px) {
  .slds-example {
    padding: 12px;
  }
  .record-grid {
    grid-template-columns: 1fr;
  }
  .record-title {
    gap: 12px;
  }
  .field-grid {
    grid-template-columns: 1fr;
  }
  .form-actions {
    justify-content: flex-start;
  }
}

Справочник по коду

  • Сохраните как src/slds.css; стили пакета подключаются отдельно.
04

Настройка агента дизайн-системы Salesforce Lightning

Отправная точка для реализации

Пример нативного CSS с закреплённой версией, не развёртывание в организации Salesforce. При распространении включённых в пакет ресурсов сохраняйте уведомления о пакетах и ресурсах.

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

Запрос для вашего проекта

Промпт для AI-агента
Создайте специализированное рабочее пространство обращения, используя закреплённые шаблоны SLDS CSS. Разделяйте идентификационные данные записи, контекст клиента, сохранённое состояние и черновик изменений. Используйте точную структуру полей, реальные ссылки на токены и полный исходный код, приведённый здесь. Проверяйте примечание до изменения сводки, сохраняйте локальную активность после отмены и не создавайте впечатление, что установлено соединение с серверной частью Salesforce.
05

Источники и область применения дизайн-системы Salesforce Lightning

Руководство OpenDesign по закреплённому пакету SLDS CSS. В предварительном просмотре используются нативная разметка CSS, оригинальные HTML и JavaScript, вымышленные данные обращений и локальное состояние. Lightning Web Components не загружаются, соединение с Salesforce не устанавливается. Исходный репозиторий находится в архиве; для рабочих проектов изучите актуальные рекомендации платформы Salesforce.