Gerçek IDS giriş durumları, tema takma adları ve tam bir varlık tanımlayıcısıyla kurumsal bir bakım formu oluşturun. Güncel herkese açık tema belirteçlerini, sürümü sabitlenmiş bir Web Components paketini ve doğrulama ile sıfırlama içeren yerel taslak iş akışını inceleyin.
Doğrulanmış IDS temel/açık belirteç değerleri ve sistem yazı tipi yedeğiyle bağımsız HTML/CSS yorumu. Yerel IDS çalışma zamanı değildir. · Uygulama başvurusu
02
Infor tasarım sistemi Tasarım Referansı
Bu onarım çalışmasında okunan, herkese açık Infor belirteç tablosu tema stil sayfası; ayrıca yayımlanmış ids-enterprise-wc 1.17.1 ve resmî giriş/düğme örnekleri. En güncel belirteç tablosu URL'si, bir paket sürümü garantisi değil, canlı bir anlık görüntüdür.
Infor tasarım sistemi Kararlı kayıt kimliğine sahip kurumsal bir form
Ekipman tanımlayıcısını düzenlenebilir istekten ayrı tutun
Infor, SoHo'yu tasarım dili olarak adlandırır ve IDS'yi kurumsal roller ile verimlilik odağında konumlandırır. Örnek, bu vurguyu bir bakım isteğine uygular: varlık tanımlayıcısı sabit kalırken iş özeti, iletişim bilgileri ve aciliyet düzenlenebilir görev bilgilerini oluşturur.
02006 kimliği bilerek metin dizisi olarak tutulur. Sayıya dönüştürülmesi baştaki sıfırın kaybolmasına ve kimliğin değişmesine yol açar. Yerel IDS örneği, kayıt bağlamının eksik veya kullanılamayan bir alan gibi görünmeden görünür kalması için salt okunur bir giriş kullanır.
Infor tasarım sistemi Tema takma adları, temel değerler üzerinden çözümlenir
Takma adı amacına uygun kullanın
Alınan herkese açık tema, varsayılan eylem rengini blue-60, varsayılan ön plan rengini neutral-100 ve ikincil ön plan rengini neutral-80 üzerinden tanımlar. Bu iki katmanlı yapı, uygulama genelinde gerçek renk değerlerini yinelemeden özel bir formun temasıyla tutarlı olmasını sağlar.
Herkese açık belirteç sayfasında Temel, Koyu ve Yüksek Karşıtlık modları sunulur. Bu kılavuzdaki değerler, temel/açık stil sayfasının anlık görüntüsünden alınmıştır. Önizleme, mavi bir hex değerinin bu üç modun tümünde evrensel olduğunu ileri sürmez; üretim bileşeni anlamsal takma adını kullanmalı ve seçili temanın bu değeri belirlemesine izin vermelidir.
Infor tasarım sistemi Uydurma bir yoğunluk sistemi olmadan somut bir ölçek
Boşluk, tipografi ve köşe yuvarlama için ayrı takma ad kümeleri bulunur
Boşluk takma adları arasında, 8 piksellik temel değere karşılık gelen xs; 16'ya karşılık gelen sm; 24'e karşılık gelen md ve 32'ye karşılık gelen lg bulunur. Sağlanan yerel CSS, ana iç boşluk için md'yi, alanlar arasındaysa sm'yi kullanır. Böylece niyet kaynak kodunda görünür olurken referans tablosundaki somut değerler de korunur.
Varsayılan yazı tipi ailesi Source Sans Pro, tek aralıklı yazı tipi ise Source Code Pro'dur. font-size-default takma adı, 16 piksellik ölçek girdisine karşılık gelir. Kitaplığı yüklemek, paket README dosyasında açıklanan yazı tipi varlıklarını sağlama gerekliliğini ortadan kaldırmaz. Çevrimdışı önizlemede bunun yerine standart bir yedek yazı tipi kullanılır.
Köşe yuvarlama adları boşluk adlarından ayrıdır: radius-sm 8 piksele, space-sm ise 16 piksele karşılık gelir. Her iki ad da sm ile bitiyor diye hatırlanan aynı sayıyı kullanmak yanlış sonuca yol açar.
Infor tasarım sistemi Farklı anlamlar taşıyan giriş durumları
Salt okunur, devre dışı ve değişmiş durumları birbirinin yerine kullanılamaz
Resmî örneklerde readonly, disabled, dirty-tracker, clearable, uppercase, lowercase ve mantıksal metin hizalama özellikleri sunulur. İstek örneğinde varlık kimliği için yalnızca readonly, iş özeti içinse clearable gerekir. E-posta adresinde otomatik büyük/küçük harf dönüşümü etkinleştirilmez ve serbest metinli açıklama sessizce dönüştürülmez.
Yerel giriş örneğinde iletişim alanı için validate="email required" tanımlanır. Yayımlanmış tür bildirimi value, focus() ve checkValidation() sağlar. checkValidation void döndürdüğünden, kod bunu formun geçerliliğini belirten bir Boolean değeri sanmaz; bunun yerine yerel kaydı hazırlamaya izin veren koşulları ayrı ayrı denetler.
Salt okunur alan, sabit bir varlığı görünür ve okunabilir tutar.
Devre dışı, alanın şu anda kullanılamadığı anlamına gelir.
Değişiklik izleme, bir değerin ilk hâlinden farklılaşmasını açıklar; başarı veya doğrulama durumu değildir.
Infor tasarım sistemi Değişiklik izleme ile doğrulamanın sözleşmeleri farklıdır
Düzenlemeleri izleyin, ancak geçerli veri saymayın
Resmî IDS giriş galerisi, başlangıç değeri olan bir girişte dirty-tracker="true" kullanımını gösterir. Değişiklik izleme, alanda yapılan düzenlemelerle ilgilidir; kabul edilebilir girdiyi tanımlayan email ve required kurallarının bulunduğu validate özelliğinden ayrıdır. Değiştirilmiş bir iletişim alanında yine de geçersiz bir adres bulunabilir.
Yayımlanmış Input bildirimi checkValidation(): void özelliğini sunar. Bunu bileşenin doğrulama davranışını tetiklemek için çağırın; iş emri eylemine izin veren Boolean koşulu olarak kullanmayın. Yerel örnek, taslak oluşturmadan önce uygulamanın zorunlu değerlerini de denetler. Temizlenebilir özeti ve salt okunur varlık alanı, birbirinden bağımsız iki giriş özelliğini daha gösterir.
Değişiklik izleme belgelenmiş bir genişletmedir; bu önizlemede etkin değildir. Demo, düzenlemelerden sonra hazırlanan özeti temizler ve odağı iş özeti alanına geri taşır; bir bakım isteğinin kaydedildiğini bildirmez.
Infor tasarım sistemi Formu gizlemeden iki parçalı bir çalışma alanı kullanın
Önce form, sonra bağlam
Önizlemede form; kompakt bir ekipman bağlam kartı ve özgün, basit bir makine çizimiyle eşleştirilir. Ana okuma sırası başlık, alanlar, eylemler ve sonuç şeklinde kalır. Dar ekranlarda bağlam, girişleri okunamayacak sütunlara sıkıştırmak yerine formun altına taşınır.
Kitaplık örneklerinde, kesme noktasına göre sütun nitelikleri içeren ids-layout-grid kullanılır. Bu örnek bilerek daha basit, kendine ait bir duyarlı düzen kullanır; maksimum genişlik ve kesme noktası uygulamaya özgü değerlerdir. Gösterilen özellikler, belirteç tabanlı aralıklar ve yerel denetim etiketleridir.
Infor tasarım sistemi Yerel paketin sürümünü sabitleyin ve değerleri okumadan önce başlatın
Yayımlanmış paket, güvenilir başlangıç noktasıdır
Doğrulanan paket; 1.17.1 sürümünü, enterprise-wc.js ES modülü giriş noktasını ve güncel Infor tarafından barındırılan kaynak kod deposunu belirtir. Bu nedenle eski GitHub konumu, güvenilir bir yükleme yönergesi değildir. Kod, yayımlanmış paketi içe aktarır, bileşimi ekler ve davranışları bağlamadan önce özel öğe tanımlarının yüklenmesini bekler.
Resmî canlı örneklerde derlemeye özgü parça URL'leri bulunur. Rastgele bir parça adını uygulamaya kopyalamak, uygulamayı bir dağıtım çıktısına bağımlı hâle getirir; paket giriş noktası, bu bağımlılıkları derleme aracının çözmesini sağlar. Bu kılavuz herkese açık yöntem bildirimlerini doğrular ve tarayıcı örneğini yerel derleme iddiasından açıkça ayrı tutar.
Sabitlenmiş paketi Vite vanilla iskeletine yükleyin ve belgelenen yazı tipini uygulamanızın varlık politikasına göre ekleyin.
Sağlanan giriş noktasını ve CSS'ı kullanın, özel öğelerin yüklenmesini bekleyin, ardından birincil ve sıfırlama eylemlerini bağlayın.
Boş özeti, hatalı e-posta adresini, geçerli yerel taslağı ve sonraki bir düzenlemeyi sınayın; görüntülenen anlık görüntünün güncelliğini yitirmediğinden emin olun.
Belgenin tamamını index.html olarak kaydedin ve bir tarayıcıda açın. Doğrulanmış IDS core/light token değerleri ve sistem yazı tipi yedeğiyle bağımsız HTML/CSS yorumu. Yerel IDS çalışma zamanı değildir.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Maintenance request — IDS interpretation</title><style>*{box-sizing:border-box}body{margin:0;color:#161618;background:#f5f5f5;font:16px/1.45 Arial,sans-serif}main{max-width:1120px;padding:32px;margin:auto}header{display:flex;justify-content:space-between;border-bottom:1px solid #bbbbbf;padding-bottom:16px;gap:16px}header b{font-size:14px}header span{font-size:13px;color:#3b3b3f}h1{font-size:32px;line-height:1.2;font-weight:500;margin:24px 0 8px}h2{font-size:20px;font-weight:500;margin:0 0 16px}.intro{color:#3b3b3f;margin:0 0 24px}.grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}.form,.context{background:white;border:1px solid #e0e0e1;border-radius:8px;padding:24px}label,.label{display:block;font-size:14px;margin-bottom:8px}input{width:100%;font:inherit;border:1px solid #6f6f76;border-radius:4px;padding:10px 12px;color:#161618}input[readonly]{background:#f5f5f5}input:focus,button:focus-visible{outline:3px solid #8abff7;outline-offset:2px}.field{margin-bottom:16px}.hint{font-size:12px;color:#3b3b3f;margin:4px 0 0}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}button{font:inherit;border-radius:4px;padding:10px 16px;cursor:pointer;border:1px solid #6f6f76;background:white;color:#161618}.primary{background:#0072ed;color:white;border-color:#0072ed}.primary:hover{background:#0066d4}fieldset{padding:0;border:0;margin:24px 0 0}legend{font-size:14px;margin-bottom:8px}.radios{display:flex;gap:16px;flex-wrap:wrap}.radios label{display:flex;gap:8px;align-items:center;margin:0}.radios input{width:auto;accent-color:#0072ed}.equipment{height:190px;background:#e6f1fd;display:grid;place-content:center;margin-bottom:24px;border-radius:4px}.machine{border:3px solid #0054b1;width:165px;height:100px;position:relative;background:white}.machine:before{content:'';position:absolute;left:14px;top:16px;width:55px;height:55px;border:8px double #0054b1;border-radius:50%}.machine:after{content:'02006';position:absolute;right:10px;top:27px;color:#0054b1;font:16px monospace}.context dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;font-size:14px}.context dt{color:#3b3b3f}.context dd{margin:0;text-align:right}.notice{font-size:13px;background:#f5f5f5;padding:16px;margin-top:24px}.error{color:#a30d11;font-size:14px;min-height:20px}.result{background:#e6f1fd;padding:16px;border-left:3px solid #0072ed;margin-top:20px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}.result[hidden]{display:none}.foot{font-size:12px;color:#3b3b3f;margin-top:24px}@media(max-width:650px){main{padding:20px}.grid{grid-template-columns:1fr}.form,.context{padding:20px}header{flex-direction:column;gap:4px}h1{font-size:28px}.equipment{height:140px}}</style><main><header><b>ASSET SERVICE / LOCAL NOTEBOOK</b><span>Independent Infor IDS interpretation</span></header><h1>Prepare the work. Keep the context.</h1><p class="intro">Build a local maintenance draft for a fixed equipment record.</p><div class="grid"><form id="form" class="form" novalidate><div class="field"><label for="asset">Asset identifier</label><input id="asset" value="02006" readonly><p class="hint">Read-only record identity; leading zero preserved.</p></div><div class="field"><label for="summary">Work summary</label><input id="summary" required placeholder="For example, inspect the drive belt" aria-describedby="error"></div><div class="field"><label for="contact">Contact email</label><input id="contact" type="email" required placeholder="[email protected]" aria-describedby="error"></div><fieldset><legend>Planning urgency</legend><div class="radios"><label><input type="radio" name="urgency" value="Routine" checked>Routine</label><label><input type="radio" name="urgency" value="Soon">Soon</label></div></fieldset><div class="actions"><button class="primary" type="submit">Prepare local draft</button><button id="clear" type="button">Clear draft</button></div><p id="error" class="error" role="alert"></p><div id="result" class="result" role="status" hidden></div></form><aside class="context"><div class="equipment" role="img" aria-label="Original schematic of fictional equipment 02006"><div class="machine"></div></div><h2>Equipment context</h2><dl><dt>Record</dt><dd>02006</dd><dt>Area</dt><dd>Sample workshop</dd><dt>Type</dt><dd>Drive assembly</dd><dt>Connection</dt><dd>Offline sample</dd></dl><p class="notice">Preparing a draft changes only this page. It does not create a work order or send a message.</p></aside></div><p class="foot">Core/light IDS token values with native HTML controls and a system-font fallback. Original illustration and application layout; no native IDS runtime.</p></main><script>const form=document.querySelector('#form'),summary=document.querySelector('#summary'),contact=document.querySelector('#contact'),error=document.querySelector('#error'),result=document.querySelector('#result');function clearResult(){result.hidden=true;result.textContent='';error.textContent='';summary.removeAttribute('aria-invalid');contact.removeAttribute('aria-invalid')}form.addEventListener('input',clearResult);form.onsubmit=e=>{e.preventDefault();clearResult();if(!summary.value.trim()){error.textContent='Enter a work summary.';summary.setAttribute('aria-invalid','true');summary.focus();return}if(!contact.value.trim()||!contact.validity.valid){error.textContent='Enter a valid contact email.';contact.setAttribute('aria-invalid','true');contact.focus();return}result.hidden=false;result.textContent='LOCAL DRAFT / NOT SENT\n\nAsset: 02006\nSummary: '+summary.value.trim()+'\nContact: '+contact.value.trim()+'\nUrgency: '+form.elements.urgency.value};document.querySelector('#clear').onclick=()=>{form.reset();clearResult();summary.focus()};</script></html>
02006 varlığı bir metin olarak kalır. Yerel IDS örneği, bu HTML formu değil, özel öğe kaydını ve checkValidation() işlevini kullanıma açar; bunların hiçbiri bakım emri oluşturmaz.
Salt okunur tanımlayıcı, zorunlu özet ve iletişim doğrulaması
IDS giriş doğrulaması açıkça çağrılır; uygulama denetimleri boş bir yerel taslağı önler. Kullanıcı metni textContent ile görüntülenir.
JavaScript
// Vite vanilla project: npm install [email protected]
// src/main.js. Add Source Sans Pro through your approved font-hosting setup.
import 'ids-enterprise-wc';
import './style.css';
document.querySelector('#app').innerHTML=`<ids-container><main>
<h1>Maintenance request</h1><p>Local draft only; no work order is sent.</p>
<ids-input id="asset" label="Asset identifier" value="02006" readonly="true"></ids-input>
<ids-input id="summary" label="Work summary" validate="required" clearable="true"></ids-input>
<ids-input id="contact" label="Contact email" validate="email required"></ids-input>
<ids-button id="prepare" appearance="primary"><span>Prepare local draft</span></ids-button>
<ids-button id="reset" appearance="secondary"><span>Clear draft</span></ids-button>
<p id="message" role="status"></p><pre id="draft"></pre>
</main></ids-container>`;
await Promise.all(['ids-input','ids-button','ids-container'].map(n=>customElements.whenDefined(n)));
const summary=document.querySelector('#summary'),contact=document.querySelector('#contact');
const message=document.querySelector('#message'),draft=document.querySelector('#draft');
document.querySelector('#prepare').addEventListener('click',()=>{
summary.checkValidation();contact.checkValidation();
const title=summary.value.trim(),email=contact.value.trim();
if(!title){message.textContent='Enter a work summary.';summary.focus();return;}
if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){message.textContent='Enter a complete contact email.';contact.focus();return;}
draft.textContent=JSON.stringify({asset:'02006',summary:title,contact:email},null,2);
message.textContent='Draft prepared in this page only. No request sent.';
});
function clearResult(){draft.textContent='';message.textContent='';}
summary.addEventListener('input',clearResult);contact.addEventListener('input',clearResult);
document.querySelector('#reset').addEventListener('click',()=>{summary.value='';contact.value='';clearResult();summary.focus();});
/* src/style.css — application layout using the loaded IDS token roles */
main{max-width:44rem;margin:auto;padding:var(--ids-space-md);color:var(--ids-color-foreground-default-default)}
ids-input{display:block;margin-bottom:var(--ids-space-sm)}
ids-button{margin-inline-end:var(--ids-space-xs)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--ids-color-accent-neutral-weakest);padding:var(--ids-space-sm)}
Kullanılamayan bir bileşen yalnızca soluk bir stille değil, disabled ile belirtilir.
04
Infor tasarım sistemi AI Ajanı Kurulumu
Uygulamaya Başlangıç Noktası
#app kullanan bir Vite vanilla iskeleti için eksiksiz giriş dosyası ve stil sayfası. Paket sürümü ve yöntemler yayımlanmış pakette denetlendi; burada derleme yapılmadı. Source Sans Pro'yu onaylı bir yazı tipi kaynağı üzerinden sağlayın. Gömülü önizleme, yerel HTML uygulamasından bağımsızdır.
javascript / css
// Vite vanilla project: npm install [email protected]
// src/main.js. Add Source Sans Pro through your approved font-hosting setup.
import 'ids-enterprise-wc';
import './style.css';
document.querySelector('#app').innerHTML=`<ids-container><main>
<h1>Maintenance request</h1><p>Local draft only; no work order is sent.</p>
<ids-input id="asset" label="Asset identifier" value="02006" readonly="true"></ids-input>
<ids-input id="summary" label="Work summary" validate="required" clearable="true"></ids-input>
<ids-input id="contact" label="Contact email" validate="email required"></ids-input>
<ids-button id="prepare" appearance="primary"><span>Prepare local draft</span></ids-button>
<ids-button id="reset" appearance="secondary"><span>Clear draft</span></ids-button>
<p id="message" role="status"></p><pre id="draft"></pre>
</main></ids-container>`;
await Promise.all(['ids-input','ids-button','ids-container'].map(n=>customElements.whenDefined(n)));
const summary=document.querySelector('#summary'),contact=document.querySelector('#contact');
const message=document.querySelector('#message'),draft=document.querySelector('#draft');
document.querySelector('#prepare').addEventListener('click',()=>{
summary.checkValidation();contact.checkValidation();
const title=summary.value.trim(),email=contact.value.trim();
if(!title){message.textContent='Enter a work summary.';summary.focus();return;}
if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){message.textContent='Enter a complete contact email.';contact.focus();return;}
draft.textContent=JSON.stringify({asset:'02006',summary:title,contact:email},null,2);
message.textContent='Draft prepared in this page only. No request sent.';
});
function clearResult(){draft.textContent='';message.textContent='';}
summary.addEventListener('input',clearResult);contact.addEventListener('input',clearResult);
document.querySelector('#reset').addEventListener('click',()=>{summary.value='';contact.value='';clearResult();summary.focus();});
/* src/style.css — application layout using the loaded IDS token roles */
main{max-width:44rem;margin:auto;padding:var(--ids-space-md);color:var(--ids-color-foreground-default-default)}
ids-input{display:block;margin-bottom:var(--ids-space-sm)}
ids-button{margin-inline-end:var(--ids-space-xs)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--ids-color-accent-neutral-weakest);padding:var(--ids-space-sm)}
Projeniz İçin Bir İstem
Ajan İstemi
Doğrulanmış açık tema takma adlarını ve belgelenmiş giriş/düğme yapısını kullanarak bir Infor IDS bakım taslağı oluşturun. Varlık tanımlayıcısını metin olarak ve salt okunur tutun. Düzenlenebilir alanları doğrulayın, düzenlemelerden sonra eski çıktıyı temizleyin ve yerel taslağı gönderilmiş bir iş emrinden ayırın. checkValidation() işlevinin Boolean döndürdüğünü varsaymayın.
05
Infor tasarım sistemi Kaynaklar ve Kapsam
Bağımsız OpenDesign kılavuzu. Varlık ve iş akışı kurgusaldır; hiçbir şey gönderilmez. Yerel kod, denetlenmiş 1.17.1 paketini temel alır; token değerleri ise ayrı bir canlı core/light tema anlık görüntüsü olarak belirtilmiştir.
