Como Criar um Personalizado App Builder página de Login¶

Se você está procurando modificar o App Builder página de login, este artigo descreve as melhores práticas recomendadas. Seguir este método é preferível a métodos alternativos, pois esta abordagem preservará suas alterações ao atualizar App Builder no futuro. Métodos alternativos, como scripts no banco de dados ou desbloqueio 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 fazer upload da imagem diretamente para App Builder(método preferido) para usar uma imagem no App Builder página de login. Consulte a seção intitulada Para usar an App Builder imagem hospedada para etapas sobre essa configuração. Aqui está um link para um site de codificador de imagem 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 App Builder, vá para o App Builder IDE > Aparência > Imagens > selecione a Coleção que seu aplicativo está usando > clique em +Imagem e carregue a imagem. Após o upload, você pode clicar no ícone pop-up para expandir as informações de detalhes da imagem e clicar com o botão direito do mouse em cima da imagem conforme ela aparece na seção Foto. Veja a seção abaixo em Para criar um tema de login personalizado para obter instruções passo a passo.

Ao referenciar caminhos de imagem em Temas, a sintaxe exata pode diferir um pouco dependendo de como o App Builder uRL de hospedagem 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 seu Tema personalizado em sua Coleção de Temas que está fazendo a viagem 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 o 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. Insira a descrição de Ajuda Técnica e clique em Salvar

13. Saia do App Builder e atualize seu navegador. Agora você deve conseguir ver a imagem personalizada aparecer no App Builder tela de login.

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 carregar seu arquivo de imagem JPG, PNG ou GIF

3. Após o processamento do arquivo ser concluído, clique no botão Mostrar código resultante

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 em App Builder no seu tema de login personalizado

Para Usar an App Builder imagem Hospedada¶

1. Navegue até IDE > Aparência
2. Adicione a imagem que você deseja usar a uma Coleção à qual seu aplicativo tem acesso
3. Depois de adicionar a imagem, clique no ícone correspondente Abrir registro
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 para sua imagem hospedada. Ela será parecida com /service/image/ImageID, onde ImageID representa o valor exclusivo copiado para sua área de transferência. Por exemplo: /service/image/2bc0d8a0-2cd7-4e8d-b074-eebfb1b9b6d2
7. Revise o caminho da imagem Valor e se ele não começar com ./ ajuste manualmente conforme necessário
8. Entre em 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 atingir um, mas não todos os botões que aparecem no formulário de login, você pode escrever uma Interface personalizada para atingir apenas um dos botões.

Segmente o Cabeçalho do Formulário de Login¶

1. Navegue até o Tema de login personalizado definido para 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: "Cor de fundo" se você estiver procurando 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 anexar !important para o Valor. Por exemplo: darkviolet!important

7. Clique em Salvar

8. Saia de 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 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 conforme apropriado para personalização. Por exemplo: "Cor de fundo" se você estiver procurando 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, talvez seja necessário anexar !important para o Valor. Por exemplo: #ffa500!important

7. Clique em Salvar

8. Saia de 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 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 personalização. Por exemplo: "Cor de fundo" se você estiver procurando 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, talvez seja necessário anexar !important para o Valor. Por exemplo: #ffff60!important

7. Clique em Salvar

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