# Дизайн-система SAP Fiori ## Предварительный просмотр интерфейса дизайн-системы SAP Fiori Измените запрос на закупку, проверьте количество, настройте плотность и подготовьте локальную сводку. ## SAP Fiori Справочник по дизайн-системе Исходные параметры Morning Horizon (sap_horizon) и актуальная документация UI5 Web Components. Указанные ниже переменные Less с префиксом @sap — исходные параметры; стили браузера используют соответствующие пользовательские свойства --sap. Защищённые размеры приведены как наблюдения, а не как рекомендованные точки переопределения. ### Цветовые роли Horizon | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | @sapBrandColor | #0070f2 | Основная роль бренда. | | @sapBackgroundColor | #f5f6f7 | Фон страницы. | | @sapBaseColor | #ffffff | Базовая поверхность. | | @sapTextColor | #131e29 | Основной текст. | | @sapNegativeColor | #aa0808 | Отрицательное состояние. | | @sapCriticalColor | #e76500 | Критическая роль; для текста предусмотрена отдельная производная роль. | | @sapPositiveColor | #256f3a | Положительное состояние. | | @sapInformationBackground | #e1f4ff | Поверхность информационного сообщения. | | @sapWarningBackground | #fff8d6 | Поверхность критического сообщения. | ### Типографика и геометрия | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | @sapFontFamily | "72", "72full", Arial, Helvetica, sans-serif | Опубликованный стек шрифтов. | | @sapFontSize | 0.875rem | Базовый размер. | | @sapContent_LineHeight | 1.5 | Множитель высоты строки основного текста. | | @sapElement_Height | 2.25rem | Защищённый размер для обычного режима. | | @sapElement_Compact_Height | 1.625rem | Защищённый размер для компактного режима. | | @sapElement_LineHeight | 2.75rem | Высота строки для обычного режима. | | @sapElement_Compact_LineHeight | 2rem | Высота строки для компактного режима. | | @sapButton_BorderCornerRadius | 0.5rem | Параметр скругления углов кнопки. | | @sapContent_FocusWidth | 0.125rem | Ширина индикатора фокуса. | | @sapContent_FocusColor | #0032a5 | Цвет индикатора фокуса. | ### Настройка темы и плотности | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | sap_horizon | Morning Horizon | Тема по умолчанию, встроенная в компоненты. | | sap_horizon_dark | Evening Horizon | Для дополнительной темы нужны ресурсы. | | sap_horizon_hcb / sap_horizon_hcw | High contrast black / white | Отдельные поддерживаемые темы с высокой контрастностью. | | Assets.js | One import per component library used | Зарегистрируйте ресурсы дополнительной темы. | | setTheme(name) | @ui5/webcomponents-base/dist/config/Theme.js | Меняйте тему через публичный API API. | ### Условия использования Select | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | ui5-select value | Matches option value or text | Не сочетайте это с флагами selected у вариантов. | | selectedOption | Read-only IOption | Считывайте объект выбранного варианта. | | change | event.detail.selectedOption | Окончательное изменение выбора. | | live-change | Navigation preview | Не считайте это подтверждённым деловым решением. | | accessible-name-ref | ID of visible labeling element | Свяжите видимый текст с элементом управления. | ### Ввод и обратная связь | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | value | String | Явно преобразуйте числовой ввод. | | input | Each keystroke | Используйте для отображения текущей расчётной суммы. | | change | Enter or focusout | Отличается от ввода при каждом нажатии клавиши. | | value-state | None / Negative / Critical / Information / Positive | Названия состояний в текущем API. | | slot="valueStateMessage" | One root element | Точное пояснение к полю. | ### Полоса сообщений | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | design | Information / Positive / Critical / Negative | Семантическое сообщение приложения. | | hide-close-button | Boolean attribute | Не скрывайте необходимое пояснение. | | default slot | Prefer text content | Не превращайте полосу сообщений в сложную панель. | ## SAP Fiori Полное руководство по дизайн-системе Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## SAP Fiori Области применения дизайн-системы и реализации на UI5 различаются ### Конкретная отправная точка > SAP Fiori описывает пользовательский опыт для корпоративных приложений. В этом справочнике для реализуемого примера запроса на закупку выбраны UI5 Web Components. Это не означает, что установка этих компонентов создаёт приложение SAPUI5, шаблон страницы Fiori elements или авторизованную деловую операцию SAP. Основной пакет компонентов предоставляет Input, Select и Button. Компоненты более высокого уровня для Fiori находятся в отдельном пакете. Импорт только модулей, используемых в этом примере, делает точку входа явной и не создаёт впечатления, будто поддерживается CDN с полным набором компонентов. Прочитать вспомогательную спецификацию ## Дизайн-система SAP Fiori: используйте именованные параметры Horizon, а не универсальную синюю палитру ### Роли поверхностей и состояний В Morning Horizon страница оформлена светло-серым фоном, а базовая поверхность — белая. Фирменный синий и цвет текста задаются отдельными параметрами. Отрицательные, критические, положительные и информационные роли обозначают смысл, а не набор декоративных цветов для чередования на карточках. В примере для подготовленной сводки используется информационная полоса, поскольку локальная подготовка не означает одобрение закупки. Цена товара, центры затрат и пометки об одобрении — оригинальные данные примера. Их нельзя считать бизнес-правилами, предоставленными SAP. Прочитать вспомогательную спецификацию ## Дизайн-система SAP Fiori: компактный режим — настройка компонента, а не уменьшенный снимок экрана ### Применяйте плотность к подходящей области UI5 позволяет включать компактный маркер на корневом элементе, теле документа, области или компоненте. Публичные механизмы — атрибут data-ui5-compact-size и класс ui5-content-density-compact. Для динамического переключения маркера отдельная API плотности не нужна. Используйте компактные элементы управления для насыщенной задачами работы на настольном компьютере, только если они остаются удобными. Встроенная интерпретация уменьшает интервалы между элементами управления и строками, сохраняя ту же информацию. В узкой компоновке области располагаются друг под другом, а не все подписи и кнопки уменьшаются. ```
``` Справочник по коду Прочитать вспомогательную спецификацию ## Дизайн-система SAP Fiori: семейство шрифтов 72 и его загрузка ### Наличие шрифтов — часть настройки В теме Horizon перед резервными шрифтами указаны 72 и 72full. В документации UI5 описано, как отключить загрузку шрифтов по умолчанию и размещать шрифты локально. Удобная точка входа FontFace.css помечена как экспериментальная, поэтому при выборе этого способа зафиксируйте путь и проверяйте его актуальность. В автономном предварительном просмотре в качестве явного резервного шрифта используется Arial. В нативном примере UI5 используется опубликованная переменная семейства шрифтов. Это различие не позволяет принять визуально похожий снимок экрана с резервным шрифтом за доказательство загрузки ресурсов шрифта SAP. Прочитать вспомогательную спецификацию ## Дизайн-система SAP Fiori: у Select есть подтверждённые и предварительные изменения ### Выберите один способ управления выбором Значение Select должно совпадать со значением или текстом Option. Не рекомендуется сочетать значение Select с флагами selected у элементов Option; если значение отсутствует, ни один вариант не будет выбран. В примере изначально задан существующий вариант центра затрат, а при подготовке результата считывается значение Select. Событие change содержит выбранный вариант. Событие live-change срабатывает также при перемещении между вариантами и отмене с помощью Escape. Для деловых данных используйте подтверждённый выбор, а предварительные изменения оставьте для предварительного просмотра. - Зарегистрируйте Select и Option до отображения соответствующих тегов. - Свяжите видимую подпись центра затрат через accessible-name-ref. - В этом примере используйте только один способ выбора — через value. Прочитать вспомогательную спецификацию ## Дизайн-система SAP Fiori: числовой ввод всё равно требует проверки в приложении ### Состояние значения и сообщение должны быть согласованы Значение Input — строка, даже если тип ввода Number. Преобразуйте его и проверьте, что это конечное целое число в допустимых пределах, прежде чем умножать его на примерную цену. Пустое значение нельзя считать допустимым нулём. Для текущего семантического состояния ошибки используется Negative, а не выдуманный вариант перечисления Error. Слот valueStateMessage содержит один корневой элемент с точным пояснением. Текущая сумма обновляется при вводе; подготовленная сводка — только после нажатия пользователем кнопки действия. 1. Считайте заголовок и числовую строку из соответствующих компонентов. 2. Для этого примера укажите заголовок и целое количество от 1 до 20. 3. Присвойте затронутым элементам управления состояние Negative и сохраните введённые значения. 4. Подготавливайте сводку, только если выполнены оба условия. Прочитать вспомогательную спецификацию ## Дизайн-система SAP Fiori: сделайте результат описательным и локальным ### Для краткого результата используйте полосу сообщений MessageStrip поддерживает семантические варианты оформления и кнопку закрытия. Если пояснение обязательно, кнопку закрытия можно скрыть, чтобы сообщение оставалось на экране. В слот по умолчанию лучше помещать текст, а не разворачивать в нём форму или панель управления. В сводке указаны название, количество, итоговая сумма и центр затрат. В последнем предложении поясняется, что данные не отправлены. В реальном сервисе этот локальный этап заменили бы авторизованным запросом и ответом с фактическим статусом от серверной части. Прочитать вспомогательную спецификацию ## Ресурсы темы дизайн-система SAP Fiori и регистрация модулей ### Для выбранной темы нужны соответствующие ресурсы Morning Horizon — документированная тема по умолчанию, встроенная в компоненты. Для дополнительных тем требуется модуль Assets.js каждой используемой библиотеки. Затем с помощью setTheme можно выбрать Evening Horizon или один из вариантов с высокой контрастностью. Выбрать тёмную тему по названию, не проверив загруженные ресурсы, недостаточно для полноценной интеграции. В приведённой точке входа каждый пользовательский элемент регистрируется до создания разметки. Vite обрабатывает динамический импорт ES-модулей и ресурсы JSON. Сборку нативного проекта, загрузку тем и шрифтов, а также работу с клавиатурой следует проверять отдельно от автономного образца HTML. Прочитать вспомогательную спецификацию ## Примеры компонентов дизайн-система SAP Fiori ### Полноценный автономный интерактивный пример Сохраните документ целиком в файл index.html и откройте его в браузере. Автономная HTML-интерпретация параметров Morning Horizon и композиции форм UI5. Пример нативного пакета приведён отдельно. ``` Fiori purchase request
PProcurement workspaceSample environment

Purchase request

PR-DRAFT · Workplace equipment

Draft · not submitted

Request details

Whole number from 1 to 20.

27-inch studio monitorEquipment · Item 100240
€320 / unit
Estimated line total€640
Complete the draft before preparing the summary.

HTML interpretation of SAP Morning Horizon · UI5 native integration provided in guide · No SAP transaction created

``` Справочник по коду - Переключатель плотности в этом документе HTML — интерпретация. В примере для UI5 показаны настоящий маркер компактного режима, зарегистрированные пользовательские элементы и ресурсы Horizon. ### Заявка на закупку в теме Horizon с проверкой количества Input, Select/Option, Button и MessageStrip формируют локальную сводку заявки. Пересчёт суммы при каждом вводе выполняется отдельно от подготовки результата. ``` // main.js in a Vite vanilla project. index.html contains
. import '@ui5/webcomponents/dist/Button.js'; import '@ui5/webcomponents/dist/Input.js'; import '@ui5/webcomponents/dist/Select.js'; import '@ui5/webcomponents/dist/Option.js'; import '@ui5/webcomponents/dist/MessageStrip.js'; import '@ui5/webcomponents/dist/Assets.js'; import {setTheme} from '@ui5/webcomponents-base/dist/config/Theme.js'; setTheme('sap_horizon'); document.querySelector('#app').innerHTML = `

Purchase request

Prepare a local requisition summary. No SAP transaction is created.

Request title

Enter a title for this request.

Cost center

Design · CC-240 Research · CC-360

Monitor quantity

Use a whole number from 1 to 20.

Estimated line total: €640

Prepare summary Toggle compact controls Complete the draft before preparing the summary.
`; const title=document.querySelector('#title'),qty=document.querySelector('#qty'); qty.addEventListener('input',()=>{ const n=Number(qty.value); document.querySelector('#total').textContent=Number.isInteger(n)&&n>=1&&n<=20 ? `Estimated line total: €${n*320}` : 'Enter a valid quantity to calculate the total.'; }); document.querySelector('#prepare').addEventListener('click',()=>{ const n=Number(qty.value), validTitle=!!title.value.trim(), validQty=Number.isInteger(n)&&n>=1&&n<=20; title.valueState=validTitle?'None':'Negative';qty.valueState=validQty?'None':'Negative'; const notice=document.querySelector('#notice'); if(!validTitle||!validQty){notice.design='Negative';notice.textContent='Correct the request title or quantity before continuing.';return;} notice.design='Information'; notice.textContent=`Local summary: ${title.value.trim()}, ${n} monitors, €${n*320}, ${document.querySelector('#team').value}. Nothing submitted.`; }); document.querySelector('#density').addEventListener('click',()=>document.body.toggleAttribute('data-ui5-compact-size')); ``` Справочник по коду - Правило ввода количества, цена товара €320 и центры затрат — вымышленные данные приложения, а не политика SAP. - UI5 Web Components — один из способов реализации паттернов Fiori; это не полноценное приложение SAPUI5 и не типовой экран Fiori elements. - Транзакция SAP не создаётся. Проверка автономного предпросмотра не подразумевает сборку нативных зависимостей. ## Настройка агента дизайн-система SAP Fiori ### Отправная точка для реализации Замените main.js в Vite полным примером. В документации UI5 для работы требуется сборщик ES-модулей; официальной CDN-сборки со всеми компонентами нет. ``` npm create vite@latest fiori-request -- --template vanilla cd fiori-request npm install npm install @ui5/webcomponents @ui5/webcomponents-base npm run dev ``` ### Запрос для вашего проекта ``` Соберите форму закупки Fiori с помощью компонентов UI5 Web Components Input, Select, Button и MessageStrip в теме Horizon. Сохраните проверку числовых значений, корректное состояние Negative, явное указание компактной плотности и честное описание поведения локальной сводки. ``` ## Источники и область применения дизайн-система SAP Fiori Независимый справочный пример OpenDesign. Пример UI5 Web Components, а не развёрнутая транзакция SAP или полноценное приложение Fiori elements. - Первые шаги Настройка официального пакета и сборщика. - Источник Horizon Снимок параметров темы. - Конфигурация Названия тем и загрузка ресурсов. - Плотность Маркеры компактного режима и RTL. - Шрифты Рекомендации по загрузке 72 и локальным шрифтам. - Поле ввода Состояния значений и события ввода. - Select Стратегии выбора и события. - MessageStrip Структура семантического сообщения. - Источник кнопок Реализация нативной кнопки. ## Связанные ресурсы дизайн-система SAP Fiori ### SEEK Braid Изучите Braid на примере оригинального сценария поиска работы: переменные в области действия темы, четыре реальные точки останова, контекстный текст, разные тона кнопок и управляемое поле, которое объясняет ошибку проверки вместо блокировки действия. ### Segment Evergreen Пример Evergreen с фактическими значениями темы, управляемым вводом тегов, динамической проверкой правил, восстановлением после пустого состояния и встроенным диалогом проверки. ### Semi Design Создайте пошаговую настройку рабочей среды с базовыми элементами Steps, рекомендованными Semi, управляемыми компонентами Input и Switch, реальными токенами темы и явным выбором пакета React 18 или React 19. - [Справочник по реализации](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Источник](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Источник](https://ui5.github.io/webcomponents/docs/advanced/configuration/) - [Источник](https://ui5.github.io/webcomponents/components/Select/) - [Источник](https://ui5.github.io/webcomponents/components/Input/) - [Источник](https://ui5.github.io/webcomponents/components/MessageStrip/) - [Прочитать вспомогательную спецификацию](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/) - [Прочитать вспомогательную спецификацию](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Справочник по коду](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/) - [Прочитать вспомогательную спецификацию](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/) - [Прочитать вспомогательную спецификацию](https://ui5.github.io/webcomponents/docs/advanced/fonts/) - [Прочитать вспомогательную спецификацию](https://ui5.github.io/webcomponents/components/Select/) - [Прочитать вспомогательную спецификацию](https://ui5.github.io/webcomponents/components/Input/) - [Прочитать вспомогательную спецификацию](https://ui5.github.io/webcomponents/components/MessageStrip/) - [Прочитать вспомогательную спецификацию](https://ui5.github.io/webcomponents/docs/advanced/configuration/) - [Справочник по коду](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Справочник по коду](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/) - [Первые шаги Настройка официального пакета и сборщика.](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/) - [Источник Horizon Снимок параметров темы.](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Конфигурация Названия тем и загрузка ресурсов.](https://ui5.github.io/webcomponents/docs/advanced/configuration/) - [Плотность Маркеры компактного режима и RTL.](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/) - [Шрифты Рекомендации по загрузке 72 и локальным шрифтам.](https://ui5.github.io/webcomponents/docs/advanced/fonts/) - [Поле ввода Состояния значений и события ввода.](https://ui5.github.io/webcomponents/components/Input/) - [Select Стратегии выбора и события.](https://ui5.github.io/webcomponents/components/Select/) - [MessageStrip Структура семантического сообщения.](https://ui5.github.io/webcomponents/components/MessageStrip/) - [Источник кнопок Реализация нативной кнопки.](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/packages/main/src/Button.ts)