Monte um formulário empresarial de manutenção com estados reais de entrada do IDS, aliases de tema e um identificador de recurso exato. Consulte os tokens do tema público atual, um pacote Web Components fixado em uma versão específica e um fluxo local de rascunho com validação e redefinição.
Interpretação independente de HTML/CSS, baseada em valores verificados dos tokens de IDS core/light e em uma fonte alternativa do sistema. Não é o runtime nativo do IDS. · Referência de implementação
02
Referência de design sistema de design Infor
A folha de estilos de tema da tabela pública de tokens da Infor consultada nesta revisão, além de ids-enterprise-wc 1.17.1 e exemplos oficiais de entrada e botão publicados. O URL mais recente da tabela de tokens aponta para uma versão atualizada continuamente, não garante uma versão específica do pacote.
Sistema de design Infor Um formulário empresarial com identidade de registro estável
Mantenha o identificador do equipamento separado da solicitação editável
A Infor chama sua linguagem de design de SoHo e posiciona o IDS em torno de funções empresariais e produtividade. Este exemplo aplica essa ênfase a uma solicitação de manutenção: o identificador do ativo permanece fixo, enquanto o resumo do trabalho, o contato e a urgência são as informações editáveis da tarefa.
O ID 02006 é intencionalmente uma string. Convertê-lo em número removeria o zero à esquerda e alteraria sua identidade. O exemplo nativo do IDS usa um campo de entrada somente leitura, para que o contexto do registro permaneça visível sem parecer ausente ou indisponível.
Sistema de design Infor Aliases de tema resolvidos por meio de primitivos
Use o alias adequado à finalidade
O tema público capturado define action-default por meio de blue-60, foreground-default por meio de neutral-100 e foreground-secondary por meio de neutral-80. Essa estrutura de duas camadas mantém um formulário personalizado consistente com o tema, sem duplicar cores literais pela aplicação.
A página pública de tokens oferece os modos Core, Dark e Contrast. Os valores deste guia vêm de uma captura da folha de estilos Core/light. A prévia não afirma que um valor hexadecimal de azul seja universal nos três modos; um componente em produção deve consumir seu alias semântico e deixar que o tema selecionado resolva a cor.
Sistema de design Infor Uma escala concreta sem um sistema de densidade inventado
Espaçamento, tipografia e raio têm conjuntos de aliases distintos
Os aliases de espaçamento incluem xs no primitivo de 8 pixels, sm em 16, md em 24 e lg em 32. O CSS nativo fornecido usa md para o recuo principal e sm entre os campos. Assim, a intenção fica visível no código-fonte, enquanto a tabela de referência mantém os valores concretos.
A família de fontes padrão é Source Sans Pro, com Source Code Pro para texto monoespaçado. O alias font-size-default corresponde à entrada de 16 pixels na escala. Carregar a biblioteca não dispensa o fornecimento dos arquivos de fontes descritos no README do pacote. A prévia offline usa uma fonte alternativa comum.
Os nomes dos raios são distintos dos nomes de espaçamento: radius-sm corresponde a 8 pixels, enquanto space-sm corresponde a 16. Reutilizar um número de memória só porque ambos os nomes terminam em sm leva ao valor incorreto.
Sistema de design Infor Estados de campo de entrada com significados distintos
Somente leitura, desativado e alterado não são estados intercambiáveis
Os exemplos oficiais incluem readonly, disabled, dirty-tracker, clearable, uppercase, lowercase e alinhamento lógico do texto. O exemplo de solicitação precisa apenas de readonly para a identidade do ativo e clearable para o resumo do trabalho. Ele não ativa a conversão automática de maiúsculas ou minúsculas em um e-mail nem transforma silenciosamente uma descrição de texto livre.
O exemplo nativo de campo de entrada declara validate="email required" para o campo de contato. A declaração de tipo publicada fornece value, focus() e checkValidation(). Como checkValidation retorna void, o código não o interpreta incorretamente como um resultado booleano de validade do formulário; em vez disso, verifica separadamente as condições que permitem preparar o registro local.
Somente leitura mantém visível e legível um ativo fixo.
Desativado significa que o campo não pode ser usado no momento.
O rastreamento de alterações descreve a divergência em relação ao valor inicial; não é um estado de sucesso ou validação.
Sistema de design Infor O rastreamento de alterações e a validação têm contratos diferentes
Rastreie as edições sem tratá-las como dados válidos
A galeria oficial de campos de entrada do IDS demonstra dirty-tracker="true" em um campo com valor inicial. O rastreamento de alterações diz respeito às edições de um campo; é independente do atributo validate, cujas regras email e required definem quais entradas são aceitáveis. Um campo de contato alterado ainda pode conter um endereço inválido.
A declaração publicada de Input expõe checkValidation(): void. Chame-o para acionar o comportamento de validação do componente, não como condição booleana para autorizar uma ação de ordem de serviço. O exemplo nativo também verifica os valores obrigatórios da aplicação antes de gerar um rascunho. O resumo clearable e o ativo readonly demonstram duas outras capacidades independentes do campo de entrada.
O rastreamento de alterações é uma extensão documentada, mas não está ativado nesta prévia. A demonstração limpa o resumo preparado após as edições e redefine o foco para o campo de resumo do trabalho; ela não informa que uma solicitação de manutenção foi salva.
Sistema de design Infor Use uma área de trabalho em duas partes sem ocultar o formulário
Formulário primeiro, contexto em seguida
A prévia combina um formulário com um cartão compacto de contexto do equipamento e um diagrama original simples da máquina. A ordem principal de leitura permanece: título, campos, ações, resultado. Em telas estreitas, o contexto passa para baixo do formulário, em vez de comprimir os campos em colunas difíceis de ler.
Os exemplos da biblioteca usam ids-layout-grid com atributos de coluna específicos para cada breakpoint. Este exemplo mantém intencionalmente um layout responsivo mais simples; sua largura máxima e seu breakpoint são valores da aplicação. Os aspectos demonstrados são os espaçamentos baseados em tokens e os rótulos de controles nativos.
Sistema de design Infor Fixe a versão do pacote nativo e inicialize antes de ler os valores
O pacote publicado é o ponto de entrada confiável
O pacote verificado identifica a versão 1.17.1, uma entrada de módulo ES em enterprise-wc.js e o repositório de origem atual hospedado pela Infor. Portanto, o antigo endereço do GitHub não é uma instrução de instalação confiável. O código importa o pacote publicado, insere a composição e aguarda a definição dos elementos personalizados antes de associar os comportamentos.
Os exemplos oficiais ao vivo incluem URLs de chunks específicas da compilação. Copiar um nome de chunk aleatório para uma aplicação a vincularia a um artefato de implantação; usando a entrada do pacote, o bundler resolve essas dependências. Este guia verifica as declarações públicas dos métodos e distingue claramente o exemplo no navegador de uma alegação de compilação nativa.
Instale o pacote com versão fixada no scaffold vanilla do Vite e inclua a fonte documentada de acordo com a política de recursos da aplicação.
Use a entrada fornecida e CSS, aguarde os elementos personalizados e, em seguida, associe as ações principal e de redefinição.
Teste um resumo vazio, um e-mail malformado, um rascunho local válido e uma edição posterior; confirme que o resumo exibido nunca fica desatualizado.
Exemplos de componentes do sistema de design sistema de design Infor
Exemplo interativo completo e independente
Salve o documento completo como index.html e abra-o em um navegador. Interpretação independente de HTML/CSS, baseada em valores verificados de tokens IDS core/light e em uma fonte de sistema alternativa. Não é o ambiente de execução nativo do 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>
O ativo 02006 permanece uma string. O exemplo nativo do IDS, não este formulário HTML, demonstra o registro de elementos personalizados e checkValidation(); nenhum dos dois cria uma ordem de manutenção.
Identificador somente leitura, resumo obrigatório e validação de contato
A validação de entrada do IDS é chamada explicitamente; verificações da aplicação impedem um rascunho local vazio. O texto do usuário é renderizado com 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)}
Um componente indisponível usa o estado desativado, em vez de depender apenas de um estilo esmaecido.
04
Configuração do agente sistema de design Infor
Ponto de partida para implementação
Arquivo de entrada e folha de estilos completos para uma estrutura Vite vanilla com #app. A versão do pacote e os métodos foram verificados no pacote publicado; a compilação não foi executada aqui. Disponibilize Source Sans Pro por meio de uma fonte aprovada. A pré-visualização incorporada é uma implementação nativa independente 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)}
Um prompt para seu projeto
Prompt para agente de IA
Crie um rascunho de manutenção do Infor IDS usando os aliases verificados do tema claro e a anatomia documentada de campos de entrada e botões. Mantenha o identificador do ativo como string e somente leitura. Valide os campos editáveis, limpe os resultados desatualizados após as edições e diferencie um rascunho local de uma ordem de serviço enviada. Não trate checkValidation() como se retornasse um Boolean.
05
Fontes e escopo de sistema de design Infor
Guia independente de OpenDesign. O ativo e o fluxo de trabalho são fictícios; nada é enviado. O código nativo faz referência ao pacote 1.17.1 verificado, enquanto os valores dos tokens são identificados como um retrato separado e atual do tema core/light.
