Создайте корпоративную форму обслуживания с настоящими состояниями полей ввода IDS, псевдонимами темы и точным идентификатором ресурса. Изучите актуальные токены общедоступной темы, закреплённый пакет Web Components и локальный процесс работы с черновиком, проверкой данных и сбросом.
Независимая интерпретация HTML/CSS с использованием проверенных значений токенов IDS Core/Light и системного резервного шрифта. Это не среда выполнения IDS Native. · Справочник по реализации
02
Дизайн-система Infor Справочник по дизайну
Таблица тем Infor с публичными токенами, прочитанная в ходе этой проверки, а также опубликованные ids-enterprise-wc 1.17.1 и официальные примеры полей и кнопок. Последний URL таблицы токенов ведёт к текущему снимку и не гарантирует соответствие версии пакета.
Дизайн-система Infor Корпоративная форма со стабильным идентификатором записи
Храните идентификатор оборудования отдельно от редактируемой заявки
Infor называет SoHo своим языком дизайна и позиционирует IDS как систему, ориентированную на корпоративные роли и повышение продуктивности. В этом примере такой акцент применён к заявке на обслуживание: идентификатор ресурса остаётся неизменным, а описание работ, контактные данные и срочность относятся к редактируемой информации.
Идентификатор 02006 намеренно задан строкой. При преобразовании в число начальный ноль будет потерян, а сам идентификатор изменится. В официальном примере IDS используется поле readonly, чтобы контекст записи оставался видимым и не выглядел как отсутствующее или недоступное поле.
Дизайн-система Infor Псевдонимы темы разрешаются через примитивы
Используйте псевдоним по назначению
В снимке публичной темы action-default задан через blue-60, default foreground — через neutral-100, а secondary foreground — через neutral-80. Такая двухуровневая структура помогает пользовательской форме соответствовать теме без дублирования конкретных значений цветов в приложении.
На публичной странице токенов доступны режимы Core, Dark и Contrast. Значения в этом руководстве взяты из снимка таблицы стилей Core/Light. Предварительный просмотр не утверждает, что одно и то же значение синего цвета в формате hex универсально для всех трёх режимов. В рабочем компоненте следует использовать семантический псевдоним и позволить выбранной теме определить его значение.
Дизайн-система Infor Конкретная шкала без вымышленной системы плотности
Для интервалов, типографики и скруглений предусмотрены отдельные группы псевдонимов
Псевдонимы интервалов включают xs, соответствующий примитиву 8 пикселей, sm — 16, md — 24 и lg — 32. В предоставленном нативном CSS для основных внутренних отступов используется md, а между полями — sm. Так назначение значений явно указано в исходном коде, а в справочной таблице приведены конкретные величины.
По умолчанию используется семейство шрифтов Source Sans Pro, а для моноширинного текста — Source Code Pro. Псевдоним font-size-default соответствует значению 16 пикселей в шкале. Загрузка библиотеки не отменяет необходимость предоставить файлы шрифтов, описанные в README пакета. В автономном предварительном просмотре вместо них используется обычный резервный шрифт.
Названия скруглений не связаны с названиями интервалов: radius-sm соответствует 8 пикселям, а space-sm — 16. Если использовать знакомое значение только потому, что оба названия оканчиваются на sm, результат будет неверным.
Дизайн-система Infor Состояния полей с разным назначением
Readonly, disabled и dirty — не взаимозаменяемые состояния
В официальных примерах представлены readonly, disabled, dirty-tracker, clearable, uppercase, lowercase и логическое выравнивание текста. В заявке используются только readonly для идентификатора ресурса и clearable для описания работ. Автоматическое изменение регистра не применяется к адресу электронной почты, а текстовое описание не преобразуется незаметно для пользователя.
В нативном примере для поля контактных данных указано validate="email required". В опубликованном объявлении типа предусмотрены свойства value, focus() и checkValidation(). Поскольку checkValidation возвращает void, код не использует этот метод как булев признак валидности формы, а отдельно проверяет условия, необходимые для подготовки локальной записи.
Readonly оставляет постоянный идентификатор ресурса видимым и доступным для чтения.
Disabled означает, что поле сейчас нельзя использовать.
Отслеживание изменений показывает отличие от исходного значения; это не состояние успешной валидации.
Дизайн-система Infor Отслеживание изменений и валидация решают разные задачи
Отслеживайте изменения, не считая их корректными данными
В официальной галерее полей IDS показан атрибут dirty-tracker="true" для поля с начальным значением. Отслеживание изменений касается редактирования поля и не зависит от атрибута validate, правила email и required которого задают допустимый ввод. Изменённое поле контактных данных всё ещё может содержать недействительный адрес.
В опубликованном объявлении типа Input метод checkValidation(): void. Вызывайте его, чтобы запустить валидацию компонента, а не использовать как булево условие для разрешения действия с заказом на обслуживание. В нативном примере также проверяются обязательные значения приложения перед созданием черновика. Описание работ с возможностью очистки и идентификатор ресурса только для чтения показывают ещё две независимые возможности поля.
Отслеживание изменений — задокументированное расширение, не включённое в этот предварительный просмотр. Демонстрационный пример очищает подготовленное описание после изменений и возвращает фокус в поле описания работ; он не сообщает, что заявка на обслуживание сохранена.
Дизайн-система Infor Используйте рабочую область из двух частей, не скрывая форму
Сначала форма, затем контекст
В предварительном просмотре форма дополнена компактной карточкой с контекстом оборудования и простой оригинальной схемой машины. Основной порядок чтения остаётся прежним: заголовок, поля, действия, результат. На узких экранах карточка перемещается под форму, а не сжимает поля в нечитаемые колонки.
В примерах библиотеки используются ids-layout-grid и атрибуты колонок для разных контрольных точек. В этом примере намеренно применена более простая адаптивная компоновка; её максимальная ширина и контрольная точка определяются приложением. Здесь демонстрируются интервалы на основе токенов и подписи нативных элементов управления.
Дизайн-система Infor Зафиксируйте версию нативного пакета и выполните инициализацию до чтения значений
Надёжная точка входа — опубликованный пакет
Проверенные сведения о пакете указывают версию 1.17.1, точку входа ES-модуля enterprise-wc.js и актуальный исходный репозиторий на хостинге Infor. Поэтому старое расположение на GitHub не следует использовать как надёжную инструкцию по установке. Код импортирует опубликованный пакет, добавляет компоненты и дожидается регистрации пользовательских элементов, прежде чем связывать их с обработчиками.
В официальных актуальных примерах используются URL фрагментов сборки, зависящие от конкретной сборки. Если скопировать в приложение случайное имя фрагмента, оно будет привязано к артефакту развёртывания; точка входа пакета позволяет сборщику разрешить эти зависимости. В руководстве проверены публичные объявления методов, а пример для браузера чётко отделён от утверждений о нативной сборке.
Установите зафиксированную версию пакета в базовый проект Vite с ванильным JavaScript и подключите указанный шрифт согласно политике приложения по работе с ресурсами.
Используйте предоставленную точку входа и CSS, дождитесь регистрации пользовательских элементов, затем свяжите основные действия и сброс.
Проверьте пустое описание, некорректный адрес электронной почты, корректный локальный черновик и последующее изменение; убедитесь, что отображаемый снимок данных не устаревает.
Сохраните документ целиком как index.html и откройте его в браузере. Независимая интерпретация HTML/CSS с проверенными значениями токенов IDS core/light и системным шрифтом в качестве запасного. Это не нативная среда выполнения IDS.
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>
Asset 02006 остаётся строкой. В нативном примере IDS, а не в этой форме HTML, демонстрируются регистрация пользовательского элемента и checkValidation(); ни один из примеров не создаёт наряд на обслуживание.
Идентификатор только для чтения, обязательная сводка и проверка контакта
Проверка ввода IDS вызывается явно; приложение не позволяет сохранить пустой локальный черновик. Пользовательский текст выводится через textContent.
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)}
Для недоступного компонента используется disabled, а не только приглушённый стиль.
04
Настройка агента дизайн-система Infor
Отправная точка для реализации
Полный файл для Vite с нативной настройкой и таблицей стилей для #app. Версию пакета и методы проверили по опубликованному пакету; компиляция здесь не выполнялась. Подключите Source Sans Pro из одобренного источника шрифтов. Встроенный предварительный просмотр — независимая нативная реализация HTML.
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)}
Запрос для вашего проекта
Промпт для AI-агента
Создайте черновик заявки на обслуживание Infor IDS, используя проверенные псевдонимы светлой темы и документированную структуру полей ввода и кнопок. Сохраните идентификатор оборудования в виде строки и сделайте его доступным только для чтения. Проверяйте редактируемые поля, удаляйте устаревший результат после изменений и отличайте локальный черновик от отправленного наряда на обслуживание. Не считайте, что checkValidation() возвращает логическое значение.
05
Источники и область применения дизайн-система Infor
Независимое руководство по OpenDesign. Оборудование и рабочий процесс вымышлены; данные никуда не отправляются. В нативном коде используется проверенный пакет версии 1.17.1, а значения токенов взяты из отдельного актуального снимка темы core/light.
