Используйте тему Horizon в SAP Fiori с UI5 Web Components: реальные параметры темы, явно заданная плотность контента, семантические состояния значений и сценарий оформления запроса на покупку с локальной проверкой.
Автономная HTML интерпретация параметров Morning Horizon и композиции формы UI5. Пример нативного пакета приведён отдельно. · Справочник по реализации
02
SAP Fiori Справочник по дизайн-системе
Исходные параметры Morning Horizon (sap_horizon) и актуальная документация UI5 Web Components. Указанные ниже переменные Less с префиксом @sap — исходные параметры; стили браузера используют соответствующие пользовательские свойства --sap. Защищённые размеры приведены как наблюдения, а не как рекомендованные точки переопределения.
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 до 20.
Присвойте затронутым элементам управления состояние Negative и сохраните введённые значения.
Подготавливайте сводку, только если выполнены оба условия.
Дизайн-система SAP Fiori: сделайте результат описательным и локальным
Для краткого результата используйте полосу сообщений
MessageStrip поддерживает семантические варианты оформления и кнопку закрытия. Если пояснение обязательно, кнопку закрытия можно скрыть, чтобы сообщение оставалось на экране. В слот по умолчанию лучше помещать текст, а не разворачивать в нём форму или панель управления.
В сводке указаны название, количество, итоговая сумма и центр затрат. В последнем предложении поясняется, что данные не отправлены. В реальном сервисе этот локальный этап заменили бы авторизованным запросом и ответом с фактическим статусом от серверной части.
Ресурсы темы дизайн-система SAP Fiori и регистрация модулей
Для выбранной темы нужны соответствующие ресурсы
Morning Horizon — документированная тема по умолчанию, встроенная в компоненты. Для дополнительных тем требуется модуль Assets.js каждой используемой библиотеки. Затем с помощью setTheme можно выбрать Evening Horizon или один из вариантов с высокой контрастностью. Выбрать тёмную тему по названию, не проверив загруженные ресурсы, недостаточно для полноценной интеграции.
В приведённой точке входа каждый пользовательский элемент регистрируется до создания разметки. Vite обрабатывает динамический импорт ES-модулей и ресурсы JSON. Сборку нативного проекта, загрузку тем и шрифтов, а также работу с клавиатурой следует проверять отдельно от автономного образца HTML.
Сохраните документ целиком в файл index.html и откройте его в браузере. Автономная HTML-интерпретация параметров Morning Horizon и композиции форм UI5. Пример нативного пакета приведён отдельно.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Fiori purchase request</title><style>
*{box-sizing:border-box}body{margin:0;color:#131e29;background:#f5f6f7;font:14px/1.5 Arial,sans-serif}header{background:white;padding:12px 24px;display:flex;gap:16px;align-items:center;border-bottom:1px solid #d5dadd}.symbol{width:32px;height:32px;display:grid;place-items:center;background:#0070f2;color:white;border-radius:8px;font-weight:bold}header strong{font-size:16px}header span:last-child{margin-left:auto;color:#556b82;font-size:12px}main{max-width:1100px;margin:auto;padding:24px}.objecthead{display:flex;justify-content:space-between;gap:20px;align-items:start;margin-bottom:24px}h1{font-size:28px;line-height:36px;margin:0 0 6px}h2{font-size:18px;margin:0 0 16px}.subtitle{color:#556b82;margin:0}.draft{background:#e1f4ff;color:#0032a5;padding:6px 12px;border-radius:6px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px}.panel{background:white;border-radius:12px;padding:24px;border:1px solid #d5dadd}label{display:block;margin-bottom:6px;color:#556b82}input,select{width:100%;height:44px;border:1px solid #758ca4;border-radius:8px;padding:8px 12px;background:#fff;font:inherit;color:inherit}input:focus,select:focus,button:focus-visible{outline:2px solid #0032a5;outline-offset:3px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}.fields>div:first-child{grid-column:1/-1}.line{border-top:1px solid #d5dadd;padding-top:20px;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center}.monitor{background:#e1f4ff;border:2px solid #556b82;height:42px;border-radius:4px;position:relative;margin-bottom:12px}.monitor:after{content:'';position:absolute;bottom:-12px;left:25%;width:50%;height:10px;border-bottom:3px solid #556b82;border-left:8px solid transparent;border-right:8px solid transparent}.line strong{display:block}.line small{color:#556b82}.money{font-size:24px;font-weight:600;white-space:nowrap}.unit{font-size:12px;color:#556b82}.total{display:flex;justify-content:space-between;padding-top:24px;font-weight:600}.controls{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}button{border:1px solid #0070f2;background:white;color:#0057b8;padding:10px 16px;border-radius:8px;font:600 14px/20px Arial;cursor:pointer}button.primary{background:#0070f2;color:white}button:hover{filter:brightness(.95)}.steps{list-style:none;padding:0;margin:0;counter-reset:step}.steps li{position:relative;padding:0 0 24px 36px;color:#556b82}.steps li:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;border:1px solid #758ca4;border-radius:50%;width:24px;height:24px;text-align:center;background:white}.steps strong{display:block;color:#131e29}.steps li:first-child:before{background:#e1f4ff;color:#0057b8;border-color:#0070f2}.strip{margin-top:24px;background:#e1f4ff;border:1px solid #0070f2;padding:12px 16px;border-radius:8px}.strip.error{background:#ffeaf4;border-color:#aa0808;color:#aa0808}.foot{font-size:12px;color:#556b82;margin-top:24px}.compact input,.compact select{height:32px;padding:4px 8px}.compact .fields{gap:12px}.compact .panel{padding:16px}.compact .line{padding-top:12px}.compact button{padding:6px 12px}.hint{font-size:12px;color:#556b82;margin:6px 0 0}@media(max-width:700px){main{padding:20px 16px}.layout{grid-template-columns:1fr}.fields{grid-template-columns:1fr}.objecthead{display:block}.draft{display:inline-block;margin-top:12px}.line{grid-template-columns:48px minmax(0,1fr)}.line>.money{grid-column:2}.panel{padding:20px}header{padding:12px 16px}}
</style><header><span class="symbol">P</span><strong>Procurement workspace</strong><span>Sample environment</span></header><main><div class="objecthead"><div><h1>Purchase request</h1><p class="subtitle">PR-DRAFT · Workplace equipment</p></div><span class="draft">Draft · not submitted</span></div><div class="layout"><section class="panel"><h2>Request details</h2><form id="form" novalidate><div class="fields"><div><label for="title">Request title</label><input id="title" placeholder="e.g. Studio display upgrade" aria-describedby="notice"></div><div><label for="team">Cost center</label><select id="team"><option value="Design · CC-240">Design · CC-240</option><option value="Research · CC-360">Research · CC-360</option></select></div><div><label for="qty">Monitor quantity</label><input id="qty" type="number" min="1" max="20" step="1" value="2" aria-describedby="qty-help notice"><p id="qty-help" class="hint">Whole number from 1 to 20.</p></div></div><div class="line"><div class="monitor" aria-hidden="true"></div><div><strong>27-inch studio monitor</strong><small>Equipment · Item 100240</small></div><div class="money">€320 <span class="unit">/ unit</span></div></div><div class="total"><span>Estimated line total</span><output id="total">€640</output></div><div class="controls"><button class="primary">Prepare summary</button><button type="button" id="density" aria-pressed="false">Compact controls</button></div></form></section><aside class="panel"><h2>Request path</h2><ol class="steps"><li><strong>Prepare draft</strong>Check quantities and cost center.</li><li><strong>Review summary</strong>Confirm the local request details.</li><li><strong>Submit to service</strong>Not connected in this preview.</li></ol><p class="hint">The review path and price are illustrative application data.</p></aside></div><div class="strip" id="notice" role="status">Complete the draft before preparing the summary.</div><p class="foot">HTML interpretation of SAP Morning Horizon · UI5 native integration provided in guide · No SAP transaction created</p></main><script>
const $=id=>document.getElementById(id);function amount(){const n=Number($('qty').value);return Number.isInteger(n)&&n>=1&&n<=20?n:null}$('qty').oninput=()=>{$('total').textContent=amount()===null?'Invalid quantity':'€'+amount()*320};$('density').onclick=()=>{const active=document.body.classList.toggle('compact');$('density').setAttribute('aria-pressed',String(active));$('density').textContent=active?'Cozy controls':'Compact controls'};$('form').onsubmit=e=>{e.preventDefault();const title=$('title').value.trim(),n=amount();$('title').setAttribute('aria-invalid',String(!title));$('qty').setAttribute('aria-invalid',String(n===null));$('notice').classList.toggle('error',!title||n===null);if(!title||n===null){$('notice').textContent=!title?'Enter a title for this request.':'Use a whole quantity from 1 to 20.';(!title?$('title'):$('qty')).focus();return}$('notice').textContent='Local summary: '+title+' · '+n+' monitors · €'+n*320+' · '+$('team').value+'. Nothing submitted.'};
</script></html>
Переключатель плотности в этом документе HTML — интерпретация. В примере для UI5 показаны настоящий маркер компактного режима, зарегистрированные пользовательские элементы и ресурсы Horizon.
Заявка на закупку в теме Horizon с проверкой количества
Input, Select/Option, Button и MessageStrip формируют локальную сводку заявки. Пересчёт суммы при каждом вводе выполняется отдельно от подготовки результата.
javascript
// main.js in a Vite vanilla project. index.html contains <div id="app"></div>.
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 = `
<main style="max-width:800px;margin:auto;padding:24px;font-family:var(--sapFontFamily)">
<h1>Purchase request</h1>
<p>Prepare a local requisition summary. No SAP transaction is created.</p>
<p id="request-label">Request title</p>
<ui5-input id="title" accessible-name-ref="request-label" required>
<span slot="valueStateMessage">Enter a title for this request.</span>
</ui5-input>
<p id="team-label">Cost center</p>
<ui5-select id="team" accessible-name-ref="team-label" value="design">
<ui5-option value="design">Design · CC-240</ui5-option>
<ui5-option value="research">Research · CC-360</ui5-option>
</ui5-select>
<p id="qty-label">Monitor quantity</p>
<ui5-input id="qty" type="Number" accessible-name-ref="qty-label" value="2">
<span slot="valueStateMessage">Use a whole number from 1 to 20.</span>
</ui5-input>
<p id="total">Estimated line total: €640</p>
<ui5-button id="prepare" design="Emphasized">Prepare summary</ui5-button>
<ui5-button id="density">Toggle compact controls</ui5-button>
<ui5-message-strip id="notice" design="Information" hide-close-button style="display:block;margin-top:24px">
Complete the draft before preparing the summary.
</ui5-message-strip>
</main>`;
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 не создаётся. Проверка автономного предпросмотра не подразумевает сборку нативных зависимостей.
04
Настройка агента дизайн-система SAP Fiori
Отправная точка для реализации
Замените main.js в Vite полным примером. В документации UI5 для работы требуется сборщик ES-модулей; официальной CDN-сборки со всеми компонентами нет.
bash
npm create vite@latest fiori-request -- --template vanilla
cd fiori-request
npm install
npm install @ui5/webcomponents @ui5/webcomponents-base
npm run dev
Запрос для вашего проекта
Промпт для AI-агента
Соберите форму закупки Fiori с помощью компонентов UI5 Web Components Input, Select, Button и MessageStrip в теме Horizon. Сохраните проверку числовых значений, корректное состояние Negative, явное указание компактной плотности и честное описание поведения локальной сводки.
05
Источники и область применения дизайн-система SAP Fiori
Независимый справочный пример OpenDesign. Пример UI5 Web Components, а не развёрнутая транзакция SAP или полноценное приложение Fiori elements.
