INTRANET by DIGTE DOCUMENTAÇÃO

Documentação para instalação e uso

Instalar

Detalhes técnicos da solução

A solução possui as seguintes características técnicas:
Tecnologia
Utiliza a infraestrutura do TOTVS Fluig Plataforma e é compatível com a mesma matriz de portabilidade da plataforma Fluig Dimensionamento
Não necessita de aumento de infraestrutura Arquitetura
Utiliza a infraestrutura do TOTVS Fluig Plataforma sem necessidade de instalação de componentes adicionais, sendo composto por páginas, widgets, formulários e dataset Pré-requisito
Está preparado para execução na versão do TOTVS Fluig Plataforma 1.6.2 ou superior, e com o tema Clássico aplicado. Para mudar o tema de Snowflake para Clássico, acesse o painel de controle do TOTVS Fluig Plataforma: Personalização > Tema. Liberação no Firewall Para utilizar texto com Fontes do Google, é necessário que o TOTVS Fluig Plataforma esteja com acesso liberado ao seguinte endereço "https://fonts.googleapis.com", portanto, a equipe de infraestrutura responsável deve verificar se o Firewall possui as regras de liberação configuradas. Lista de arquivos criados na instalação Estrutura de pastas & Formulários: - Digte Intranet, Comunidades, Artigos, Imagens, Vídeos, Formulários, Configurações, Customizações do Menu, Temas das Páginas, Temas das Widgets, Temas dos Layouts, Conteúdo, Agendamentos, Itens, Alertas, Bolões, Campeonatos, Palpites, Fases, Cardápios, Comunidades em Destaque, Configurações Iniciais do Usuário, Currículos, Competências, Conquistas, Currículos, Dados Adicionais do Usuário, Elogios, Enquetes, Estruturas da Empresa, Cargos, Empresas, Gestão de Eventos, Gestão de Eventos das Lojas, Indicadores, Indicadores, Unidades, Tipos, Unidades, Menus de Links, Novidades, Ofertas, Parcerias, Categorias, Vagas, Destaques Rotativos, Menu de Botões, Mini Menu, Categoria de Clientes, Clientes, Tutorial de Acesso, Redirecionamentos Registros: - Temas para "Manufatura 001", "Varejo 001", "Serviços 001" Widgets: - Variável de acordo com o pacote adquirido Layouts: - Layout Digte Intranet - 4 colunas, Layout Digte Intranet - 3 colunas, Layout Digte Intranet - 2 colunas (8-4), Layout Digte Intranet - 2 Colunas (9-3), Layout Digte Intranet- Vários Slots, Digte Intranet - Layout Colaborativo, Digte Intranet – Vazio, Digte Intranet – Conteúdo, Digte Intranet - Layout Clean, Digte Intranet – layoutdefault, Digte Intranet - Layout Default ECM, Digte Intranet – Básico, Digte Intranet – Público, Digte Intranet - Meio a meio, Digte Intranet – Comunicativo, Digte Intranet - Layout Processos, Digte Intranet – Detalhado, Digte Intranet – sociallayoutdefault, Digte Intranet - User Layout, Layout Digte Intranet - Slots com diferentes tamanhos Datasets: - fdwt_bolao_pf_jogos, fdwt_bolao_ranking_campeonato, fdwt_bolao_ranking_jogo, fdwt_consulta_base_fluig, fdwt_bolao_campeonatos_padrao

Procedimentos da instalação

Uma vez adquirido o Intranet by Digte, o cliente poderá instalar o componente de dentro de seu próprio TOTVS Fluig Plataforma.
Os procedimentos para instalação são:
1) Acessar o ambiente TOTVS Fluig Plataforma onde será instalado o componente. A instalação é pela plataforma Fluig, portanto necessita ser instalado em cada ambiente, exemplo: instalar em produção e homologação. 2) Acessar no menu do TOTVS Fluig Plataforma: Painel de Controle > Aplicativos > Itens Store. 3) Na página da plataforma Fluig store existirá uma opção Componentes Store onde serão listados os produtos disponíveis na store. Os produtos que já foram contratados estarão com o botão “Instalar” habilitado e em verde. A verificação se está contratado é diretamente no License Server do cliente. 4) Caso o produto esteja disponível para instalação, clique no botão Instalar. Neste momento ocorrerá o download automático do aplicativo para o seu TOTVS Fluig Plataforma. Concluído o download, dois novos botões aparecerão no menu do TOTVS Fluig Plataforma. 5) Acesse a opção do menu de “INSTALAÇÃO”, onde será iniciado o wizard do processo de instalação do produto. O wizard irá executar os passos automaticamente, sendo que será solicitado inicialmente: Código da pasta do ECM que armazenará os itens da instalação; 6) Ao final da instalação, todos os componentes necessários para iniciar a configuração estarão disponíveis. Será apresentado o botão “Configurar” para ser direcionado para configuração do Intranet by Digte. A configuração também pode ser acessada pelo menu lateral do TOTVS Fluig Plataforma, opção CONFIGURAÇÃO. A configuração será detalhada no tópico Procedimentos de Utilização. Cuidado!!! A remoção dos registros realizados na pasta "Digte Intranet -> Configurações" irá desconfigurar as páginas que utilizam os temas do Intranet by Digte . Somente admistradores e grupos com permissões de edição podem editar as páginas de Instalação e Configuração. Contudo, não é recomendavél substituir ou remover os Widgets existentes nessas páginas, pois se tratam de páginas de adminstração do produto Intranet by Digte.

Procedimentos da reinstalação ou Problemas na Instalação

Caso ocorra algum problema durante a instalação, sugerimos fazer a reinstalação. Um exemplo de problema: em alguns clientes no processo de instalação dos formulários, por problemas de performance da rede o processo pode ser afetado. Neste caso sugerimos refazer a instalação. Para reinstalar basta eliminar a pasta Digital Workplace Template, ou Digte Intranet (na nova versão), do ECM ou utilizar o botão Reinstalar da página de Instalação. Feito isto basta executar novamente o wizard de instalação. Cuidado!!! A reinstalação eliminará todos os dados importados e cadastrados na solução.

Carga de dados dos Widgets

Os widgets da solução utilizam os dados informados nos formulários armazenados no ECM do TOTVS Fluig Plataforma, na pasta "Digte Intranet / Conteúdo " criada no momento da instalação. A carga de dados pode ser realizada via opção Importador de CSV. Além disso, é possível realizar a exportação de dados existentes nos formulários, desde que o formulário possua um dataset associado, através da opção Exportador de formulário. Caso o formulário não tenha nenhum registro, o Exportador irá gerar um CSV com o template padrão daquele formulário. Importante ficar atento quanto ao formato do arquivo, pois tem que ser UTF-8, para que os caracteres especiais (ex: ç,~,acentos,) sejam carregados corretamente. A sugestão é fazer a carga de poucos registros para testar se tudo está ok, e depois fazer a carga correta. Os registros de teste podem ser eliminados diretamente no ECM do TOTVS Fluig Plataforma ou pelo botão Limpar Registros, onde ele eliminará TODOS os registros do formulário selecionado. Widgets da Solução que podem receber carga de dados:

Agendamentos
Alertas
Aniversariantes do Mês
Bolão - Inclusão de Palpites
Bolão - Ranking por Colaborador
Bolão - Ranking por Partida
Calendário de Eventos da Unidades
Calendário de Eventos
Cardápio
Comunidades em Destaque
Consulta de Pessoas e Telefones
Consulta de Unidades
Currículo
Elogios e Recomendações
Estrutura da Empresa
Menu de Links
Novidades
Ofertas
Parcerias da Empresa
Ranking e Indicadores - Mapa
Ranking e Indicadores
Vagas

REST

/api/public/profile/image
/api/public/2.0/documents/getDownloadURL
/api/public/ecm/document
/api/public/ecm/document/createDocument
/api/public/2.0/pages/mobileMapping
/api/public/2.0/pages/getWidgetPreferences
/api/public/ecm/dataset/availableDatasets
/api/public/ecm/document/getDocumentByDatasetName
/api/public/ecm/document/allDocumentHits
/api/public/ecm/dataset/search
/api/public/2.0/authorize/client/invoke
/api/public/ecm/document/listDocumentWithChildren
/api/public/ecm/dataset/datasets
/api/public/social/community/listCommunities
/api/public/social/community
/api/public/social/user
/api/public/social/user/logged
/api/public/relation/canAccessByLogin
/api/public/social/post/create/with/upload
/api/public/wcm/group/byuser
/api/public/social/community/listMyCommunitiesWithRelevanceByLogin
/api/public/2.0/documents/getActive
/api/public/social/image
/api/public/alert/module/findVoList
/api/public/alert/module/create
/api/public/alert/module/findVoList
/api/public/alert/event/createEvent
/api/public/alert/module/findVoList
/api/public/alert/event/createEvent
/api/public/alert/service/sendNotification
/api/public/search/advance
/api/public/social/favorite/bytype/v2/COMMUNITY
/api/public/2.0/favorites/findFavoritesDocuments
/api/public/2.0/favorites/findFavoritesProcess
/api/public/social/favorite/bytype/v2/USER
/api/public/2.0/pages/findPages
/api/public/2.0/cards/create
/api/public/2.0/documents/deleteDocument
/api/public/2.0/groups/findGroupsByUser
/api/public/2.0/groups/listUsersByGroup
/api/public/2.0/groups/addUsers
/api/public/social/community/request
/api/public/social/post/publish
/api/public/sociable/upload/stream/form
/api/public/sociable/deleteStreamedFile
/api/public/sociable/comment/post
/api/public/sociable/like
/api/public/social/post/notify
/api/public/social/post/stopNotify
/api/public/sociable/comment/remove
/api/public/social/post/remove
/api/public/social/post/listSortedPost
/api/public/social/post/read/post
/api/public/sociable/comments
/api/public/2.0/posts
/api/public/2.0/posts/findComment
/api/public/2.0/pages/mobileMapping
/api/public/wcm/theme
/api/public/social/community/listPagesWithComunities
/api/public/2.0/pages/findPages
/api/public/2.0/tenants/getTenantData/imageHeaderRepeat
/api/public/2.0/pages/mobileMapping/wcmuserpreferences
/api/public/2.0/documents/getDocumentPermissions
/api/public/2.0/cardindexes/delete
/api/public/ecm/document/remove
/api/public/2.0/permission/find/widget
/api/public/2.0/folderdocuments/create
/api/public/2.0/folderdocuments/listDocumentByFolder
/api/public/2.0/folderdocuments/create
/api/public/socialcloud/cloud/create
/api/public/socialcloud/list/findCloud
/api/public/socialcloud/list/clouds/user
/api/public/socialcloud/add/user/group
/api/public/socialcloud/defaultgroup
/api/public/socialcloud/remove/user/group

Webservices

ECMDatasetService
ECMFolderService
ECMCardService
ECMCardIndexService

Configurar

Wizard de Configuração

A configuração do produto ocorre através do wizard de configuração, e ele direcionando o usuário no processo de manutenção de temas de layout, temas de widgtes. As alterações dos parâmetros é vista no preview, assim permitindo o entendimento a cada personalização. Veja um overview da configuração no vídeo abaixo:

O que é um Tema de Layout?

Tema de layout controla as cores do topo, menus de uma página e customização dos widgets padrões (Busca, Alertas, Messaging e Perfil). Os temas estão agrupados por categorias “Manufatura, Varejo e Serviços”. Nossos profissionais de comunicação avaliaram cada segmento “Manufatura, Varejo e Serviços” e identificaram características, as quais deram origem a temas padrões. A liberação de mais categorias ocorrerá nas novas versões do produto.
O usuário poderá alterar os temas padrões ou criar um tema com seu nome (ex: empresaA), através do botão Copiar. Sugerimos fazer cópias dos temas padrões que estejam mais alinhados com sua identidade visual. Através do wizard de configuração é possível migrar todas as páginas do TOTVS Fluig Plataforma (customizadas e padrões) para um tema de layout do Intranet by Digte.

Configurando um Tema de Layout

Dentro de um tema o usuário poderá alterar diversos recursos, clicando no tópico desejado (ex: Topo e Menu ou Widgets), e visualizar no preview ao lado como ficará sua página no caso da aplicação do tema. Detalhes dos campos do tema de layout: Tipo Grupo de informações utilizado para identificar o tema de layout. Id (Código do tema): Deve ser preenchido com caracteres minúsculos, sem espaços e sem caracteres especiais. Nome (Nome do tema): Deve ser preenchido o nome do tema que será criado. Categoria (Categoria do tema): Este campo possui 3 (três) opções: "Segmento Manufatura", "Segmento Varejo" e "Segmento Serviços". Posteriormente, você irá consultar esses segmentos para editar o seu tema. Topo e Menu
Possibilita a configuração da identidade visual do topo e menu, trocar cores, altura do topo, local do menu “no topo” ou “na esquerda”, cores dos itens de menu. Altura (Altura do topo): Deve ser preenchido a altura do topo (onde se localiza o logo) em pixels (px). Caso não seja preenchido, o valor padrão será 60 (sessenta) pixels (px). Posição (Posição do menu e do topo): Possui 2 (duas) opções. - Estático: O menu e o topo ficam fixos no inicio da página e não acompanham a barra de rolagem do navegador. - Fixo: O menu e o topo ficam no inicio da página e acompanham a barra de rolagem do navegador. Habilitar (Habilita o menu): Possui 2 (duas) opções. - Sim: Habilita a exibição do menu. - Não: Desabilita a exibição do menu. Versão (Versão do menu): Possui 2 (duas) opções. - 1: Habilita o submenu em cascata ao passar o mouse em cima de páginas que possuam submenu. - 2: Desabilita a exibição do submenu em cascata e habilita uma funcionalidade que permite clicar em cima do botão da página no menu e substituir todo o menu pelos itens que estariam dentro do submenu em cascata. Posicionamento (Posição do menu): Possui 2 (duas) opções. - Topo: Habilita o menu horizontalmente abaixo do topo. Caso a opção "Topo" seja escolhida no campo "Posicionamento", as configurações de customização do menu horizontal devem ser configuradas. - Esquerda: Habilita o menu verticalmente a esquerda da página. Caso a opção "Esquerda" seja escolhida no campo "Posicionamento", as configurações de customização do menu vertical devem ser configuradas. Menu horizontal Altura (Altura do menu): Permite definir a altura do menu em pixels (px). Caso não seja preenchido, o valor padrão será 60 (sessenta) pixels (px). Bg (Cor de fundo do menu): Permite definir a cor de fundo do menu e possui 2 (duas) opções: - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Bg Ativo&Hover (Cor de um botão no menu ao passar o mouse em cima e cor de uma página ativa no momento): Permite definir a cor de fundo do menu ao passar o mouse em cima e possui 2 (duas) opções: - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Marcador Ativo&Hover (Linha abaixo da página ativa no momento): Permite definir a cor de uma linha que fica abaixo do botão da página ativa e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Imagem (Imagem de fundo do menu): Permite colocar uma imagem de fundo no menu. - Inserção: Basta clicar na Lupa, a interface do GED será aberta, escolha a imagem marcando um "check" ao lado do nome da imagem. - Deletar: Basta clicar no "X", a imagem de fundo será excluída. Repetir (Repitir imagem de fundo do menu): Caso a imagem de fundo seja pequena, essa opção permite habilitar a repetição da imagem e possui 4 (quatro) opções. - Não repetir: Não repete a imagem. - X: Repete a imagem na direção direita. - Y: Repete a imagem na direção esquerda. - X e Y: Repete a imagem na direção esquerda e direita. Case (Formatação da fonte): Possui 4 (quatro) opções. - Nenhum: Desabilitar formatação. - Capitalizar: Cada palavra começa com letra maiúsculas. - Minúsculas: Todas as palavras ficam minúsculas. - Maiúsculas: Todas as palavras ficam maiúsculas. Texto Cor (Cor do texto): Permite definir a cor dos textos e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Texto Cor Hover (Cor do texto ao passar o mouse em cima): Permite definir a cor dos textos ao passar o mouse em cima e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Texto Tamanho (Tamanho do texto): Permite definir o tamanho do texto em pixels (px). Texto Tamanho Submenu (Tamanho do texto dentro do submenu): Permite definir o tamanho do texto do submenu em pixels (px). Texto Alinhamento Submenu (Alinhamento do texto dentro do submenu): Permite definir o alinhamento do texto dentro do submenu e possui 3 (três) opções. - Esquerda: Alinha o texto a esquerda dentro do submenu. - Centralizar: Alinha o texto ao centro dentro do submenu. - Direita: Alinha o texto a direita dentro do submenu. Ícone Cor (Cor do ícone): Permite definir a cor do ícone e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Ícone Tamanho (Tamanho do ícone dentro do menu): Permite definir o tamanho do ícone em pixels (px). Ícone Ativo&Hover (Cor do ícone da página ativa no momento e cor do ícone ao passar o mouse em cima): Permite definir a cor do ícone e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Menu vertical Bg (Cor de fundo do menu): Permite definir a cor de fundo do menu e possui 2 (duas) opções: - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Bg Ativo&Hover (Cor de um botão no menu ao passar o mouse em cima e cor de uma página ativa no momento): Permite definir a cor de fundo do menu ao passar o mouse em cima e possui 2 (duas) opções: - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Bg Submenu V1 (Cor de fundo do submenu caso o menu esteja habilitado a versão 1): Permite definir a cor de fundo do submenu e possui 2 (duas) opções:
- Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA.
- RGBA: Colocar o código RGBA da cor. Marcador Ativo&Hover (Linha abaixo da página ativa no momento): Permite definir a cor de uma linha que fica abaixo do botão da página ativa e possui 2 (duas) opções.
- Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA.
- RGBA: Colocar o código RGBA da cor. Imagem (Imagem de fundo do menu): Permite colocar uma imagem de fundo no menu.
- Inserção: Basta clicar na Lupa, a interface do GED será aberta, escolha a imagem marcando um "check" ao lado do nome da imagem.
- Deletar: Basta clicar no "X", a imagem de fundo será excluída. Repetir (Repetir imagem de fundo do menu): Caso a imagem de fundo seja pequena, essa opção permite habilitar a repetição da imagem e possui 4 (quatro) opções.
- Não repetir: Não repete a imagem.
- X: Repete a imagem na direção direita.
- Y: Repete a imagem na direção esquerda.
- X e Y: Repete a imagem na direção esquerda e direita. Texto Cor (Cor do texto): Permite definir a cor dos textos e possui 2 (duas) opções.
- Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA.
- RGBA: Colocar o código RGBA da cor. Texto Cor Hover (Cor do texto ao passar o mouse em cima): Permite definir a cor dos textos ao passar o mouse em cima e possui 2 (duas) opções.
- Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA.
- RGBA: Colocar o código RGBA da cor. Texto Tamanho (Tamanho do texto): Permite definir o tamanho do texto em pixels (px). Texto Alinhamento (Alinhamento do texto dentro do submenu): Permite definir o alinhamento do texto dentro do submenu e possui 3 (três) opções. - Esquerda: Alinha o texto a esquerda dentro do submenu. - Centralizar: Alinha o texto ao centro dentro do submenu. - Direita: Alinha o texto a direita dentro do submenu. Case (Formatação da fonte): Possui 4 (quatro) opções.
- Nenhum: Desabilitar formatação.
- Capitalizar: Cada palavra começa com letra maiúsculas.
- Minúsculas: Todas as palavras ficam minúsculas.
- Maiúsculas: Todas as palavras ficam maiúsculas. Abertura Submenu V1 (Abertura do submenu V1): possui 2 (duas) opções: - Accordion: - Abertura lateral: Ícone Cor (Cor do ícone): Permite definir a cor do ícone e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Ícone Tamanho (Tamanho do ícone dentro do menu): Permite definir o tamanho do ícone em pixels (px). Ícone Ativo&Hover (Cor do ícone da página ativa no momento e cor do ícone ao passar o mouse em cima): Permite definir a cor do ícone e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Logotipo Logo Posição (Posição do logo no topo): Permite definir a posição do logo dentro do topo e possui 3 (três) opções. - Esquerda: Posiciona o logo a esquerda dentro do topo. - Centralizado: Posiciona o logo ao centro dentro do topo. - Direita: Posiciona o logo a direita dentro do topo. Fundo Fundo Cor (Cor de fundo do topo): Permite definir a cor de fundo do topo e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Fundo Imagem (Imagem de fundo do topo): Permite colocar uma imagem de fundo no topo. - Inserção: Basta clicar na Lupa, a interface do GED será aberta, escolha a imagem marcando um "check" ao lado do nome da imagem. - Deletar: Basta clicar no "X", a imagem de fundo será excluída. Repetir (Repetir imagem de fundo do menu): Caso a imagem de fundo seja pequena, essa opção permite habilitar a repetição da imagem e possui 2 (duas) opções. - Sim: Repete a imagem na direção direita. - Não: Não repete a imagem. Página Fundo (Cor de fundo da página): Permite definir a cor de fundo da página e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Centralizar (Centraliza o conteúdo da página): Permite centralizar todo o conteúdo da página e posusi 2 (duas) opções. - Sim: Habilita a centralização do conteúdo da página. - Não: Mantém a página normal. Largura (Largura do conteúdo enquanto a opção "Centralizar" estiver marcada como "Sim"): Permite definir a largura do espaço que o conteúdo utilizará em pixels (px). Widgets Possibilita a configuração dos widgets padrões do topo do TOTVS Fluig Plataforma ( Busca, Messaging, Alertas, Perfil). Busca Customizar (Customização do campo de busca): Permite habilitar a customização do campo de busca e possui 2 (duas) opções. - Sim: Habilita a customização. - Não: Desabilitar a customização e mantém a customização padrão do TOTVS Fluig Plataforma. Curvatura (Curvatura do botão): Permite definir a curvatura do botão e possui uma variação de 0 a 50, sendo: - 0: Quadrado. - 50: Redondo. Fundo (Cor de fundo do botão): Permite definir a cor de fundo dos botões e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Cor (Cor do ícone dentro do botão): Permite definir a cor do ícone e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Alerta (Sem notificações) Customizar (Customização do campo de busca): Permite habilitar a customização do campo de busca e possui 2 (duas) opções. - Sim: Habilita a customização. - Não: Desabilitar a customização e mantém a customização padrão do TOTVS Fluig Plataforma. Curvatura (Curvatura do botão): Permite definir a curvatura do botão e possui uma variação de 0 a 50, sendo: - 0: Quadrado. - 50: Redondo. Fundo (Cor de fundo do botão): Permite definir a cor de fundo dos botões e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Cor (Cor do ícone dentro do botão): Permite definir a cor do ícone e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Alerta (Com notificações) Fundo (Cor de fundo do botão): Permite definir a cor de fundo dos botões e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Cor (Cor do ícone dentro do botão): Permite definir a cor do ícone e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Messaging (Sem notificações) Customizar (Customização do botão messaging): Permite habilitar a customização do botão messaging e possui 2 (duas) opções. - Sim: Habilita a customização. - Não: Desabilitar a customização e mantém a customização padrão do TOTVS Fluig Plataforma. Curvatura (Curvatura do botão): Permite definir a curvatura do botão e possui uma variação de 0 a 50, sendo: - 0: Quadrado. - 50: Redondo. Fundo (Cor de fundo do botão): Permite definir a cor de fundo do botão e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Cor (Cor do ícone dentro do botão): Permite definir a cor do ícone e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Messaging (Com notificações) Fundo (Cor de fundo do botão): Permite definir a cor de fundo dos botão e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Cor (Cor do ícone dentro do botão): Permite definir a cor do ícone e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Perfil Customizar (Customização do botão messaging): Permite habilitar a customização do botão messaging e possui 2 (duas) opções. - Sim: Habilita a customização. - Não: Desabilitar a customização e mantém a customização padrão do TOTVS Fluig Plartaforma. Curvatura (Curvatura do botão): Permite definir a curvatura do botão e possui uma variação de 0 a 50, sendo: - 0: Quadrado. - 50: Redondo. Slots Possibilita a configuração dos Slots, que são os espaços onde são incluídos os widgets dentro das páginas. Estes podem ter personalizações como tamanho do espaço entre eles ou a cor destas áreas. Fonte (Fonte padrão): Permite definir a fonte padrão do tema de layout apenas colocando o nome da fonte e possui 2 (duas) opções: - Google Fonts: Qualquer fonte do google fontes - Fontes do sistema: Fontes padrões do sistema (Ex: Calibri e Arial). Espaço entre slots (Espaço entre os slots da widget). Permite definir se utilizará o espaço padrão entre as widgets e possui 2 (duas) opções. - Sim: Habilita um espaço padrão das margens do slot. - Não: Desabilita qualquer margem. Fundo Cor (Cor de fundo do slot): Permite definir a cor de fundo do slot e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Imagem (Imagem de fundo do slot): Permite colocar uma imagem de fundo no slot. - Inserção: Basta clicar na Lupa, a interface do GED será aberta, escolha a imagem marcando um "check" ao lado do nome da imagem. - Deletar: Basta clicar no "X", a imagem de fundo será excluída. Footer (Rodapé) Pode ser definido se este tema de layout terá ou não o rodapé padrão do TOTVS Fluig Plataforma com dados padrões de versão, usuário logado e política de uso. Habilitar (Habilitar o rodapé): Permite habilitar o rodapé padrão do TOTVS Fluig Plataforma e possui 2 (duas) opções: - Sim: Habilita o rodapé padrão do TOTVS Fluig Plataforma. - Não: Desabilita o rodapé padrão do TOTVS Fluig Plataforma.

O que é um Tema de Widget?

Tema de widget controla as cores do título, fontes, bordas, fundo, ícones, curvaturas, sombra e muitas outras configurações da identidade visual das widgets do produto Intranet by Digte. Os temas estão agrupados por categorias “Manufatura, Varejo e Serviços”. Nossos profissionais de comunicação avaliaram cada segmento “Manufatura, Varejo e Serviços” e identificaram características, as quais deram origem a temas padrões. A liberação de mais categorias ocorrerá nas novas versões do produto.
O usuário poderá alterar os temas padrões ou criar um tema com seu nome (ex: empresaA), através do botão Copiar. Sugerimos fazer cópias dos temas padrões que estejam mais alinhados com sua identidade visual.

Onde é utilizado um Tema de Widget?

Os temas de widget são utilizado na configuração dos widgets, no momento da edição das páginas, sendo que um widget pode ter um tema de widgets diferente das outras, exemplo: widget de aniversariantes tem um tema e a widget de bolão pode ter outro tema. Os temas de widget são independentes dos temas de layout, portanto é possível combinar temas de diversas categorias. Em nosso widget, no modo de edição, ao clicar em 'Clique aqui para alterar as configurações' você é levado diretamente para a tela de configurações, onde poderá ser editado os tema de widget, layout e etc... , caso desejar.

Onde é utilizado um Tema de Layout?

O tema de layout pode ser utilizado em qualquer página com o layout da Digte. Lembrando sempre que o layout de página da Digte tem as bordas coloridas, como os da imagem abaixo. Você pode escolhe-lo ao criar uma nova página, criar uma comunidade, ou ao trocar o layout de uma página já existente. Por exemplo: ao escolher a opção de 'Trocar Layout', você verá as opções de layout de página, depois disso basta clicar no layout desejado e clicar em 'Aplicar'. Os temas de layout são utilizados na edição das páginas, sendo que uma página pode ter temas de layout diferente das outras, exemplo: home tem um tema e a página customizada do presidente pode ter outro tema.
Através do wizard de configuração é possível migrar todas as páginas do TOTVS Fluig Plataforma (customizadas e padrões) para um tema de layout do Intranet by Digte.

Configurando um Tema de Widget

Dentro de um tema o usuário poderá alterar diversos recursos, clicando no tópico desejado (ex: Topo e Menu ou Widgets), e visualizar no preview ao lado como ficará sua página no caso da aplicação do tema. Detalhes dos campos do layout: Tipo
Grupo de informações utilizado para identificar o tema de layout. Id (Código do tema): Deve ser preenchido com caracteres minusculos, sem espaços e sem caracteres especiais. Nome (Nome do tema): Deve ser preenchido o nome do tema que será criado. Categoria (Categoria do tema): Este campo possui 3 (três) opções: - Segmento Manufatura. - Segmento Varejo. - Segmento Serviços. Posteriormente, você irá consultar esses segmentos para editar o seu tema. Título Alinhar (Alinhar o título dentro da barra título): Permite alinhar o título e possui 3 (três) opções: - Esquerda: Alinhar o título a esquerda dentro da barra de título. - Direita: Alinhar o título a direita dentro da barra de título. - Centro: Alinhar o título ao dentro da barra de título. Tamanho (Tamanho do título): Permite definir o tamanho do texto em pixels (px). Cor (Cor do texto): Permite definir a cor dos textos e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Fundo (Cor de fundo da barra de título): Permite definir a cor do fundo da barra de título e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Case (Formatação da fonte): Possui 4 (quatro) opções. - Nenhum: Desabilitar formatação. - Capitalizar: Cada palavra começa com letra maiúsculas. - Minúsculas: Todas as palavras ficam minúsculas. - Maiúsculas: Todas as palavras ficam maiúsculas. Família (Fonte do título): Permite definir a fonte padrão do título apenas colocando o nome da fonte e possui 2 (duas) opções: - Google Fonts: Qualquer fonte do google fontes - Fontes do sistema: Fontes padrões do sistema (Ex: Calibri e Arial). Margem superior (Margem superior da barra de título): Permite definir a margem superior da barra título em pixels (px). Margem direita (Margem direita da barra de título): Permite definir a margem direita da barra título em pixels (px). Margem inferior (Margem inferior da barra de título): Permite definir a margem inferior da barra título em pixels (px). Margem esquerda (Margem esquerda da barra de título): Permite definir a margem esquerda da barra título em pixels (px). Espaço interno superior (Espaço interno da barra de título): Permite definir o espaço interno superior da barra de título em pxiels (px). Espaço interno direito (Espaço interno da barra de título): Permite definir o espaço interno direito da barra de título em pxiels (px). Espaço interno inferior (Espaço interno da barra de título): Permite definir o espaço interno inferior da barra de título em pxiels (px). Espaço interno esquerdo (Espaço interno da barra de título): Permite definir o espaço interno esquerdo da barra de título em pxiels (px). Curvatura superior esquerdo (Curvatura da ponta superior esquerda da barra de título): Permite definir a curvatura da ponta superior esquerda da barra de título e possui uma variação de 0 a 50, sendo: - 0: Quadrado. - 50: Redondo. Curvatura superior direito (Curvatura da ponta superior direita da barra de título): Permite definir a curvatura da ponta superior direita da barra de título e possui uma variação de 0 a 50, sendo: - 0: Quadrado. - 50: Redondo. Curvatura inferior esquerdo (Curvatura da ponta inferior esquerda da barra de título): Permite definir a curvatura da ponta inferior esquerda da barra de título e possui uma variação de 0 a 50, sendo: - 0: Quadrado. - 50: Redondo. Curvatura inferior direito (Curvatura da ponta inferior direita da barra de título): Permite definir a curvatura da ponta inferior direita da barra de título e possui uma variação de 0 a 50, sendo: - 0: Quadrado. - 50: Redondo. Habilitar borda inferior (Insere uma borda abaixo da barra de título): Permite inserir uma borda abaixo da barra de título e possui 2 (duas) opções: - Sim: Habilita a borda. - Não: Desabilitar a borda. Espessura (Espessura da borda inferior): Permite definir a espessura da borda inferior em pixels (px). Estilo (Estilo da borda inferior): Permite definir o estilo da borda inferior e possui 7 (sete) opções. - Nenhum: Nenhum estilo para a borda inferior.
- Dashed: Estilo tracejado.
- Dotted: Estilo pontilhado
- Double: Estilo em dobro.
- Groove: Estilo chanfrado interno.
- Ridge: Estilo chanfrado externo.
- Solid: Estilo sólido. Cor (Cor da borda inferior): Permite definir a cor da borda ifnerior e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Ferramentas Habilitar (Habilitar ferramentas): Permite habilitar as ferramentas de collapse e help na barra de título e possui 2 (duas) opções: - Sim: Habilita as ferramentas. - Não: Desabilita as ferramentas. Fundo Ferramentas (Cor de fundo das ferramentas): Permite definir a cor de fundo das ferramentas de collapse e help na barra de título e possui 2 (duas) opções: - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Cor Ferramentas (Cor dos ícones dentro do botão das ferramentas): Permite definir a cor dos ícones das ferramentas de collapse e help na barra de título e possui 2 (duas) opções: - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Posição Ferramentas (Posição das ferramentas dentro da barra de título): Permite definir a posição das ferramentas dentro da barra de título e possui 2 opções: - Esquerda: Posiciona as ferramentas a esquerda dentro da barra de título. - Direita: Posiciona as ferramentas a direita dentro da barra de título. Pixels Ferramentas (Margem direita das ferramentas): Permite definir a margem direita das ferramentas em pixels (px). Collapse Habilitar (Botão collapse): Permite habilitar somente o botão de collapse e possui 2 (duas) opções: - Sim: Habilita o collapse. - Não: Desabilita o collapse. Container Margem superior (Margem superior do conteiner da widget): Permite definir a margem superior do conteiner da widget em pixels (px). Margem direita (Margem direita do conteiner da widget): Permite definir a margem direita do conteiner da widget em pixels (px). Margem inferior (Margem inferior do conteiner da widget): Permite definir a margem inferior do conteiner da widget em pixels (px). Margem esquerda (Margem esquerda do conteiner da widget): Permite definir a margem esquerda do conteiner da widget em pixels (px). Espaço interno (Espaço interno do conteiner): Permite definir a margem interna do conteiner da widget em pixels (px). Imagens Curvatura (Curvatura da imagem): Permite definir a curvatura da imagem e possui uma variação de 0 a 50, sendo: - 0: Quadrado. - 50: Redondo. Tabela Linha ímpar (Cor da linha ímpar): Permite definir a cor da linha ímpar e possui 2 (duas) opções: - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Linha par (Cor da linha par): Permite definir a cor da linha par e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Fonte Cor P e Textos (Cor dos parágrafos e textos comuns): Permite definir a cor do texto e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Família P (Fonte dos parágrafos): Permite definir a fonte padrão do tema de layout apenas colocando o nome da fonte e possui 2 (duas) opções: - Google Fonts: Qualquer fonte do google fontes. - Fontes do sistema: Fontes padrões do sistema (Ex: Calibri e Arial). (H1, H2, H3, H4, H5, H6 e Texto Título Formulário) Família (Fonte dos parágrafos): Permite definir a fonte padrão do tema de layout apenas colocando o nome da fonte e possui 2 (duas) opções: - Google Fonts: Qualquer fonte do google fontes. - Fontes do sistema: Fontes padrões do sistema (Ex: Calibri e Arial). Tamanho (Tamanho do título): Permite definir o tamanho do texto em pixels (px). Cor (Cor da fonte): Permite definir a cor da fonte e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Transformação (Formatação da fonte): Possui 4 (quatro) opções. - Nenhum: Desabilitar formatação. - Capitalizar: Cada palavra começa com letra maiúsculas. - Minúsculas: Todas as palavras ficam minúsculas. - Maiúsculas: Todas as palavras ficam maiúsculas. Botão Comum Cor (Cor da fonte dentro do botão): Permite definir a cor da fonte dentro do botão e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Case (Formatação da fonte): Possui 4 (quatro) opções. - Nenhum: Desabilitar formatação. - Capitalizar: Cada palavra começa com letra maiúsculas. - Minúsculas: Todas as palavras ficam minúsculas. - Maiúsculas: Todas as palavras ficam maiúsculas. Cor Fundo (Cor do botão): Permite definir a cor da fonte dentro do botão e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Borda (Insere uma borda em volta do botão): Permite inserir uma borda em volta do botão e possui 2 (duas) opções: - Sim: Habilita a borda. - Não: Desabilitar a borda. Espessura (Espessura da borda): Permite definir a espessura da borda em pixels (px). Estilo (Estilo da borda): Permite definir o estilo da borda e possui 7 (sete) opções. - Nenhum: Nenhum estilo para a borda inferior. - Dashed: Estilo tracejado. - Dotted: Estilo pontilhado. - Double: Estilo em dobro. - Groove: Estilo chanfrado interno. - Ridge: Estilo chanfrado externo. - Solid: Estilo sólido. Cor (Cor da borda): Permite definir a cor da borda e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Curvatura (Curvatura da imagem): Permite definir a curvatura da imagem e possui uma variação de 0 a 50, sendo: - 0: Quadrado. - 50: Redondo. Navegação Cor (Cor dos botões de navegação. Ex: Setas na direita e esquerda da Widget Destaques Rotativos): Permite definir a cor da borda e possui 2 (duas) opções. - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Ver mais Texto cor (Cor do texto "Ver mais"): Permite definir a cor do texto e possui 2 (duas) opções: - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Ícone cor (Cor do ícone do texto "Ver mais"): Permite definir a cor do ícone e possui 2 (duas) opções: - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Fundo Cor (Cor de fundo da widget): Permite definir a cor de fundo e possui 2 (duas) opções: - Hexadecimal: Colocar o código hexa da cor. Este código será convertido em RGBA. - RGBA: Colocar o código RGBA da cor. Repetir (Repetir imagem de fundo da widget): Caso a imagem de fundo seja pequena, essa opção permite habilitar a repetição da imagem e possui 4 (quatro) opções. - Não repetir: Não repete a imagem. - X: Repete a imagem na direção direita. - Y: Repete a imagem na direção esquerda. - Repetir ambos: Repete a imagem na direção esquerda e direita. Fixo (Efeito da imagem): Permite colocar um efeito na imagem de fundo e possui 3 (três) opções. - Scroll: Habilita um efeito onde a imagem de fundo desliza conforme a página sobe/desce. - Fixed: Habilita um efeito onde a imagem fica fixa no fundo. - Local: ### Comportamento do Container (Comportamento da imagem no fundo da widget): Permite definir o comportamento da imagem no fundo da widget e possui 3 (três) opções: - Original: Sem alterações na imagem de fundo. - Adequar: Adequa a imagem de acordo com o espaço. - Expandir: Aumenta a imagem. Imagem (Imagem de fundo da widget): Permite colocar uma imagem de fundo na widget. - Inserção: Basta clicar na Lupa, a interface do GED será aberta, escolha a imagem marcando um "check" ao lado do nome da imagem. - Deletar: Basta clicar no "X", a imagem de fundo será excluída. Posição (Posição da imagem de fundo): Permite posicionar a imagem no fundo da widget e possui 5 (cinco) opções: - Superior: Posiciona a imagem na área superior do fundo. - Direita: Posiciona a imagem na área direita do fundo. - Inferior: Posiciona a imagem na área inferior do fundo. - Esquerda: Posiciona a imagem na área esquerda do fundo. - Centralizado: Posiciona a imagem ao centro do fundo. Borda Espessura (Espessura da borda superior, direita, inferior ou esquerda): Permite definir a espessura da borda superior, direita, inferior ou esquerda em pixels (px). Estilo (Estilo da borda superior, direita, inferior ou esquerda): Permite definir o estilo da borda superior, direita, inferior ou esquerda e possui 7 (sete) opções. - Nenhum: Nenhum estilo para a borda inferior. - Dashed: Estilo tracejado. - Dotted: Estilo pontilhado. - Double: Estilo em dobro. - Groove: Estilo chanfrado interno. - Ridge: Estilo chanfrado externo.