apitdn/fluig_rag_docs/Plataforma Documentação técnica/Recurso de Páginas e Widgets (WCM)/Construção de Widgets e Layouts/Widgets.md

---
title: Widgets
source: https://tdn.totvs.com/display/fluig/Widgets
path: \Plataforma  Documentação técnica\Recurso de Páginas e Widgets (WCM)\Construção de Widgets e Layouts\Widgets.md
---

# Índice

- 1 [Sobre Widgets](#Widgets-SobreWidgets)
- 2 [Widgets Padrão](#Widgets-WidgetsPadrão)
- 3 [Widgets Personalizados](#Widgets-WidgetsPersonalizados)
- 4 [Utilizar Widgets](#Widgets-UtilizarWidgets)
- 5 [Configuração de Widgets](#Widgets-ConfiguraçãodeWidgets)

## Sobre Widgets

Os *widgets* são componentes de tela que oferecem recursos específicos em páginas ou comunidades para o acompanhamento de Tarefas, Processos ou Documentos, entre outros. A organização de cada *widget* nas páginas é personalizável via edição de página.

Nota

Os *widgets* podem apresentar conteúdos relacionados ao site criado a partir do WCM, componentes do ERP ou ainda promover a integração com sistemas de terceiros.

## Widgets Padrão

O TOTVS Fluig Plataforma possui diversos *widgets* padrão que podem ser utilizados para a composição de uma página pelo usuário. Na tabela abaixo são apresentados alguns *widgets* disponíveis:

|  |  |
| --- | --- |
|  | **Documentos Favoritos** |
| Tenha acesso fácil aos documentos mais utilizados no dia a dia. |
|  | **Documentos Populares** |
| Veja quais são os documentos mais acessados.  Este *widget* possui compatibilidade para visualização no [Fluig mobile](../../Configuração/Mobile/Guia de utilização My Fluig.md). |
|  | **Processos Favoritos** |
| Inicie novas solicitações dos processos que você mais utiliza. |
|  | **Mural de Avisos** |
| Exiba avisos em páginas. |
|  | **Gráficos de Tarefas** |
| De forma visual, veja como estão suas pendências. |
|  | **Nova publicação** |
| Crie publicações em comunidades. |
|  | **Timeline** |
| Acompanhe as publicações de uma comunidades. |
|  | **Visualizador de gráficos** |
| Visualize gráficos de forma fácil e rápida.  Clique [aqui](http://tdn.totvs.com/x/yIHTB) para obter informações sobre como personalizar esse *widget.* |
|  | **Listar registros de *datasets*** |
| Visualize registros de *datasets* em suas páginas ou comunidades. |
|  | **Endereço Web** |
| Acesse endereços *web* de forma fácil e rápida.  Para que o *widget* Endereço Web renderize corretamente a URL solicitada, é necessário que o servidor de destino da URL aceite requisições do tipo *cross-origin*, ou seja, requisições realizadas por páginas *web* de domínios diferentes.  Caso contrário, o seguinte erro será exibido no console do navegador: "Requisição *cross-origin* bloqueada: A política de mesma origem (*Same Origin Policy*) impede a leitura do recurso remoto em http://<URL\_USADO\_NA\_WIDGET>. (Motivo: o cabeçalho CORS '*Access-Control-Allow-Origin*' não está presente)"  Esta widget possui compatibilidade para visualização no [Fluig mobile](../../Configuração/Mobile/Guia de utilização My Fluig.md). |
|  | **Editor de conteúdo** |
| Personalize páginas e comunidades com o conteúdo desejado.  Esta widget possui compatibilidade para visualização no [Fluig mobile](../../Configuração/Mobile/Guia de utilização My Fluig.md).  Atenção!  Não é recomendada a utilização de JavaScript nesta widget. |
|  | **Mini launchpad** |
| Tenha acesso rápido a um app do TOTVS Identity.  Somente apps com usuário e senha definidos no TOTVS Identity são exibidos neste *widget*. |
|  | **Listas** |
| Visualize perspectivas de listas em suas páginas ou comunidades. |
|  | **Tarefas Pendentes** |
| Visualize suas pendências de maneira resumida. |
|  | **Favoritos sociais** |
| Tenha acesso fácil a contatos e comunidades que mais utiliza no dia a dia. |
|  | **Lista de conexões sociais** |
| Visualize suas conexões de comunidades, seguindo e seguidores. |
|  | **Informações Sociais** |
| Visualize as informações de perfil ou comunidade. |
|  | **Navegação de comunidades** |
| Navegue nas galerias de comunidades. |
|  | **Nuvem de *Tags*** |
| Visualize as *tags* mais populares de uma comunidade ou de toda a plataforma. |
|  | **Acesso Centralizado** |
| Tenha acesso fácil à rotinas de sistemas integrados ao Fluig Plataforma. |
|  | **Analytics** |
| Visualize gráficos e *Dashboards* do Analytics de forma fácil e rápida.  Esta widget possui compatibilidade para visualização no [Fluig mobile](../../Configuração/Mobile/Guia de utilização My Fluig.md). |
|  | **Consulta Rápida** |
| Tenha acesso rápido a relatórios simplificados. |
|  | **Aplicação ERP** |
| Integre aplicações do ERP e exiba informações de maneira simples, em formato de página completa. |
|  | **Container ERP** |
| Integre aplicações do ERP e exiba informações de maneira simples e compacta. |
|  | **Lista de desejos** |
| Visualize os treinamentos e trilhas que adicionou em sua lista de desejos. |
|  | **Evolução de aprendizado** |
| Acompanhe sua evolução em Turmas, Trilhas e Treinamentos que participou. |
|  | **Conquistas de aprendizado** |
| Visualize todas as suas conquistas nos Treinamentos, Trilhas e Turmas que participou, incluindo a quantidade de êxitos, comparada à média geral, habilidades principais (Top 5) e pontuações. |
|  | **Detalhe de conquistas** |
| Confira os detalhes das conquistas de Treinamentos, Trilhas e Turmas, e também suas habilidades. |
|  | **Quadro de avisos** |
| Visualize o quadro de avisos das Turmas e Disciplinas no qual já está matriculado. |
|  | **Conquistas** |
| Visualize suas conquistas a partir dos objetivos atingidos. |
|  | **Matriz de conhecimento** |
| Visualize graficamente seus conhecimentos com base nas pontuações conquistadas. |
|  | **Nível e experiência** |
| Acompanhe seu nível atual e suas experiências alcançadas. |
|  | **Perfil de conquistas** |
| Exiba todas as suas conquistas e troféus de maneira personalizada. |
|  | *****Ranking***** |
| Veja o ranking dos usuários com mais pontos a partir da participação ativa na rede. |
|  | **Troféus** |
| Navegue entre seus troféus conquistados e exiba-os em seu perfil. |
|  | **Adicionar ao calendário** |
| Crie e divulgue eventos facilmente. Os interessados podem adicioná-los à sua agenda com apenas um clique.  Esse *widget* está disponível na [Fluig Store](http://www.fluigstore.com). Obtenha mais informações em [Calendário](http://tdn.totvs.com/pages/viewpage.action?pageId=219694281). |
|  | **Links úteis**   ---   Facilite o acesso as informações essenciais para os usuários, permitindo adicionar links de páginas externas e internas. |
|  | **Processos**   ---   Permite exibir uma lista personalizada dos processos disponíveis para inicialização em suas páginas ou comunidades. |
|  | **Últimos acessos**   ---   Permite exibir os últimos acessos feitos dentro da plataforma. O principal objetivo é facilitar o acesso e utilidade das informações essenciais para os usuários. |
|  | **Templates**   ---   Permite visualizar os templates de processos disponíveis e criar processos em branco. |

Veja o exemplo em nosso repositório [aqui](https://git.fluig.com/projects/SAMPLES/repos/style-guide/browse).

## Widgets Personalizados

Os *widgets* personalizados são desenvolvidos pelo próprio usuário por meio de *templates* de código. Por intermédio deles, o usuário pode fornecer conteúdo personalizado, renderizar componentes de ERPou mesmo de sistemas terceiros.  

É possível citar como exemplo de *widget* personalizado, o *widget* Resumo de Pedidos de Venda, que busca informações no ERP e apresenta um totalizador para os usuários:

![](..\..\..\images\widget-customizado.jpg)

Nota

Para mais informações sobre criação de *widgets* personalizado acesse o guia [Construção de componentes WCM no Fluig Studio](../Construção de Widgets e Layouts.md).

## Utilizar Widgets

A seguir visualize como utilizar *widgets* em uma página. Movimente-se nas abas para acompanhar o passo a passo:

- Para abrir o modo de edição de uma página, acesse-a pelo menu lateral esquerdo, clique em **Configurações** localizado no canto superior direito e posteriormente em **Editar Página.**

**![](..\..\..\images\Image%2007%2012%20002.png)**

- No modo de edição de uma página, é possível adicionar *widgets* aos [*slots*](https://tdn.totvs.com/pages/viewpage.action?pageId=234455982). Observe que em cada *slot* da página exemplo abaixo, já existe um *widget* adicionado.

![](..\..\..\images\Image%2007%2012%20003.png)

- É possível adicionar mais que um *widget* a um *slot*. Para adicionar um novo *widget* na página, clique em ![](..\..\..\images\image2014-6-25%20161014.png)e procure pelo *widget* desejado. Posteriormente, basta clicar no botão **Adicionar** e **Fechar**.

![](..\..\..\images\Image%2007%2012%20004.png)

- O *widget foi* adicionado à página.

![](..\..\..\images\Image%2007%2012%20005.png)

- Edite o *widget* conforme desejar. Neste exemplo foi adicionado o *widget* Editor de Conteúdo.

- Lembre-se que você pode mover *widgets* entre *slots*. Neste exemplo, movemos o *widget* Mural de avisos para o *Slot* A.

![](..\..\..\images\Image%2007%2012%20007.png)

- Após adicionar e configurar os *widgets*, é necessário publicar a página para que seus componentes possam ser visualizados. Para isso, no menu **Configurações**, clique em **Publicar Página**.

![](..\..\..\images\Image%2007%2012%20008.png)

- A página será apresentada.

![](..\..\..\images\Image%2007%2012%20009.png)

## Configuração de Widgets

A configuração dos *widgets* é realizada por meio da edição de página, na qual os *widgets* existentes na página são dispostos em modo de edição.

- Para configurar *widgets*, acesse a página no qual ele foi adicionado.

![](..\..\..\images\config_widget%20(1).png)

- Acesse o menu **Configurações** e clique na opção **Editar página**.

![](..\..\..\images\config_widget%20(2).png)

- Todos os *widgets* disponíveis na página que possuam opções de configuração, são abertos em modo de edição.

![](..\..\..\images\config_widget%20(3).png)

- Para o *widget* Timeline, por exemplo, é possível definir o contexto das publicações, a ordenação padrão, permitir ao usuário alterar a ordenação, rolagem contínua e quantidade de publicações. Após finalizado clique em **Salvar**.

![](..\..\..\images\config_widget%20(4).png)

- As alterações poderão ser visualizadas após a publicação da página através da opção **Publicar página** do menu **Configurações**.

![](..\..\..\images\config_widget%20(5).png)