UI5 Web Components aracılığıyla SAP Fiori’ın Horizon temasını kullanın: gerçek tema parametreleri, açık içerik yoğunluğu, anlamsal değer durumları ve yerel doğrulama içeren bir satın alma talebi düzeni.
Morning Horizon parametrelerinin ve UI5 form bileşiminin çevrimdışı HTML yorumu. Yerel paket örneği ayrı olarak verilmiştir. · Uygulama başvurusu
02
SAP Fiori Tasarım Sistemi Tasarım Referansı
Morning Horizon (sap_horizon) kaynak parametreleri ve güncel UI5 Web Components belgeleri. Aşağıdaki Less @sap adları kaynak parametreleridir; tarayıcı stilleri, bunlara karşılık gelen --sap özel özelliklerini kullanır. Korunan boyutlar, önerilen geçersiz kılma noktaları değil, gözlemlerdir.
SAP Fiori Tasarım Sistemi tasarımı ile UI5 uygulamasının kapsamları farklıdır
Somut bir başlangıç noktası
SAP Fiori, kurumsal bir kullanıcı deneyimini tanımlar. Bu referansta, uygulanabilir bir satın alma talebi örneği için UI5 Web Components seçilmiştir. Bu, söz konusu bileşenleri yüklemenin bir SAPUI5 uygulaması, Fiori elements yerleşim planı veya yetkilendirilmiş bir SAP iş işlemi oluşturduğu anlamına gelmez.
Ana bileşen paketi Input, Select ve Button bileşenlerini sağlar. Daha üst düzey Fiori bileşenleri ayrı bir pakette bulunur. Bu örnekte yalnızca kullanılan modüllerin içe aktarılması, başlangıç noktasını açıkça belirtir ve desteklenmeyen bir tüm bileşenler CDN'i izlenimi vermekten kaçınır.
SAP Fiori Tasarım Sistemi Genel bir mavi palet yerine adlandırılmış Horizon parametrelerini kullanın
Yüzey ve durum rolleri
Morning Horizon, sayfayı açık gri bir yüzeye yerleştirir ve temel yüzey olarak beyazı kullanır. Marka mavisi ile metin rengi ayrı parametrelerdir. Olumsuz, kritik, olumlu ve bilgilendirici roller; kartlar arasında sırayla kullanılacak dekoratif renkleri değil, anlamları belirtir.
Önizlemede, yerel hazırlık satın alma onayı anlamına gelmediğinden hazırlanmış özet için bir bilgilendirme şeridi kullanılır. Ürün fiyatı, masraf yerleri ve onay açıklamaları özgün örnek verilerdir. Bunlar hiçbir zaman SAP tarafından sağlanan iş kuralları olarak yorumlanmamalıdır.
SAP Fiori Tasarım Sistemi Compact, ekran görüntüsünün küçültülmesi değil, bileşen ayarıdır
Yoğunluğu anlamlı bir alana uygulayın
UI5; root, body, bir alan veya bir bileşen üzerinde compact işaretleyicisinin kullanılmasını destekler. data-ui5-compact-size özniteliği ve ui5-content-density-compact sınıfı, herkese açık mekanizmalardır. İşaretleyiciyi dinamik olarak değiştirmek için ayrı bir yoğunluk API gerekmez.
Etkileşim uygun kaldığı sürece, yoğun masaüstü görevlerinde kompakt denetimler kullanın. Gömülü yorum, denetimler ve satırlar arasındaki boşluğu azaltır ancak aynı bilgileri korur. Dar yerleşim, her etiketi ve düğmeyi küçültmek yerine alanları alt alta dizer.
SAP Fiori Tasarım Sistemi 72 yazı tipi ailesi ve yükleme davranışı
Yazı tipinin kullanılabilir olması kurulumun bir parçasıdır
Horizon teması, geri dönüş yazı tiplerinden önce 72 ve 72full adlarını kullanır. UI5, varsayılan yazı tipi yüklemesinin nasıl devre dışı bırakılacağını ve yazı tiplerinin yerel olarak nasıl barındırılacağını açıklar. Kolaylık sağlayan FontFace.css girdisi deneysel olarak işaretlenmiştir; bu yolu seçerken yolunu sabitleyin ve yeniden kontrol edin.
Bağımsız önizleme, açıkça belirtilmiş bir çevrimdışı geri dönüş seçeneği olarak Arial kullanır. Yerel UI5 örneği, yayınlanmış font-family değişkenini kullanır. Bu ayrım, görsel olarak benzer bir yedek yazı tipinin ekran görüntüsünün SAP yazı tipi varlıklarının yüklendiğinin kanıtı olduğu iddiasından kaçınır.
SAP Fiori Tasarım Sistemi Select bileşeninde onaylanmış ve geçici değişiklikler bulunur
Denetimli tek bir seçim stratejisi belirleyin
Select değeri, bir Option değerine veya metnine karşılık gelir. Select value ile Option bileşenlerindeki selected işaretlerinin birlikte kullanılması önerilmez; mevcut olmayan bir değer hiçbir seçeneği seçili hâle getirmez. Örnek, gerçek bir masraf yeri seçeneğini başlangıçta seçer ve sonucu hazırlarken Select değerini okur.
change olayı, seçili seçeneği içerir. live-change olayı, seçenekler arasında gezinirken ve Escape ile geri dönerken de tetiklenir. İş verileri için kesinleşmiş seçimi kullanın; geçici değişiklikleri ise önizlemelerle sınırlı tutun.
Etiketleri oluşturmadan önce Select ve Option kayıtlarını içe aktarın.
Görünür masraf yeri etiketini accessible-name-ref aracılığıyla bağlayın.
Bu örnekte tek seçim stratejisi olarak value değerini kullanın.
SAP Fiori Tasarım Sistemi Sayısal girdi için yine de uygulama doğrulaması gerekir
Durum değeri ile mesaj birlikte kullanılmalıdır
Input değerinin türü Number olsa bile değeri bir dizedir. Örnek fiyatla çarpmadan önce değeri dönüştürün ve sonlu, tam sayı sınırları içinde olduğunu kontrol edin. Boş değer sıfır olarak kabul edilmemelidir. Geçerli anlamsal hata durumu, uydurma bir Error enum değeri değil Negative'dır.
valueStateMessage yuvası, belirli bir açıklama içeren tek bir kök öğe sağlar. Canlı toplam input olayını dinler; hazırlanmış özet ise yalnızca kullanıcı eylemi başlattığında güncellenir.
Başlığı ve sayısal dizeyi bileşenlerinden okuyun.
Bu örnek için başlık girilmesini ve 1 ile 20 arasında tam sayı miktar belirtilmesini zorunlu tutun.
Etkilenen denetimleri Negative olarak işaretleyin ve girilen değerlerini koruyun.
Özeti yalnızca her iki koşul da sağlandıktan sonra hazırlayın.
SAP Fiori Tasarım Sistemi Sonucu açıklayıcı ve yerel tutun
Kısa bir sonuç için şerit kullanın
MessageStrip, anlamsal tasarımları ve kapatma denetimini destekler. Zorunlu bir açıklama varsa kapatma düğmesi gizlenerek mesajın görünür kalması sağlanabilir. Varsayılan yuvasında form ya da gösterge paneli yerine metin kullanılması tercih edilir.
Özet; başlık, miktar, örnek toplam ve masraf yerini içerir. Son cümle, hiçbir şeyin gönderilmediğini açıklar. Gerçek bir hizmette bu yerel adımın yerini yetkilendirilmiş bir istek ve gerçek arka uç durumunu bildiren bir yanıt alır.
SAP Fiori tasarım sistemi tema varlıkları ve modül kaydı
Tema seçimi, temaya karşılık gelen kaynakları gerektirir
Belgelenmiş varsayılan tema Morning Horizon'dır ve bileşenlerde yerleşik olarak bulunur. Ek temalar için kullanılan her kitaplığa ait Assets.js modülü gerekir. Ardından setTheme ile Evening Horizon veya yüksek kontrastlı varyantlardan biri seçilebilir. Yüklenmiş kaynakları kontrol etmeden koyu temalı bir ad seçmek, entegrasyonu tamamlamaz.
Sağlanan giriş noktası, işaretlemeyi oluşturmadan önce her özel öğeyi kaydeder. Vite, dinamik ES importlarını ve JSON kaynaklarını işler. Çevrimdışı HTML örneğinden bağımsız olarak yerel projeyi derleyin; yazı tiplerini, tema yüklemesini ve klavye davranışını doğrulayın.
Belgenin tamamını index.html olarak kaydedip tarayıcıda açın. Bu, Morning Horizon parametrelerinin ve UI5 form bileşiminin çevrimdışı HTML yorumudur. Yerel paket örneği ayrıca verilmiştir.
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>
Bu HTML belgesindeki yoğunluk anahtarı bir yorumlamadır. UI5 giriş noktası, gerçek kompakt işaretçiyi, kaydedilmiş özel öğeleri ve Horizon varlıklarını gösterir.
Miktar doğrulamalı Horizon satın alma talebi
Input, Select/Option, Button ve MessageStrip birlikte yerel bir talep özeti oluşturur. Her tuş vuruşunda güncellenen toplamlar, hazırlanan sonuçtan ayrı tutulur.
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'));
Miktar kuralı, €320 ürün fiyatı ve masraf yerleri örnek uygulama verileridir; SAP politikası değildir.
UI5 Web Components, Fiori kalıplarının bir uygulamasıdır; bu, eksiksiz bir SAPUI5 uygulaması veya Fiori elements yerleşim planı değildir.
SAP işlem kaydı oluşturulmaz. Çevrimdışı önizleme doğrulaması, yerel bağımlılıkların derlendiği anlamına gelmez.
04
SAP Fiori tasarım sistemi aracı kurulumu
Uygulamaya Başlangıç Noktası
Vite main.js dosyasını örneğin tamamıyla değiştirin. UI5 belgeleri bir ES modül paketleyicisi kullanılmasını öngörür; tüm bileşenleri kapsayan resmî bir CDN sunmaz.
bash
npm create vite@latest fiori-request -- --template vanilla
cd fiori-request
npm install
npm install @ui5/webcomponents @ui5/webcomponents-base
npm run dev
Projeniz İçin Bir İstem
Ajan İstemi
Horizon temasıyla UI5 Web Components Input, Select, Button ve MessageStrip kullanarak bir Fiori satın alma talebi oluşturun. Sayısal doğrulamayı, doğru Negative değer durumunu, açık kompakt yoğunluğu ve yerel özetin gerçeğe uygun davranışını koruyun.
05
SAP Fiori tasarım sistemi kaynakları ve kapsamı
Bağımsız OpenDesign başvurusu. UI5 Web Components örneğidir; dağıtılmış bir SAP işlemi veya eksiksiz bir Fiori elements uygulaması değildir.
