Histórico da Página
O app Aplicativo Meu Imóvel pode ser configurado com várias opções de cores personalizadas, além de permitir a inserção do próprio logo da Empresa que deverá ser exibido no aplicativo.Para que estas configurações sejam aplicadas, deverá ser utilizado um arquivo do tipo .json, que listará os valores que deverão ser substituídos.
Procedimentos para utilização.
Para que o tema personalizado seja aplicado corretamente, deverá existir no diretório abaixo, um arquivo com o nome de pdcappTheme, na extensão .json. O próprio cliente poderá desenvolver o arquivo seguindo o exemplo nesta página.
Apesar do caminho absoluto variar conforme foi instalado o Portal do Cliente, o sistema irá sempre buscar no caminho relativo abaixo a presença do arquivo pdcappTheme.json:
| Bloco de código |
|---|
/web/app/Imb/PortalCliente/assets/css/pdcappTheme.json |
Este arquivo carregará as informações de cores, bem como o caminho da imagem com o logo da empresa.
Estando o arquivo presente no diretório acima, ao abrir o aplicativo, todas as informações de cores personalizadas, bem como o logo da empresa deverão ser carregados.
Configuração e exemplo de do arquivo pdcappTheme.json
No momento, as propriedades que podem ser definidas e customizadas através do arquivo são:
- AppBackgroundColor: Define uma cor para o plano de fundo do aplicativo;
- BtnBackgroundColor: Define uma cor para o plano de fundo dos botões do aplicativo;
- BtnTextColor: Cor do texto dos botões;
- NavigationBarColor: Cor da barra de navegação no Android;
- ImgLogoCompany: Define a URL do logo da companhia. É muito importante que a imagem que será carregada através deste parâmetro tenha suas dimensões e tamanho de arquivo otimizado para exibição em telas de celulares. Recomendamos imagens de até 500kb.
Exemplo do arquivo .json com todas as propriedades definidas:
| Bloco de código |
|---|
{
"AppBackgroundColor": "#B0C4DE",
"BtnBackgroundColor": "#7E6999",
"BtnTextColor": "#FBEAFF",
"NavigationBarTextColor": "#FBEAFF",
"NavigationBarColor": "#B39CD0",
"ImgLogoCompany": "https://www.totvs.com/wp-content/uploads/2019/01/logo.png"
} |
1) Procedimentos para customização
...
Para configuração é necessário acessar os parâmetros do módulo TOTVS Construção Gestão de Imóveis em: Parâmetros / Portal do Cliente / Aparência do Aplicativo.
Segue uma breve descrição sobre estes parâmetros:
- Logo para exibição no aplicativo do PDC: Permite que seja incluída uma imagem, para que seja exibida como logo na página inicial de login do aplicativo. São aceitos os formatos .gif. jpg, .bmp e png.
- Personalizar aparência do aplicativo: Neste menu, será possível editar as cores das seguintes áreas do app Meu Imóvel:
- Cor dos botões;
- Cor dos textos - Barras de Navegação e Menu;
- Cor dos Links;
- Cor do botão dos filtros;
| Expandir | |||||
|---|---|---|---|---|---|
| |||||
APP meu Imóvel agora tem opção de selecionar Cor Primária e Secundária para o Aplicativo nos Temas ( Claro e ou Escuro ) Caso o cliente deseja utilizar o TEMA escuro , basta marcar a opção ( Ativar tema escuro ) e tem uma pré visualizalação no TCGI antes de salvar. Para ver a pré visualização , basta clicar em ( Ver exemplo )
Após o cliente marcar a opção ( Modelo Tema Escuro ) Clicar em = Configurações
Marcar o Tema Escuro e logar no APP
|
| Expandir | ||
|---|---|---|
| ||
|
| Informações | ||
|---|---|---|
| ||
|
2) Resultado da configuração acima no Aplicativo Meu Imóvel
...
| Expandir | ||
|---|---|---|
| ||
| ||
| Informações | ||
| Importante: Para as propriedades de cores, podem ser usados tanto os valores HEX, exemplo: "#B0C4DE" como os valores de colorName, exemplo "LightSteelBlue". Caso utilize apenas o colorName, não é necessário inserir # antes do valor. Para mais informações de nomes de cores, acesse: W3School Colors |
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas