Inserção de HTML personalizado e JavaScript para análises e integrações

Adicione HTML personalizado e o ` JavaScript ` no nível do aplicativo para oferecer suporte a análises, rastreamento e integrações. Esse recurso permite que você execute scripts em todo o aplicativo sem as limitações dos iframes e os aplique de maneira consistente em toda a interface do usuário.

Sobre esta tarefa

Use esta tarefa para adicionar HTML personalizado e JavaScript que sejam executados no nível do aplicativo. Esse recurso é útil em situações em que os scripts precisam ser carregados uma única vez e aplicados a todas as páginas. Os exemplos a seguir destacam alguns casos de uso comuns.

Incorporar estruturas de análise (por exemplo, Segment.js ).
Ativando o rastreamento de uso entre páginas.
Integração de ferramentas e serviços corporativos.
Carregando scripts compartilhados que devem ser executados globalmente.

As seguintes restrições se aplicam ao adicionar HTML personalizado e JavaScript.

O arquivo HTML deve ser um trecho estático e não deve utilizar componentes do Angular.
Scripts inválidos ou não suportados afetam o comportamento ou o desempenho do aplicativo.
As bibliotecas externas devem estar acessíveis em tempo de execução.

O sistema insere o código HTML no quadro do aplicativo que envolve todas as páginas, fora dos iframes do aplicativo. Essa configuração permite que os scripts sejam executados na inicialização e sejam aplicados de maneira consistente em todo o aplicativo.

Procedimento

Crie um arquivo HTML que contenha sua marcação e seus scripts personalizados.
Por exemplo, shell-extensions.html.
Em orderhub-code, crie o shell-ui/assets/codeFragments diretório.
Coloque o arquivo HTML no diretório.
Opcional: Se o seu HTML fizer referência a imagens ou outros recursos estáticos, crie o src/custom/assets/images diretório.
Opcional: Coloque quaisquer arquivos complementares no diretório.
No seu projeto, acesse ou crie o shell-ui/assets/app-bootstrap-config.json arquivo.

Para realizar o teste localmente, siga as etapas a seguir.

No arquivo app-bootstrap-config.json , especifique o nome do arquivo HTML.
```
"extensionsFileName": "shell-extensions.html"
```

Teste suas alterações copiando o arquivo HTML para o contêiner base.

docker exec om-orderhub-base bash -c 'mkdir -p /opt/app-root/src/shell-ui/assets/custom'

docker cp shell-ui/assets/. om-orderhub-base:/opt/app-root/src/shell-ui/assets/custom/

Para fazer a implantação, no app-bootstrap-config.json arquivo, especifique o caminho para o shell-extensions.html arquivo.
```
{
  "extensionsFileName": "/order-management-customization/shell-ui/assets/codeFragments/shell-extensions.html"
}
```

Compile os arquivos de personalização.
No Self Service, faça o upload e a implantação do pacote de personalização.

Resultados

Quando o Order Hub é iniciado, o sistema carrega o arquivo HTML configurado e o insere no quadro do aplicativo. Os scripts são executados na inicialização e são aplicados em todo o aplicativo.

Exemplo

O exemplo a seguir mostra um banner simples inserido e uma imagem opcional.

<script>
  console.log("Script executed");

  // Create and insert banner immediately
  (function() {
    const banner = document.createElement("div");
    banner.innerText = "Custom extension loaded";
    banner.style.backgroundColor = "#0078d4";
    banner.style.color = "white";
    banner.style.padding = "8px";
    banner.style.fontSize = "14px";
    banner.style.textAlign = "center";
    banner.style.fontWeight = "bold";

    // Insert at the top of the body
    if (document.body) {
      document.body.prepend(banner);
      console.log("Banner inserted successfully");
    } else {
      console.warn("document.body not available yet");
    }
  })();
</script>
<!DOCTYPE html>
<html>
<head>
  <title>Custom Injection</title>
</head>

<body>
  <div style="padding: 10px;">
    <h3>Custom branding</h3>
  </div>