# Sistema de design SAP Fiori ## Prévia da interface do sistema de design SAP Fiori Edite uma requisição, valide a quantidade, altere a densidade e prepare um resumo local. ## Referência de design do sistema de design SAP Fiori Parâmetros de origem Morning Horizon (sap_horizon) e documentação atual dos UI5 Web Components. Os nomes @sap menos abaixo são parâmetros de origem; os estilos do navegador usam as propriedades personalizadas --sap correspondentes. As dimensões protegidas são observações, não pontos de substituição recomendados. ### Papéis de cor Horizon | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | @sapBrandColor | #0070f2 | Função de marca principal. | | @sapBackgroundColor | #f5f6f7 | Plano de fundo da página. | | @sapBaseColor | #ffffff | Superfície base. | | @sapTextColor | #131e29 | Texto principal. | | @sapNegativeColor | #aa0808 | Estado negativo. | | @sapCriticalColor | #e76500 | Papel crítico; o texto tem um papel derivado separado. | | @sapPositiveColor | #256f3a | Estado positivo. | | @sapInformationBackground | #e1f4ff | Superfície de mensagem informativa. | | @sapWarningBackground | #fff8d6 | Superfície de mensagem crítica. | ### Tipografia e geometria | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | @sapFontFamily | "72", "72full", Arial, Helvetica, sans-serif | Pilha de fontes publicada. | | @sapFontSize | 0.875rem | Tamanho base. | | @sapContent_LineHeight | 1.5 | Multiplicador de altura de linha do conteúdo. | | @sapElement_Height | 2.25rem | Dimensão regular protegida. | | @sapElement_Compact_Height | 1.625rem | Dimensão compacta protegida. | | @sapElement_LineHeight | 2.75rem | Caixa de linha regular protegida. | | @sapElement_Compact_LineHeight | 2rem | Caixa de linha compacta protegida. | | @sapButton_BorderCornerRadius | 0.5rem | Parâmetro de raio dos cantos do botão. | | @sapContent_FocusWidth | 0.125rem | Largura do foco. | | @sapContent_FocusColor | #0032a5 | Cor do foco. | ### Configuração de tema e densidade | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | sap_horizon | Morning Horizon | Tema padrão incorporado aos componentes. | | sap_horizon_dark | Evening Horizon | Temas adicionais exigem recursos. | | sap_horizon_hcb / sap_horizon_hcw | High contrast black / white | Temas separados de alto contraste compatíveis. | | Assets.js | One import per component library used | Registre os recursos do tema adicional. | | setTheme(name) | @ui5/webcomponents-base/dist/config/Theme.js | Altere o tema pela API pública API. | ### Contrato do seletor | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | ui5-select value | Matches option value or text | Não misture com as flags de opção selecionada. | | selectedOption | Read-only IOption | Leia o objeto da opção selecionada. | | change | event.detail.selectedOption | Alteração de seleção confirmada. | | live-change | Navigation preview | Não a trate como uma escolha de negócio confirmada. | | accessible-name-ref | ID of visible labeling element | Associe o texto visível ao controle. | ### Entrada e feedback | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | value | String | Converta explicitamente a entrada numérica. | | input | Each keystroke | Use para totais estimados em tempo real. | | change | Enter or focusout | Diferente da entrada a cada tecla. | | value-state | None / Negative / Critical / Information / Positive | Nomes de estado no API atual. | | slot="valueStateMessage" | One root element | Explicação específica do campo. | ### Faixa de mensagem | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | design | Information / Positive / Critical / Negative | Mensagem semântica do aplicativo. | | hide-close-button | Boolean attribute | Mantenha visível a explicação obrigatória. | | default slot | Prefer text content | Evite transformar uma faixa em um painel complexo. | ## Guia completo do sistema de design SAP Fiori Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## O design do sistema de design SAP Fiori e a implementação com UI5 têm escopos diferentes ### Um ponto de partida concreto > SAP Fiori descreve uma experiência de usuário empresarial. Esta referência escolhe UI5 Web Components para um exemplo implementável de solicitação de compra. Isso não significa que a instalação desses componentes crie um aplicativo SAPUI5, um plano de página do Fiori elements ou uma transação empresarial SAP autorizada. O pacote principal de componentes fornece Input, Select e Button. Os componentes Fiori de nível mais alto estão em um pacote separado. Importar apenas os módulos usados neste exemplo deixa explícito o ponto de entrada e evita sugerir uma CDN não compatível com todos os componentes. Consulte a especificação de apoio ## Sistema de design SAP Fiori: use parâmetros Horizon nomeados em vez de uma paleta azul genérica ### Superfícies e papéis de estado Morning Horizon define a página com uma superfície cinza-clara e usa uma superfície base branca. O azul da marca e a cor do texto são parâmetros distintos. Os papéis negativo, crítico, positivo e informativo descrevem significados, não uma lista de cores decorativas para alternar entre cartões. A prévia usa uma faixa informativa para o resumo preparado porque a preparação local não equivale à aprovação de uma compra. O preço do item, os centros de custo e as anotações de aprovação são dados de exemplo originais. Eles nunca devem ser interpretados como regras de negócio fornecidas pela SAP. Consulte a especificação de apoio ## Sistema de design SAP Fiori: Compacto é uma configuração de componente, não uma captura de tela menor ### Aplique a densidade a uma região significativa O UI5 permite usar um marcador de compactação na raiz, no body, em uma região ou em um componente. O atributo data-ui5-compact-size e a classe ui5-content-density-compact são mecanismos públicos. Alterar o marcador dinamicamente não exige um API de densidade separado. Use controles compactos em uma tarefa densa de desktop somente quando a interação continuar adequada. A interpretação incorporada reduz o espaçamento entre controles e linhas, mas mantém as mesmas informações. No layout estreito, as regiões são empilhadas em vez de reduzir todos os rótulos e botões. ```
``` Referência de código Consulte a especificação de apoio ## Sistema de design SAP Fiori: a família 72 e seu comportamento de carregamento ### A disponibilidade das fontes faz parte da configuração O tema Horizon especifica 72 e 72full antes das fontes alternativas. A documentação do UI5 explica como desativar o carregamento padrão de fontes e hospedá-las localmente. A entrada de conveniência FontFace.css está marcada como experimental; por isso, fixe e verifique novamente seu caminho se escolher essa opção. A prévia independente usa Arial como alternativa explícita para uso offline. O exemplo nativo de UI5 usa a variável font-family publicada. Essa distinção evita afirmar que uma captura de tela visualmente semelhante, gerada com uma fonte alternativa, comprova que os recursos de fonte da SAP foram carregados. Consulte a especificação de apoio ## Sistema de design SAP Fiori: um Select tem alterações confirmadas e provisórias ### Escolha uma única estratégia de seleção controlada O valor de Select corresponde ao valor ou ao texto de uma Option. Não é recomendado combinar um valor de Select com flags selected nas Options; um valor inexistente não seleciona nenhuma opção. O exemplo inicializa uma opção real de centro de custo e lê o valor de Select ao preparar o resultado. O evento change contém a opção selecionada. O evento live-change também é disparado ao navegar pelas opções e ao voltar atrás com Escape. Use a seleção confirmada para dados de negócio e reserve as alterações provisórias para prévias. - Importe os registros de Select e Option antes de renderizar suas tags. - Associe o rótulo visível do centro de custo usando accessible-name-ref. - Mantenha value como a única estratégia de seleção neste exemplo. Consulte a especificação de apoio ## Sistema de design SAP Fiori: a entrada numérica ainda requer validação do aplicativo ### O estado e a mensagem do valor devem estar associados O valor de Input é uma string, mesmo quando o tipo de entrada é Number. Converta-o e verifique se é um número inteiro finito dentro dos limites antes de multiplicá-lo pelo preço de exemplo. Um valor vazio não pode ser aceito como zero. O estado de erro semântico atual é Negative, não um enum Error inventado. O slot valueStateMessage fornece um elemento raiz que contém uma explicação específica. O total em tempo real escuta o evento input; o resumo preparado só é atualizado quando o usuário aciona a ação. 1. Leia o título e a string numérica dos respectivos componentes. 2. Exija um título e uma quantidade inteira de 1 a 20 neste exemplo. 3. Marque os controles afetados como Negative e mantenha os valores digitados. 4. Prepare o resumo somente depois que ambas as condições forem atendidas. Consulte a especificação de apoio ## Sistema de design SAP Fiori: mantenha o resultado descritivo e local ### Use uma faixa para um resultado conciso MessageStrip oferece designs semânticos e um controle para fechar. Uma explicação obrigatória pode ocultar o botão de fechar para que continue disponível. É melhor manter o slot padrão como texto, sem expandi-lo para um formulário ou painel. O resumo inclui título, quantidade, total de exemplo e centro de custo. A frase final explica que nada foi enviado. Um serviço real substituiria esta etapa local por uma solicitação autorizada e uma resposta com o status real do backend. Consulte a especificação de apoio ## Sistema de design SAP Fiori: recursos de tema e registro de módulos ### A seleção de tema requer os recursos correspondentes Morning Horizon é o padrão documentado e está incorporado aos componentes. Temas adicionais exigem o módulo Assets.js para cada biblioteca usada. Em seguida, setTheme pode selecionar Evening Horizon ou uma das variantes de alto contraste. Escolher um nome de tema escuro sem verificar os recursos carregados não constitui uma integração completa. O ponto de entrada fornecido registra cada elemento personalizado antes de criar a marcação. O Vite processa importações ES dinâmicas e recursos JSON. Compile o projeto nativo e verifique fontes, carregamento do tema e comportamento do teclado separadamente do exemplo offline HTML. Consulte a especificação de apoio ## Exemplos de componentes do sistema de design SAP Fiori ### Exemplo interativo completo e independente Salve o documento completo como index.html e abra-o em um navegador. Interpretação offline HTML dos parâmetros Morning Horizon e da composição de formulário UI5. Um exemplo de pacote nativo é incluído separadamente. ``` Fiori purchase request
PProcurement workspaceSample environment

Purchase request

PR-DRAFT · Workplace equipment

Draft · not submitted

Request details

Whole number from 1 to 20.

27-inch studio monitorEquipment · Item 100240
€320 / unit
Estimated line total€640
Complete the draft before preparing the summary.

HTML interpretation of SAP Morning Horizon · UI5 native integration provided in guide · No SAP transaction created

``` Referência de código - A chave de densidade deste documento HTML é uma interpretação. A entrada de UI5 demonstra o marcador compacto real, os elementos personalizados registrados e os recursos Horizon. ### Solicitação de compra Horizon com quantidades validadas Input, Select/Option, Button e MessageStrip compõem um resumo local da requisição. Os totais atualizados a cada tecla permanecem separados do resultado preparado. ``` // main.js in a Vite vanilla project. index.html contains
. 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 = `

Purchase request

Prepare a local requisition summary. No SAP transaction is created.

Request title

Enter a title for this request.

Cost center

Design · CC-240 Research · CC-360

Monitor quantity

Use a whole number from 1 to 20.

Estimated line total: €640

Prepare summary Toggle compact controls Complete the draft before preparing the summary.
`; 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')); ``` Referência de código - A regra de quantidade, o preço de €320 por item e os centros de custo são dados de aplicativo inventados, não políticas da SAP. - UI5 Web Components são uma implementação dos padrões Fiori; isto não é um aplicativo SAPUI5 completo nem um plano de página do Fiori elements. - Nenhuma transação SAP é criada. A validação da prévia offline não implica a compilação das dependências nativas. ## Configuração do agente do sistema de design SAP Fiori ### Ponto de partida para implementação Substitua o main.js do Vite pelo exemplo completo. A documentação do UI5 requer um empacotador de módulos ES; não oferece uma CDN oficial com todos os componentes. ``` npm create vite@latest fiori-request -- --template vanilla cd fiori-request npm install npm install @ui5/webcomponents @ui5/webcomponents-base npm run dev ``` ### Um prompt para seu projeto ``` Crie uma solicitação de compra Fiori usando os componentes Input, Select, Button e MessageStrip do UI5 Web Components com o tema Horizon. Preserve a validação numérica, o estado de valor negativo correto, a densidade compacta explícita e o comportamento transparente do resumo local. ``` ## SAP Fiori Fontes e escopo do sistema de design Referência independente de OpenDesign. Exemplo com UI5 Web Components, não uma transação SAP implantada nem uma aplicação completa do Fiori elements. - Primeiros passos Configuração oficial do pacote e do empacotador. - Fonte do Horizon Instantâneo dos parâmetros do tema. - Configuração Nomes de temas e carregamento de recursos. - Densidade Marcadores compactos e RTL. - Fontes Orientações para carregamento em 72 e fontes locais. - Input Estados de valor e eventos de entrada. - Select Estratégias de seleção e eventos. - MessageStrip Estrutura das mensagens semânticas. - Origem dos botões Implementação nativa do botão. ## SAP Fiori Recursos relacionados ao sistema de design ### SEEK Braid Entenda o Braid por meio de uma composição original para busca de empregos: variáveis com escopo de tema, quatro breakpoints reais, texto contextual, botões com tonalidades distintas e um campo controlado que explica a validação em vez de desativar a ação. ### Segment Evergreen Uma referência do Evergreen com valores reais do tema, entrada controlada de tags, correspondência de regras em tempo real, alternativa de recuperação para estados vazios e uma caixa de diálogo nativa para revisão. ### Semi Design Crie uma configuração sequencial do espaço de trabalho com os componentes Steps básicos recomendados pelo Semi, Input e Switch controlados, tokens reais do tema e uma escolha explícita entre os pacotes React 18 e React 19. - [Referência de implementação](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Fonte](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Fonte](https://ui5.github.io/webcomponents/docs/advanced/configuration/) - [Fonte](https://ui5.github.io/webcomponents/components/Select/) - [Fonte](https://ui5.github.io/webcomponents/components/Input/) - [Fonte](https://ui5.github.io/webcomponents/components/MessageStrip/) - [Consulte a especificação de apoio](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/) - [Consulte a especificação de apoio](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Referência de código](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/) - [Consulte a especificação de apoio](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/) - [Consulte a especificação de apoio](https://ui5.github.io/webcomponents/docs/advanced/fonts/) - [Consulte a especificação de apoio](https://ui5.github.io/webcomponents/components/Select/) - [Consulte a especificação de apoio](https://ui5.github.io/webcomponents/components/Input/) - [Consulte a especificação de apoio](https://ui5.github.io/webcomponents/components/MessageStrip/) - [Consulte a especificação de apoio](https://ui5.github.io/webcomponents/docs/advanced/configuration/) - [Referência de código](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Referência de código](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/) - [Primeiros passos Configuração oficial do pacote e do empacotador.](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/) - [Fonte do Horizon Instantâneo dos parâmetros do tema.](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Configuração Nomes de temas e carregamento de recursos.](https://ui5.github.io/webcomponents/docs/advanced/configuration/) - [Densidade Marcadores compactos e RTL.](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/) - [Fontes Orientações para carregamento em 72 e fontes locais.](https://ui5.github.io/webcomponents/docs/advanced/fonts/) - [Input Estados de valor e eventos de entrada.](https://ui5.github.io/webcomponents/components/Input/) - [Select Estratégias de seleção e eventos.](https://ui5.github.io/webcomponents/components/Select/) - [MessageStrip Estrutura das mensagens semânticas.](https://ui5.github.io/webcomponents/components/MessageStrip/) - [Origem dos botões Implementação nativa do botão.](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/packages/main/src/Button.ts)