Crea un formulario de mantenimiento empresarial con estados reales de entrada de IDS, alias de tema y un identificador de recurso exacto. Inspecciona los tokens del tema público actual, un paquete de Web Components fijado en una versión concreta y un flujo local de borradores con validación y restablecimiento.
Interpretación independiente de HTML/CSS, basada en valores verificados de tokens de IDS core/light y una fuente alternativa del sistema. No es el entorno de ejecución nativo de IDS. · Referencia de implementación
02
Referencia de diseño de sistema de diseño Infor
La hoja de estilos de tema de la tabla pública de tokens de Infor consultada en esta revisión, además de ids-enterprise-wc 1.17.1 y los ejemplos oficiales de entradas y botones publicados. La URL de la tabla de tokens más reciente ofrece una instantánea dinámica, no garantiza una versión del paquete.
Sistema de diseño Infor Un formulario empresarial con identidad de registro estable
Mantén el identificador del equipo separado de la solicitud editable
Infor denomina SoHo a su lenguaje de diseño y presenta IDS como una solución centrada en las funciones empresariales y la productividad. El ejemplo aplica ese enfoque a una solicitud de mantenimiento: el identificador del activo permanece fijo, mientras que el resumen del trabajo, el contacto y la urgencia son los datos editables de la tarea.
El ID 02006 es deliberadamente una cadena de texto. Convertirlo en número eliminaría el cero inicial y cambiaría su identidad. El ejemplo nativo de IDS usa un campo de entrada de solo lectura para mantener visible el contexto del registro sin que parezca un campo vacío o no disponible.
Sistema de diseño Infor Los alias del tema se resuelven mediante primitivas
Usa el alias que corresponda a cada función
El tema público capturado define action-default mediante blue-60, el primer plano predeterminado mediante neutral-100 y el primer plano secundario mediante neutral-80. Esta estructura de dos capas permite que un formulario personalizado se integre con el tema sin duplicar colores literales por toda la aplicación.
La página pública de tokens ofrece los modos Núcleo, Oscuro y Contraste. Los valores de esta guía corresponden a una captura de la hoja de estilos claro/núcleo. La vista previa no afirma que un valor hexadecimal azul sea universal en los tres modos; un componente de producción debe usar su alias semántico y dejar que el tema seleccionado lo resuelva.
Sistema de diseño Infor Una escala concreta sin inventar un sistema de densidad
El espaciado, la tipografía y el radio tienen conjuntos de alias distintos
Los alias de espaciado incluyen xs, que corresponde a la primitiva de 8 píxeles; sm, a 16; md, a 24; y lg, a 32. El componente nativo proporcionado en CSS usa md para el margen interior principal y sm entre campos. Así, la intención queda clara en el código fuente y se conservan los valores concretos en la tabla de referencia.
La familia tipográfica predeterminada es Source Sans Pro, y Source Code Pro se usa para el tipo monoespaciado. El alias font-size-default corresponde a la entrada de 16 píxeles de la escala. Cargar la biblioteca no elimina la necesidad de proporcionar los archivos de fuentes descritos en el README del paquete. La vista previa sin conexión usa una fuente alternativa común.
Los nombres de radio son distintos de los nombres de espaciado: radius-sm corresponde a 8 píxeles, mientras que space-sm corresponde a 16. Reutilizar de memoria un número solo porque ambos nombres terminan en sm da un resultado incorrecto.
Sistema de diseño Infor Estados de entrada con significados distintos
Solo lectura, deshabilitado y con cambios no son intercambiables
Los ejemplos oficiales incluyen readonly, disabled, dirty-tracker, clearable, uppercase, lowercase y alineación lógica del texto. La solicitud solo necesita readonly para la identidad del activo y clearable para el resumen del trabajo. No activa la conversión automática de mayúsculas o minúsculas en un correo electrónico ni transforma silenciosamente una descripción de texto libre.
El ejemplo nativo de entrada declara validate="email required" para el campo de contacto. La declaración de tipos publicada proporciona value, focus() y checkValidation(). Como checkValidation devuelve void, el código no lo confunde con un resultado booleano de validez del formulario; en su lugar, comprueba por separado las condiciones que permiten preparar el registro local.
Solo lectura mantiene un activo fijo visible y legible.
Deshabilitado significa que el campo no se puede usar en este momento.
El seguimiento de cambios describe la diferencia respecto a un valor inicial; no es un estado de éxito ni de validación.
Sistema de diseño Infor El seguimiento de cambios y la validación tienen funciones distintas
Registra las ediciones sin considerarlas datos válidos
La galería oficial de entradas de IDS muestra dirty-tracker="true" en un campo con un valor inicial. El seguimiento de cambios se ocupa de las modificaciones de un campo; es independiente del atributo validate, cuyas reglas email y required describen qué entradas son aceptables. Un campo de contacto modificado aún puede contener una dirección no válida.
La declaración publicada de Input incluye checkValidation(): void. Llámalo para activar el comportamiento de validación del componente, no como condición booleana que autoriza una acción de orden de trabajo. El ejemplo nativo también comprueba los valores obligatorios de la aplicación antes de generar un borrador. El resumen con clearable y el activo de solo lectura muestran otras dos funciones independientes de la entrada.
El seguimiento de cambios es una función documentada, pero no está activada en esta vista previa. La demostración borra el resumen preparado tras las ediciones y devuelve el foco al campo del resumen del trabajo; no indica que se haya guardado una solicitud de mantenimiento.
Sistema de diseño Infor Usa un espacio de trabajo en dos partes sin ocultar el formulario
Primero el formulario, después el contexto
La vista previa combina un formulario con una tarjeta compacta de contexto del equipo y un diagrama original sencillo de la máquina. El orden de lectura principal sigue siendo encabezado, campos, acciones y resultado. En pantallas estrechas, el contexto se desplaza debajo del formulario en lugar de comprimir los campos en columnas ilegibles.
Los ejemplos de la biblioteca usan ids-layout-grid con atributos de columna específicos para cada punto de quiebre. Este ejemplo mantiene deliberadamente un diseño adaptable más sencillo; el ancho máximo y el punto de quiebre son valores de la aplicación. Lo que se muestra aquí son los espacios basados en tokens y las etiquetas de controles nativos.
Sistema de diseño Infor Fija el paquete nativo e inicialízalo antes de leer valores
El paquete publicado es el punto de entrada fiable
El paquete verificado indica la versión 1.17.1, una entrada de módulo ES en enterprise-wc.js y el repositorio de origen actual alojado por Infor. Por tanto, la antigua ubicación de GitHub no es una instrucción de instalación fiable. El código importa el paquete publicado, inserta la composición y espera a que se definan los elementos personalizados antes de asociar el comportamiento.
Los ejemplos oficiales activos contienen URL de fragmentos específicas de cada compilación. Copiar el nombre de un fragmento al azar en una aplicación la vincularía a un artefacto de despliegue; la entrada del paquete permite que el empaquetador resuelva esas dependencias. Esta guía verifica las declaraciones públicas de métodos y mantiene el ejemplo del navegador claramente separado de cualquier afirmación de compilación nativa.
Instala el paquete con versión fijada en la plantilla Vanilla de Vite e incluye la fuente documentada según la política de recursos de tu aplicación.
Usa la entrada proporcionada y CSS, espera a que se definan los elementos personalizados y luego asocia las acciones principal y de restablecimiento.
Prueba un resumen vacío, un correo electrónico mal formado, un borrador local válido y una edición posterior; asegúrate de que la instantánea mostrada nunca quede desactualizada.
Ejemplos de componentes del sistema de diseño sistema de diseño Infor
Muestra interactiva independiente completa
Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación independiente de HTML/CSS mediante valores verificados de tokens IDS core/light y una fuente del sistema como alternativa. No es el entorno de ejecución nativo de 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>
El activo 02006 se mantiene como cadena. El ejemplo nativo de IDS, no este formulario HTML, ejercita el registro de elementos personalizados y checkValidation(); ninguno de los dos crea una orden de mantenimiento.
Identificador de solo lectura, resumen obligatorio y validación del contacto
La validación de entrada de IDS se invoca explícitamente; las comprobaciones de la aplicación impiden un borrador local vacío. El texto del usuario se representa con 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)}
Un componente no disponible usa disabled, no solo un estilo atenuado.
04
Configuración del agente sistema de diseño Infor
Punto de partida para la implementación
Entrada completa y hoja de estilos para un esqueleto vanilla de Vite con #app. La versión del paquete y los métodos se comprobaron en el paquete publicado; aquí no se ejecutó la compilación. Proporciona Source Sans Pro desde una fuente de tipografías aprobada. La vista previa integrada es una implementación nativa independiente de 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)}
Una instrucción para tu proyecto
Instrucción para el agente
Crea un borrador de mantenimiento de Infor IDS con los alias verificados del tema claro y la estructura documentada de entradas y botones. Mantén el identificador del activo como cadena y en modo de solo lectura. Valida los campos editables, borra los resultados obsoletos después de las ediciones y distingue un borrador local de una orden de trabajo enviada. No trates checkValidation() como si devolviera un valor booleano.
05
Fuentes y alcance de sistema de diseño Infor
Guía independiente de OpenDesign. El activo y el flujo de trabajo son ficticios; no se envía nada. El código nativo hace referencia al paquete 1.17.1 comprobado, mientras que los valores de los tokens se identifican como una instantánea independiente y actual del tema core/light.
