---
title: Camada visual Timeline
source: https://tdn.totvs.com/display/fluig/Camada+visual+Timeline
path: \Plataforma  Documentação técnica\Recurso de Comunidades (Social)\Timeline\Camada visual Timeline.md
---

# Índice

- 1 [Arquivos básicos da Timeline](#CamadavisualTimeline-ArquivosbásicosdaTimeline)
- 2 [Ação de edição](#CamadavisualTimeline-Açãodeedição)
- 3 [Ação de visualização](#CamadavisualTimeline-Açãodevisualização)
  - 3.1 [Estrutura básica de templates Mustache na timeline](#CamadavisualTimeline-EstruturabásicadetemplatesMustachenatimeline)
  - 3.2 [Tipos de Publicação](#CamadavisualTimeline-TiposdePublicação)
    - 3.2.1 [Novo Artigo criado](#CamadavisualTimeline-NovoArtigocriado)
    - 3.2.2 [Publicação na Comunidade](#CamadavisualTimeline-PublicaçãonaComunidade)
    - 3.2.3 [Publicação Compartilhada](#CamadavisualTimeline-PublicaçãoCompartilhada)
    - 3.2.4 [Publicação com Imagem](#CamadavisualTimeline-PublicaçãocomImagem)
    - 3.2.5 [Publicação com vídeo](#CamadavisualTimeline-Publicaçãocomvídeo)
    - 3.2.6 [Publicação com vídeo do YouTube](#CamadavisualTimeline-PublicaçãocomvídeodoYouTube)
    - 3.2.7 [Publicação com Menção e Hashtag](#CamadavisualTimeline-PublicaçãocomMençãoeHashtag)
    - 3.2.8 [Modal para Compartilhamento da Publicação](#CamadavisualTimeline-ModalparaCompartilhamentodaPublicação)
  - 3.3 [Estrutura básica de template Mustache de comentário em uma Publicação](#CamadavisualTimeline-EstruturabásicadetemplateMustachedecomentárioemumaPublicação)
  - 3.4 [Comentário](#CamadavisualTimeline-Comentário)
    - 3.4.1 [Comentário de uma Publicação](#CamadavisualTimeline-ComentáriodeumaPublicação)

## Arquivos básicos da Timeline

Como todos os componentes do TOTVS Fluig Plataforma, a Timeline é desenvolvida baseada no *framework* de *templates* [FreeMarker](http://freemarker.org/) (.ftl). O FreeMarker é responsável pela camada de visualização, onde sobre ele é escrito todo HTML do componente. Bem como o(s) arquivo(s) de [FreeMarker](http://freemarker.org/), todos os componentes possuem arquivos próprios de CSS (.css) e JavaScript (.js).

## Ação de edição

No modo de edição da *timeline* você pode configurar as opções de visualização.

![](..\..\..\images\Image%2022.png)

![](..\..\..\images\Image%202.png)

## Ação de visualização

Após gerar uma nova publicação, esse conteúdo é exibido na Timeline em diferentes tipos de visualização:

### Estrutura básica de templates Mustache na timeline

**No HTML**

```
<script type="text/template" class="social-timeline-post-template">
	<li data-post-id="{{postId}}" class="timeline-list-posts-item">
		<div class="panel panel-default fs-no-margin">
			<div class="panel-body fs-sm-space media clearfix">
				<div class="media-body">
					{{#postHeader}}
						<h5 class="media-heading">
							...
						</h5>
					{{/postHeader}}
					{{#text}}
						<p>{{{text}}}</p>
					{{/text}}
					{{#variableContent}}
						{{>postContent}}
					{{/variableContent}}
				</div>
			</div>
			<div class="panel-footer">
				<ul class="list-inline timeline-list-actions">
					<li class="timeline-list-actions-item">
						...
					</li>
				</ul>
			</div>
		</div>
		<ul class="fs-md-space fs-no-padding-top fs-no-padding-bottom timeline-list-comments" data-timeline-list-comments>
			{{#comments}}
				{{>postComments}}
			{{/comments}}
			{{#existsMoreComments}}
				{{>postMoreComments}}
			{{/existsMoreComments}}
		</ul>
	</li>
</script>
```

### Tipos de Publicação

Segue abaixo os tipos de Publicação disponíveis na Timeline.

#### Novo Artigo criado

![](..\..\..\images\pic-new-article.png)

#### Publicação na Comunidade

![](..\..\..\images\pic-post-in-community.png)

#### Publicação Compartilhada

![](..\..\..\images\Image%2023.png)

#### Publicação com Imagem

![](..\..\..\images\Image%2024.png)

#### Publicação com vídeo

![](..\..\..\images\Image%2031.png)

#### Publicação com vídeo do YouTube

![](..\..\..\images\Image%2026.png)

#### Publicação com Menção e Hashtag

![](..\..\..\images\Image%2028.png)

#### Modal para Compartilhamento da Publicação

![](..\..\..\images\Image%2037.png)

### Estrutura básica de template Mustache de comentário em uma Publicação

**No HTML**

```
<script type="text/template" class="social-timeline-comment-template">
	<li data-comment-id="{{id}}" class="panel panel-default fs-no-margin timeline-list-comments-item">
		<div class="panel-body fs-sm-space media clearfix">
			<a class="pull-left" href="{{tenantURI}}/{{user.page}}">
				...
			</a>
			<div class="media-body">
				<h5 class="media-heading">
					...
				</h5>
				<p>{{{comment}}}</p>
			</div>
		</div>
		<div class="panel-footer fs-no-bg fs-no-border-top fs-no-padding-top">
			<ul class="list-inline">
				<li class="timeline-list-actions-item">
					<span class="counter-group">
						...
					</span>
				</li>
			</ul>
		</div>
	</li>
</script>
```

### Comentário

Segue abaixo o tipo de Comentário de Publicação disponível na Timeline.

#### Comentário de uma Publicação

![](..\..\..\images\Image%2029.png)