Como criar uma página de login personalizada no Jitterbit App Builder

Se você deseja modificar a página de login do App Builder, este artigo descreve as melhores práticas recomendadas. Seguir este método é preferível a métodos alternativos, pois essa abordagem preservará suas alterações ao atualizar o App Builder no futuro. Métodos alternativos, como criar scripts no banco de dados ou remover o lacre do App Builder, não são recomendados e não serão preservados na atualização.

As imagens podem ser codificadas em Base64 com a sintaxe adequada ou você pode enviá-las diretamente para o App Builder (método preferencial) para usar uma imagem na página de login do App Builder. Consulte a seção intitulada Como usar uma imagem hospedada no App Builder para ver as etapas dessa configuração. Aqui está um link para um site de codificador de imagens em Base64 : https://www.base64-image.de/. Abaixo são fornecidas instruções sobre como gerar uma imagem codificada em Base64.

Se você for enviar a imagem para o App Builder, acesse o App Builder IDE > Aparência > Imagens > selecione a Coleção que seu aplicativo está usando > clique em +Imagem e envie a imagem. Após o envio, você pode clicar no ícone pop-up para expandir as informações detalhadas da imagem e clicar com o botão direito do mouse sobre a imagem, conforme ela aparece na seção Foto. Consulte a seção abaixo sobre Como criar um tema de login personalizado para obter instruções passo a passo.

Ao referenciar caminhos de imagem em Temas, a sintaxe exata pode variar um pouco dependendo de como a URL de hospedagem do App Builder foi configurada. A maneira recomendada de referenciar um caminho de imagem é iniciar o valor do caminho com ./, por exemplo ./service/image/153f5b0b-c367-4409-a428-23813b6a5ab2.

Para enviar um novo tema de login de Desenvolvimento > QA > Produção, salve o tema personalizado na sua Coleção de Temas que está na seção Dev > QA > Prod.

Para criar um tema de login personalizado

1. Navegue até Look and Feel
2. Confirme se você selecionou uma Coleção que você pode modificar
3. Clique em + Tema
4. Forneça um Nome de Tema identificável para o novo tema personalizado. Por exemplo: Tema de Login do Cliente
5. Selecione "Login Base Theme" como Tema Base
6. Clique no botão Salvar
7. Selecione Formulário de login no painel Componentes
8. Clique no botão + Estilo no painel Estilos
9. Selecione Logotipo de login como Área
10. Selecione Imagem de fundo como Tipo de estilo

11. Insira a sintaxe formatada corretamente para uma imagem codificada em Base64. Por exemplo:

    `dados:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7 ////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7`
    

12. Digite a descrição da Ajuda Técnica e clique em Salvar

13. Saia do App Builder e atualize o navegador. Agora você deverá conseguir ver a imagem personalizada aparecer na tela de login do App Builder.

Para criar uma imagem de fundo codificada em Base64

1. Para gerar a codificação Base64 adequada para sua imagem, recomendamos usar o site online: https://www.base64-image.de/

   

2. Arraste e solte ou clique no botão "**Ou Clique Aqui'' para enviar seu arquivo de imagem JPG, PNG ou GIF.

3. Após o processamento do arquivo, clique no botão resultante Mostrar Código.

4. Clique no botão Selecionar tudo em Para uso em <img> seção elementos

   

5. Clique no botão Copiar para a área de transferência

6. Esta é a sintaxe do código de imagem formatada corretamente que você colará no valor da imagem de fundo no App Builder no seu tema de login personalizado

Para usar uma imagem hospedada do App Builder

1. Navegue até IDE > Aparência
2. Adicione a imagem que deseja usar a uma Coleção à qual seu aplicativo tem acesso
3. Depois de adicionar a imagem, clique no ícone Abrir registro correspondente
4. Vá até o campo URL relativa e clique no botão Copiar
5. Siga as instruções acima para "Para criar um tema de login personalizado"
6. Na etapa 12, insira a sintaxe copiada para a área de transferência da sua imagem hospedada. Será algo como /service/image/ImageID, onde ImageID representa o valor único copiado para a sua área de transferência. Por exemplo: /service/image/2bc0d8a0-2cd7-4e8d-b074-eebfb1b9b6d2
7. Revise o valor do caminho da imagem e se ele não começar com ./ Ajuste manualmente conforme necessário
8. Acesse Ajuda Técnica e Salvar

Exemplos adicionais de personalização

Muitas áreas do formulário de login podem ser personalizadas, além do logotipo descrito anteriormente. Para personalizar outras áreas do formulário de login, você pode aproveitar os diferentes estilos de Componente - Subcomponente disponíveis na área Aparência > Temas do App Builder. Alguns exemplos são descritos abaixo.

Aspectos avançados de personalização podem exigir que você trabalhe com interfaces de tema personalizadas. Por exemplo, se você quiser direcionar apenas um botão, mas não todos, que aparecem no formulário de login, você pode escrever uma interface personalizada para direcionar apenas um dos botões.

Direcione o cabeçalho do formulário de login

1. Navegue até o Tema de Login Personalizado definido para o seu formulário de Login
2. Selecione Formulário de Login no painel Componentes
3. Clique em + Estilo no painel Estilos
4. Selecione Cabeçalho do Formulário de Login como Área
5. Selecione o Tipo de Estilo apropriado para a personalização. Por exemplo: "Cor de Fundo" se você deseja alterar a cor da região

6. Forneça as informações de Valor apropriadas. Por exemplo: darkviolet

   1. Se o seu tema tiver cores primárias, secundárias e complementares definidas, talvez seja necessário adicionar !important ao Valor. Por exemplo: darkviolet!important

7. Clique em Salvar

8. Saia do App Builder e atualize seu navegador para testar os resultados

Direcione o botão de login

1. Navegue até o Tema de Login Personalizado definido para o seu formulário de Login
2. Selecione o formulário Controles no painel Componentes
3. Clique em + Estilo no painel Estilos
4. Selecione Botão como Área
5. Selecione o Tipo de Estilo apropriado para personalização. Por exemplo: "Cor de Fundo" se você deseja alterar a cor da região

6. Forneça as informações de Valor apropriadas. Por exemplo: #ffa500

   1. Se o seu tema tiver cores primárias, secundárias e complementares definidas, pode ser necessário adicionar !important ao Valor. Por exemplo: #ffa500!important

7. Clique em Salvar

8. Saia do App Builder e atualize seu navegador para testar os resultados

Direcione os controles do formulário

1. Navegue até o Tema de Login Personalizado definido para o seu formulário de Login
2. Selecione Controles no painel Componentes
3. Clique em + Estilo no painel Estilos
4. Selecione Controle de Formulário como Área
5. Selecione o Tipo de Estilo apropriado para personalização. Por exemplo: "Cor de Fundo" se você deseja alterar a cor da região

6. Forneça as informações de Valor apropriadas. Por exemplo: #ffff60

   1. Se o seu tema tiver cores primárias, secundárias e complementares definidas, pode ser necessário adicionar !important ao Valor. Por exemplo: #ffff60!important

7. Clique em Salvar

8. Saia do App Builder e atualize seu navegador para testar os resultados