Como personalizar a página de login no Jitterbit App Builder

Introdução

A página de login do App Builder pode ser personalizada para ter a aparência que você desejar. Esta página ensina como realizar essa personalização, seguindo as melhores práticas recomendadas pela Jitterbit. Você pode personalizar tanto o logo quanto o formulário de login, incluindo o cabeçalho do formulário, controles ou botão de login.

Essa personalização afeta a página principal de login do App Builder, que é utilizada por desenvolvedores, testadores e usuários finais. No entanto, como cada ambiente (Desenvolvimento, QA e Produção) possui sua própria página de login, as personalizações que você faz no ambiente de desenvolvimento não serão imediatamente visíveis para os usuários finais. Envie o novo tema que você criar de um ambiente para o outro usando Gerenciamento de versões.

Personalizar o logo

Existem duas maneiras de personalizar o logo: fazer o upload de uma imagem ou usar uma imagem codificada em base64.

• Criar um tema de login personalizado

• Usar uma imagem hospedada pelo App Builder

Se você usar um novo tema de login em um ambiente de Desenvolvimento e quiser enviá-lo para Produção, salve o tema personalizado na Coleção de temas que fará a viagem para a produção.

Crie um tema de login personalizado

1. Navegue até IDE > Aparência.

2. Confirme se você tem uma Coleção selecionada que pode modificar.

3. Clique no botão + Tema.

4. No campo Nome do Tema, insira um nome para o novo tema personalizado.

5. Abra o menu Tema Base, e selecione Tema Base de Login.

6. Clique no botão Salvar.

7. No painel Componentes, selecione Formulário de Login.

8. No painel Estilos, clique no botão + Estilo. A caixa de diálogo Configurações de Estilo é aberta.

9. Abra o menu Área, e selecione Logo de Login.

10. Abra o menu Tipo de Estilo, e selecione Imagem de Fundo.

11. Insira a sintaxe formatada corretamente para uma imagem codificada em Base64 no campo 1 - Imagem de fundo. Para gerar o código Base64, siga as instruções em Criar uma imagem de fundo codificada em Base64. Por exemplo:

    `data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7`
    

12. Insira uma descrição no campo Ajuda Técnica.

13. Clique no botão Salvar.

Crie uma imagem de fundo codificada em Base64

Para usar um arquivo de imagem JPG, PNG ou GIF local para personalizar sua página de login, você deve gerar uma codificação em Base64 para a imagem. Para fazer isso, siga estas etapas:

1. Acesse o Codificador de Imagem Base64.

   

2. Arraste e solte ou clique no botão Ou Clique Aqui para fazer o upload do seu arquivo de imagem JPG, PNG ou GIF.

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

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

   

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

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

Vários temas de login

Se você criar vários temas de login, um usuário com acesso de administrador deve definir qual deles será utilizado. Para fazer isso, siga estas etapas:

1. Selecione IDE > Provedores de Segurança.

2. No painel Configuração, clique em Editar.

3. Use o menu suspenso sob Tema da Página de Login para configurar qual dos temas de login criados deve ser usado pelo seu aplicativo.

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

Usar uma imagem hospedada no App Builder

1. Navegue até 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 correspondente de Abrir Registro.

4. Role até o campo URL Relativa e clique no botão Copiar.

5. Siga as etapas 1-10 na seção Criar um tema de login personalizado.

6. Na etapa 11, insira a sintaxe copiada para a sua imagem hospedada. Ela terá a seguinte aparência: /service/image/ImageID, onde ImageID representa o valor único copiado para sua área de transferência. Por exemplo: /service/image/2bc0d8a0-2cd7-4e8d-b074-eebfb1b9b6d2.

1. Revise o valor do caminho da imagem e, se não começar com ./, ajuste manualmente conforme necessário.

2. Insira uma descrição no campo Ajuda Técnica e clique em Salvar.

Personalize o formulário de login

Você pode personalizar outras partes do formulário de login, além do logotipo. Para isso, utilize os diferentes estilos disponíveis de Componente – Subcomponente na área Aparência > Temas do App Builder. Alguns exemplos são descritos abaixo.

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

Direcionar 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 a Área.

5. Selecione o Tipo de Estilo apropriado para a personalização. Por exemplo, se você deseja mudar a cor da região, selecione Cor de Fundo.

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

   Nota

   Se o seu tema tiver cores primárias, secundárias e complementares definidas, pode ser 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.

Direcionar 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 a Área.

5. Selecione o Tipo de Estilo conforme apropriado para a personalização. Por exemplo, se você deseja mudar a cor da região, selecione Cor de Fundo.

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

   Nota

   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 de formulário

1. Navegue até o tema de login personalizado definido para 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 a Área.

5. Selecione o Tipo de Estilo conforme apropriado para a personalização. Por exemplo, se você deseja alterar a cor da região, selecione Cor de Fundo.

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

   Nota

   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.