Origem Personalizada para Logotipo do Site

daniel.giacomelli · Abril 12, 2022, 10:29pm

Na página de Configurações do Site, é possível definir o logotipo que será exibido no topo do site. Este é um ótimo recurso para deixar o sistema com a cara da sua empresa!

No entanto, em alguns casos, pode ser necessário alterar o logotipo conforme as regras de negócio do sistema que está em execução. Um bom exemplo disso, é quando existem rotinas que modificam o ambiente de trabalho do usuário, como trocar a Empresa ou a Filial em que se está trabalhando.

Neste tópico, vou mostrar uma maneira de substituir o logotipo padrão do sistema por um logotipo cujo o caminho será retornado de uma variável global do sistema.

O exemplo completo implementado neste tópico pode ser conferido neste link.

Variável Global

A primeira coisa a se fazer é definir uma Variável Global para receber a URL do logotipo. Neste exemplo, vamos criar uma variável chamada “Logo”.

CSS Público

O próximo passo é suprimir o logotipo padrão. Faremos isso desabilitando o atributo background do elemento que hospeda o logotipo.

Para isso, basta adicionar script abaixo no CSS Público do sistema:

.logo > div:not(.custom) {
    background: none!important;
}

Note que estamos desabilitando o atributo background apenas quando o elemento não possui a classe custom. Como essa classe não está presente no elemento, o estilo será aplicado de imediato. Mais adiante, vamos alterar o caminho do logotipo deste elemento, e aí então vamos adicionar a classe custom a ele, habilitando novamente o atributo background. Este tratamento foi adicionado apenas para evitar que o logotipo padrão seja exibido brevemente enquanto a pagina está sendo carregada

JavaScript Público

Agora vamos ao código que vai trocar a URL do logotipo! Adicione o código abaixo no JavaScript Público do sistema:

function showCustomLogo(logoPath){
    // Se o caminho do logo não foi informado por parâmetro,
    // busca das variáveis globais
    if (!logoPath) {
        var markHelper = new JsonMarkHelper(__globalMarks);
        logoPath = markHelper.getValue('GVAR', 'LATROMI.Logo');
    }
    // Carrega o logotipo
    if (logoPath) {
        var divLogo = document.querySelector('.logo > div');
        divLogo.style.backgroundImage = "url('" + logoPath + "')";
        //
        // A classe ".custom" faz com que o logotipo seja exibido
        divLogo.classList.add('custom');
    }
}
window.addEventListener('load', function(e) {
    showCustomLogo();
});

Note que esse código recebe a URL da imagem e caso essa não seja informada, a URL será buscada da variável global “Logo”.

Depois de definir qual será a URL usada no logotipo, ela é atribuída ao backgroundImage do elemento e em seguida a classe custom é adicionada para desfazer o código CSS que utilizamos para desabilitar o atributo background.

Por fim, a função que exibe o logotipo customizado (showCustomLogo) é chamada no evento “Load” da janela do navegador. Isso será executado em todas as páginas.

Lembre-se de alterar o nome e o proprietário da Variável Global no código JavaScript. Neste exemplo está sendo usado "LATROMI.Logo".

Até este ponto, a lógica de troca de logotipo utilizando uma variável global está pronta! O que vem a partir de agora pode ser considerado um Bonus!

Upload do Logotipo

Agora vamos criar um Formulário Dinâmico para fazer o upload do Logotipo e atualizar a Variável Global.

A lógica desta implementação será baseada nesses passos:

O usuário faz o upload da imagem.
A imagem é enviada para a pasta “Public” do site.
A Variável Global é atualizada com a URL relativa da imagem.
Por fim, a função que adicionamos no JavaScript Público será chamada para atualizar o logotipo após o Upload.

A pasta "Public" do site está sendo usada neste exemplo pois ela é a única que é mantida entre as atualizações do sistema. Use ela para armazenar arquivos que você deseja utilizar no site.

Variáveis

publicFolder - Será preenchida com o caminho físico da pasta “Public”.
logoRelativePath - Será preenchida com o caminho relativo da URL do logotipo.

A URL "Relativa" contém apenas a diferença entre o caminho do site e o caminho do arquivo. Por exemplo "Public/Logo.logo.png". O contrário disso seria a URL "Absoluta", que seria algo como "https://latromi.empresa.com.br/web/Public/Logo.logo.png".

Campos

uplLogo - Campo do tipo Upload.
- Destino - Selecione “Diretório”, e no campo “Caminho” informe:
  {?VAR publicFolder}\Public\Logos
- Nome do Arquivo - Crie um nome de arquivo que seja único para cada upload. Isso evita problemas de cache caso dois arquivos diferentes sejam enviados com o mesmo nome. Exemplo de nome único:
  "logo_" + Data e Hora Atual + Extensão do arquivo (com ponto)
btnOK - Campo do tipo Button. Será usado para confirmar o Upload.

Procedimentos

Form_Load - Este procedimento deve ser chamado no evento Load do Formulário. Adicione as seguintes ações:
- Executar Código C# - O código a seguir preenche a variável “publicFolder” com o caminho físico da pasta “Public” do sistema.
```
using System.IO;

// Volta do caminho /Temp/Username/99999/External
Variables["publicFolder"].Value = new DirectoryInfo(Environment.TempFolder).Parent.Parent.Parent.Parent.FullName;
```
btnOK_Click - Este procedimento deve ser chamado no evento Click do botão “btnOK”. Adicione as seguintes ações:
- Confirmar Uploads - Para mover o arquivo da pasta temporária para a pasta definitiva que foi configurada (pasta Public/Logos).
- Executar Código C# - O código a seguir preenche a variável “logoRelativePath” com a URL relativa do logotipo.
```
// retorna o caminho relativo do logotipo
Variables["logoRelativePath"].Value = $"Public/Logos/{Fields["uplLogo"].Value}";
```
- Popular Campos e Variáveis - Use essa ação para preencher a Variável Global “Logo” com o valor da variável de Formulário “logoRelativePath”.
- Executar código JavaScript - Por fim, execute o código JavaScript abaixo para atualizar o logotipo do site usando o valor da variável “logoRelativePath”. Isso é necessário apenas para não precisar atualizar a página para aplicar a alteração.
```
(function() {
    var form = latromi.formManager.getFormInstance();
    showCustomLogo(form.getVariableValue('logoRelativePath'));
})();
```