Páginas filhas
  • Meu Imóvel - Customização da Aparência do Aplicativo

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

O app 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: Basta salvá-lo como pdcappTheme.json e inseri-lo no diretório mostrado acima.

Bloco de código
{
  "AppBackgroundColor": "#B0C4DE",
  "BtnBackgroundColor": "#7E6999",
  "BtnTextColor": "#FBEAFF",
  "NavigationBarTextColor": "#FBEAFF",
  "NavigationBarColor": "#B39CD0",
  "ImgLogoCompany": "https://i.imgur.com/wREJULv.png"
}

Resultado da configuração acima no Meu Imóvel:

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