HTML


<div id="main-content" class="wiki-content group">
	<h1 id="Widgets-Índice">Índice</h1>
	<p>
		<style type='text/css'>/*<![CDATA[*/
div.rbtoc1412695845570 {
	padding: 0px;
}
div.rbtoc1412695845570 ul {
	list-style: none;
	margin-left: 0px;
}
div.rbtoc1412695845570 li {
	margin-left: 0px;
	padding-left: 0px;
}
/*]]>*/
</style>
	<div class='toc-macro rbtoc1412695845570'>
		<ul class='toc-indentation'>
			<li><span class='TOCOutline'>1</span> <a
				href='#Widgets-SobreWidgets'>Sobre Widgets</a>
				<ul class='toc-indentation'>
					<li><span class='TOCOutline'>1.1</span> <a
						href='#Widgets-WidgetsPadrão'>Widgets Estándares</a></li>
					<li><span class='TOCOutline'>1.2</span> <a
						href='#Widgets-WidgetsCustomizados'>Widgets personalizados</a></li>
					<li><span class='TOCOutline'>1.3</span> <a
						href='#Widgets-UtilizarWidgets'>Utilizar Widgets</a></li>
					<li><span class='TOCOutline'>1.4</span> <a
						href='#Widgets-ConfiguraçãodeWidgets'>Configuración de Widgets</a></li>
				</ul></li>
		</ul>
	</div>
	</p>
	<h1 id="Widgets-SobreWidgets">Sobre Widgets</h1>
	<p>
		Los&#160;<em><strong>Widgets</strong></em>&#160;son componentes de
		pantalla que ofrecen funcionalidades específicas en la página Home o
		para la creación de nuevas páginas para el seguimiento de Tareas,
		Procesos o Documentos, entre otros. La organización de cada&#160;<em><strong>widget</strong></em>&#160;en
		las páginas es personalizable vía edición de página.
	</p>
	<div class="aui-message hint shadowed information-macro">
		<p class="title">Nota</p>
		<span class="aui-icon icon-hint">Icon</span>
		<div class="message-content">
			<p>
				Los <em><strong>Widgets</strong></em> pueden presentar contenidos
				relacionados con el sitio creado a partir de WCM, componentes del
				ERP o incluso promover la integración con sistemas de terceros.
			</p>
		</div>
	</div>
	<p>&#160;</p>
	<h2 id="Widgets-WidgetsPadrão">Widgets Estándares</h2>
	<p>Fluig posee diversos Widgets estándares que se pueden utilizar
		para la&#160;composición de una página por parte del usuario.&#160;En
		la tabla a continuación se presentan algunos Widgets disponibles:</p>
	<p>&#160;</p>
	<div class="table-wrap">
		<table class="confluenceTable">
			<tbody>
				<tr>
					<td rowspan="2" class="confluenceTd"><strong><img
							class="confluence-embedded-image confluence-thumbnail" width="40"
							src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_docs_favoritos.png?version=2&modificationDate=1414427798000&api=v2"
							data-image-src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_docs_favoritos.png?version=2&modificationDate=1414427798000&api=v2"></strong></td>
					<td class="confluenceTd"><strong>Documentos Favoritos</strong></td>
				</tr>
				<tr>
					<td class="confluenceTd"><span>Tenga acceso fácil a los
							documentos más utilizados cotidianamente.</span></td>
				</tr>
				<tr>
					<td rowspan="2" class="confluenceTd"><img
						class="confluence-embedded-image confluence-thumbnail" width="40"
						src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_docs_populares.png?version=2&modificationDate=1414427888000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_docs_populares.png?version=2&modificationDate=1414427888000&api=v2"></td>
					<td class="confluenceTd"><strong>Documentos Populares</strong></td>
				</tr>
				<tr>
					<td colspan="1" class="confluenceTd"><span>Vea cuáles
							son los documentos más accedidos.</span></td>
				</tr>
				<tr>
					<td rowspan="2" class="confluenceTd"><img
						class="confluence-embedded-image confluence-thumbnail" width="40"
						src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_processos_favoritos.png?version=2&modificationDate=1414427954000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_processos_favoritos.png?version=2&modificationDate=1414427954000&api=v2"></td>
					<td colspan="1" class="confluenceTd"><strong>Procesos
							Favoritos</strong></td>
				</tr>
				<tr>
					<td colspan="1" class="confluenceTd"><span>Inicie
							nuevas solicitudes de los procesos que usted más utiliza.</span></td>
				</tr>
				<tr>
					<td rowspan="2" class="confluenceTd"><img
						class="confluence-embedded-image confluence-thumbnail" width="40"
						src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_mural_avisos.png?version=2&modificationDate=1414428007000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_mural_avisos.png?version=2&modificationDate=1414428007000&api=v2"></td>
					<td colspan="1" class="confluenceTd"><strong>Mural de
							Avisos</strong></td>
				</tr>
				<tr>
					<td colspan="1" class="confluenceTd"><span>Exhiba
							avisos en páginas.</span></td>
				</tr>
				<tr>
					<td rowspan="2" class="confluenceTd"><img
						class="confluence-embedded-image confluence-thumbnail" width="40"
						src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_grafico_tarefas.png?version=2&modificationDate=1414428066000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_grafico_tarefas.png?version=2&modificationDate=1414428066000&api=v2"></td>
					<td colspan="1" class="confluenceTd"><strong>Gráficos
							de Tareas</strong></td>
				</tr>
				<tr>
					<td colspan="1" class="confluenceTd"><span>De forma
							visual, vea cómo están sus pendientes.</span></td>
				</tr>
				<tr>
					<td rowspan="2" class="confluenceTd"><img
						class="confluence-embedded-image confluence-thumbnail" width="40"
						src="attachments/142813325/147095628.png"
						data-image-src="attachments/142813325/147095628.png"></td>
					<td colspan="1" class="confluenceTd"><strong>Detalles
							de la Comunidad</strong></td>
				</tr>
				<tr>
					<td colspan="1" class="confluenceTd">Visualice la información
						de una comunidad.</td>
				</tr>
				<tr>
					<td rowspan="2" class="confluenceTd"><img
						class="confluence-embedded-image confluence-thumbnail" width="40"
						src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_nova_publicacao.png?version=2&modificationDate=1414428220000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_nova_publicacao.png?version=2&modificationDate=1414428220000&api=v2"></td>
					<td colspan="1" class="confluenceTd"><strong>Nueva
							publicación</strong></td>
				</tr>
				<tr>
					<td colspan="1" class="confluenceTd"><span>Cree
							publicaciones en comunidades.</span></td>
				</tr>
				<tr>
					<td rowspan="2" class="confluenceTd"><img
						class="confluence-embedded-image confluence-thumbnail" width="40"
						src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_infos_sociais.png?version=2&modificationDate=1414433373000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_infos_sociais.png?version=2&modificationDate=1414433373000&api=v2"></td>
					<td colspan="1" class="confluenceTd"><strong>Informaciones
							Sociales</strong></td>
				</tr>
				<tr>
					<td colspan="1" class="confluenceTd"><span>Visualice
							sus contactos y comunidades.</span></td>
				</tr>
				<tr>
					<td rowspan="2" class="confluenceTd"><img
						class="confluence-embedded-image confluence-thumbnail" width="40"
						src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_timeline.png?version=2&modificationDate=1414428286000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_timeline.png?version=2&modificationDate=1414428286000&api=v2"></td>
					<td colspan="1" class="confluenceTd"><strong>Timeline</strong></td>
				</tr>
				<tr>
					<td colspan="1" class="confluenceTd"><span>Siga las
							publicaciones de una comunidad.</span></td>
				</tr>
				<tr>
					<td rowspan="2" class="confluenceTd"><img
						class="confluence-embedded-image confluence-thumbnail" width="40"
						src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_listas.png?version=2&modificationDate=1414429985000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_listas.png?version=2&modificationDate=1414429985000&api=v2"></td>
					<td colspan="1" class="confluenceTd"><strong>Lista de
							Comunidades</strong></td>
				</tr>
				<tr>
					<td colspan="1" class="confluenceTd"><span>Consulte las
							comunidades disponibles.</span></td>
				</tr>
				<tr>
					<td rowspan="2" class="confluenceTd"><img
						class="confluence-embedded-image confluence-thumbnail" width="40"
						src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_visualizador_graficos.png?version=3&modificationDate=1414428471000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_visualizador_graficos.png?version=3&modificationDate=1414428471000&api=v2"></td>
					<td colspan="1" class="confluenceTd"><strong>Visualizador
							de gráficos</strong></td>
				</tr>
				<tr>
					<td colspan="1" class="confluenceTd"><span>Visualice
							gráficos de forma fácil y rápida.</span></td>
				</tr>
				<tr>
					<td rowspan="2" class="confluenceTd"><img
						class="confluence-embedded-image confluence-thumbnail" width="40"
						src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_endereco_web.png?version=2&modificationDate=1414428642000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_endereco_web.png?version=2&modificationDate=1414428642000&api=v2"></td>
					<td colspan="1" class="confluenceTd"><strong>
							Dirección WEB</td>
				</tr>
				<tr>
					<td colspan="1" class="confluenceTd"><span>Acceda a
							direcciones WEB de manera rápida y fácil.</span></td>
				</tr>
				<tr>
					<td rowspan="2" class="confluenceTd"><img
						class="confluence-embedded-image confluence-thumbnail" width="40"
						src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_editor_conteudo.png?version=3&modificationDate=1414429800000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_editor_conteudo.png?version=3&modificationDate=1414429800000&api=v2"></td>
					<td colspan="1" class="confluenceTd"><strong> Editor
							de contenido<strong></td>
				</tr>
				<tr>
					<td colspan="1" class="confluenceTd"><span>Cree
							contenidos ricos para su página.</span></td>
				</tr>
				<tr>
					<td rowspan="2" class="confluenceTd"><img
						class="confluence-embedded-image confluence-thumbnail" width="40"
						src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_mini_launchpad.png?version=2&modificationDate=1414429883000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_mini_launchpad.png?version=2&modificationDate=1414429883000&api=v2"></td>
					<td colspan="1" class="confluenceTd"><strong>Mini
							launchpad</strong></td>
				</tr>
				<tr>
					<td colspan="1" class="confluenceTd">Acceda rápidamente a una
						app de Fluig Identity.</span>
					</td>
				</tr>
				<tr>
					<td rowspan="2" class="confluenceTd"><img
						class="confluence-embedded-image confluence-thumbnail" width="40"
						src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_listas.png?version=2&modificationDate=1414429985000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_listas.png?version=2&modificationDate=1414429985000&api=v2"></td>
					<td colspan="1" class="confluenceTd"><strong>Listas</strong></td>
				</tr>
				<tr>
					<td colspan="1" class="confluenceTd"><span>Visualice
							perspectivas de listas en sus páginas o comunidades.</span></td>
				</tr>
				<tr>
					<td rowspan="2" class="confluenceTd"><img
						class="confluence-embedded-image confluence-thumbnail" width="40"
						src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_tarefas_pendentes.png?version=2&modificationDate=1414430231000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_tarefas_pendentes.png?version=2&modificationDate=1414430231000&api=v2"></td>
					<td colspan="1" class="confluenceTd"><strong> Tareas
							pendientes<strong></td>
				</tr>
				<tr>
					<td colspan="1" class="confluenceTd"><span>Visualice
							sus pendientes de manera resumida a través de un gráfico.</span></td>
				</tr>
				<tr>
					<td rowspan="2" class="confluenceTd"><img
						class="confluence-embedded-image confluence-thumbnail" width="40"
						src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_favoritos_sociais.png?version=2&modificationDate=1414430340000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_favoritos_sociais.png?version=2&modificationDate=1414430340000&api=v2"></td>
					<td colspan="1" class="confluenceTd"><strong>Favoritos
							sociales</strong></td>
				</tr>
				<tr>
					<td colspan="1" class="confluenceTd"><span>Acceda
							fácilmente a los contactos y comunidades más utilizados en la
							vida diaria.</span></td>
				</tr>
				<tr>
					<td rowspan="2" class="confluenceTd"><img
						class="confluence-embedded-image confluence-thumbnail" width="40"
						src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_nav_comunidades.png?version=2&modificationDate=1414430889000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_nav_comunidades.png?version=2&modificationDate=1414430889000&api=v2"></td>
					<td colspan="1" class="confluenceTd"><strong>
							Navegación de comunidades<strong></td>
				</tr>
				<tr>
					<td colspan="1" class="confluenceTd"><span>Navegue en
							las galerías de comunidades.</span></td>
				</tr>
				<tr>
					<td rowspan="2" class="confluenceTd"><img
						class="confluence-embedded-image confluence-thumbnail" width="40"
						src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_acesso_centralizado.png?version=2&modificationDate=1414431721000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_acesso_centralizado.png?version=2&modificationDate=1414431721000&api=v2"></td>
					<td colspan="1" class="confluenceTd"><strong> Acceso
							centralizado<strong></td>
				</tr>
				<tr>
					<td colspan="1" class="confluenceTd"><span>Acceda
							fácilmente a rutinas de sistemas integrados a Fluig.</span></td>
				</tr>
				<tr>
					<td rowspan="2" class="confluenceTd"><img
						class="confluence-embedded-image confluence-thumbnail" width="40"
						src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_analytics.png?version=2&modificationDate=1414433067000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_analytics.png?version=2&modificationDate=1414433067000&api=v2"></td>
					<td colspan="1" class="confluenceTd"><strong>Analytics</strong></td>
				</tr>
				<tr>
					<td colspan="1" class="confluenceTd"><span>Visualice
							gráficos y </span><em>Dashboards</em><span> de </span><em>Analytics</em><span>
							de forma fácil y rápida.</span></td>
				</tr>
				<tr>
					<td rowspan="2" class="confluenceTd"><img
						class="confluence-embedded-image confluence-thumbnail" width="40"
						src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_consulta_rapida.png?version=3&modificationDate=1414433099000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/thumbnails/142813325/widget_consulta_rapida.png?version=3&modificationDate=1414433099000&api=v2"></td>
					<td colspan="1" class="confluenceTd"><strong>Consulta
							Rápida</strong></td>
				</tr>
				<tr>
					<td colspan="1" class="confluenceTd"><span>Acceda
							rápidamente a informes simplificados.</span></td>
				</tr>
			</tbody>
		</table>
	</div>
	<p>&#160;</p>
	<p>&#160;</p>
	<h2 id="Widgets-WidgetsCustomizados">Widgets Personalizados</h2>
	<p>
		Los&#160;<strong><em>Widgets</em>&#160;personalizados&#160;</strong>son
		creados por el propio usuario por medio de&#160;<em>templates</em>&#160;de
		código. Por medio de ellos, el usuario puede suministrar contenido
		personalizado, renderizar componentes de&#160;<em>ERP&#160;</em>o
		incluso de otros sistemas de terceros.&#160;<span>Es posible
			citar como ejemplo de&#160;</span><strong><em>Widget</em>&#160;Personalizado</strong><span>,
			el&#160;</span><strong><em>Widget</em>&#160;de Resumen de Pedidos
			de Venta</strong><span>, que busca informaciones en el&#160;</span><em>ERP</em><span>&#160;y
			presenta un totalizador para los usuarios:</span>
	</p>
	<p>
		<img class="confluence-embedded-image image-center"
			src="http://www.tdn.totvs.com/download/attachments/142813325/widget-customizado.jpg?version=2&modificationDate=1404135456000&api=v2"
			data-image-src="http://www.tdn.totvs.com/download/attachments/142813325/widget-customizado.jpg?version=2&modificationDate=1404135456000&api=v2">
	</p>
	<div class="aui-message hint shadowed information-macro">
		<p class="title">Nota</p>
		<span class="aui-icon icon-hint">Icon</span>
		<div class="message-content">
			<p>
				Para obtener más informaciones sobre la creación de widgets
				personalizados acceda a la guía <a href="113803693.html">Construcción
					de componentes WCM en el Fluig Studio</a>.
			</p>
		</div>
	</div>
	<p>&#160;</p>
	<h2 id="Widgets-UtilizarWidgets">Utilizar Widgets</h2>
	<p>
		A continuación visualice cómo utilizar&#160;<strong><em>Widgets</em></strong>&#160;en
		una página. Muévase en las pestañas para seguir las instrucciones:
	</p>
	<p>&#160;</p>
	<a name="composition-deck-samples"></a>
	<div id="samples" class="deck" history="false" loopcards="false"
		effecttype="fade" effectduration="0.5" nextafter="0.0">
		<ul class="tab-navigation"></ul>
		<!-- // .tab-navigation -->
		<div class="deck-cards panel" style="">
			<div id="1" class="deck-card  active-pane" style="" cssclass=""
				accesskey="" label="Passo1" title="" nextafter="0"
				effecttype="default" effectduration="-1.0">
				<p>&#160;</p>
				<ul>
					<li><p>
							<span>Para el acceso al modo de edición de una página,
								ábrala en el menú lateral izquierdo y haga clic en&#160;</span><strong>Configuraciones</strong><span>&#160;localizado
								en la esquina superior derecha y posteriormente en&#160;</span><strong>Editar
								Página.</strong>
						</p></li>
				</ul>
				<p>
					<strong><img
						class="confluence-embedded-image image-center" width="500"
						src="http://www.tdn.totvs.com/download/attachments/142813325/image2014-6-25%2016%3A7%3A1.png?version=1&modificationDate=1403723086000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/attachments/142813325/image2014-6-25%2016%3A7%3A1.png?version=1&modificationDate=1403723086000&api=v2"></strong>
				</p>
				<p>
					<strong><br /></strong>
				</p>
			</div>
			<div id="2" class="deck-card " style="" cssclass="" accesskey=""
				label="Passo 2" title="" nextafter="0" effecttype="default"
				effectduration="-1.0">
				<p>&#160;</p>
				<div>
					<ul>
						<li><p>
								En<span>el modo de edición de una página, es posible
									agregar&#160;</span><strong><em>Widgets</em></strong><span>&#160;a
									los&#160;</span><strong><em>slots.</em></strong><span>&#160;Observe
									que en cada slot de la página ejemplo, ya existe un widget
									agregado</span><span>.&#160;</span>
							</p>
							<p>
								<span><br /></span>
							</p></li>
					</ul>
				</div>
				<div>
					<img class="confluence-embedded-image image-center" width="500"
						src="http://www.tdn.totvs.com/download/attachments/142813325/image2014-6-25%2016%3A9%3A1.png?version=1&modificationDate=1403723207000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/attachments/142813325/image2014-6-25%2016%3A9%3A1.png?version=1&modificationDate=1403723207000&api=v2">
				</div>
			</div>
			<div id="3" class="deck-card " style="" cssclass="" accesskey=""
				label="Passo 3" title="" nextafter="0" effecttype="default"
				effectduration="-1.0">
				<p>&#160;</p>
				<ul>
					<li><p>
							<span><span>Es posible agregar más de un widget a
									un slot, p</span>ara agregar un nuevo&#160;</span><strong><em>Widget</em></strong><span>&#160;en
								la página, haga clic <img class="confluence-embedded-image"
								src="http://www.tdn.totvs.com/download/attachments/142813325/image2014-6-25%2016%3A12%3A51.png?version=1&modificationDate=1403723436000&api=v2"
								data-image-src="http://www.tdn.totvs.com/download/attachments/142813325/image2014-6-25%2016%3A12%3A51.png?version=1&modificationDate=1403723436000&api=v2">y
								busque el Widget deseado
							</span><span>.&#160;Posteriormente, simplemente acceda al botón <strong>Agregar
							</strong>y<strong> Cerrar</strong>.
							</span>
						</p>
						<p>
							<br /> <img class="confluence-embedded-image image-center"
								width="500" src="http://www.tdn.totvs.com/download/attachments/142813325/image2014-6-25%2016%3A12%3A51.png?version=1&modificationDate=1403723436000&api=v2"
								data-image-src="http://www.tdn.totvs.com/download/attachments/142813325/image2014-6-25%2016%3A12%3A51.png?version=1&modificationDate=1403723436000&api=v2">
						</p></li>
				</ul>
				<p>&#160;</p>
			</div>
			<div id="4" class="deck-card " style="" cssclass="" accesskey=""
				label="Passo 4" title="" nextafter="0" effecttype="default"
				effectduration="-1.0">
				<p>&#160;</p>
				<ul>
					<li><p>
							El&#160;<strong><em>Widget</em></strong>&#160;se agrega a la
							página.&#160;
						</p>
						<p>
							<br /> <img class="confluence-embedded-image image-center"
								width="500" src="http://www.tdn.totvs.com/download/attachments/142813325/image2014-6-25%2016%3A14%3A52.png?version=1&modificationDate=1403723557000&api=v2"
								data-image-src="http://www.tdn.totvs.com/download/attachments/142813325/image2014-6-25%2016%3A14%3A52.png?version=1&modificationDate=1403723557000&api=v2">
						</p></li>
				</ul>
				<p>
					<strong><br /></strong>
				</p>
			</div>
			<div id="5" class="deck-card " style="" cssclass="" accesskey=""
				label="Passo 5" title="" nextafter="0" effecttype="default"
				effectduration="-1.0">
				<p>&#160;</p>
				<ul>
					<li><p>Edite el Widget como desee. En este ejemplo se
							agregó el widget Editor de Contenido.</p></li>
					<li><p>
							Recuerde que usted puede mover <strong>widgets</strong> entre <strong>slots</strong>,
							en este ejemplo, movemos el <strong>widget Documentos
								Favoritos</strong> al <em>Slot A</em>.
						</p></li>
				</ul>
				<p>&#160;</p>
				<p>
					<strong><img
						class="confluence-embedded-image image-center" width="500"
						src="http://www.tdn.totvs.com/download/attachments/142813325/image2014-6-25%2016%3A38%3A5.png?version=1&modificationDate=1403724951000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/attachments/142813325/image2014-6-25%2016%3A38%3A5.png?version=1&modificationDate=1403724951000&api=v2"></strong>
				</p>
				<p>
					<strong><br /></strong>
				</p>
			</div>
			<div id="6" class="deck-card " style="" cssclass="" accesskey=""
				label="Passo 6" title="" nextafter="0" effecttype="default"
				effectduration="-1.0">
				<p>&#160;</p>
				<ul>
					<li><p>
							Después de agregar y configurar los&#160;<strong><em>Widgets</em></strong>,
							es necesario publicar la página para que sus componentes
							configurados se puedan visualizar. Para eso, en el <strong>Menú
								de Configuraciones</strong>, haga clic en <strong>Publicar
								Página.</strong>
						</p>
						<p>&#160;</p>
						<p style="text-align: center;">
							<img class="confluence-embedded-image" width="500"
								src="http://www.tdn.totvs.com/download/attachments/142813325/image2014-6-25%2016%3A37%3A8.png?version=1&modificationDate=1403724893000&api=v2"
								data-image-src="http://www.tdn.totvs.com/download/attachments/142813325/image2014-6-25%2016%3A37%3A8.png?version=1&modificationDate=1403724893000&api=v2">
						</p>
						<p>
							<strong><br /></strong>
						</p></li>
				</ul>
			</div>
			<div id="7" class="deck-card " style="" cssclass="" accesskey=""
				label="Passo 7" title="" nextafter="0" effecttype="default"
				effectduration="-1.0">
				<p>&#160;</p>
				<ul>
					<li><p>Se presenta la página.&#160;</p>
						<p>
							<br /> <img class="confluence-embedded-image image-center"
								width="500" src="http://www.tdn.totvs.com/download/attachments/142813325/image2014-6-25%2016%3A38%3A49.png?version=1&modificationDate=1403724994000&api=v2"
								data-image-src="http://www.tdn.totvs.com/download/attachments/142813325/image2014-6-25%2016%3A38%3A49.png?version=1&modificationDate=1403724994000&api=v2">
						</p></li>
				</ul>
				<p>&#160;</p>
			</div>
			<p>&#160;</p>
			<p>&#160;</p>
		</div>
	</div>
	<!-- // .deck -->
	<p>&#160;</p>
	<h2 id="Widgets-ConfiguraçãodeWidgets">Configuración de Widgets</h2>
	<p>
		Algunos&#160;<strong><em>Widgets</em></strong>&#160;necesitan
		configuración para el correcto funcionamiento. Esta configuración es
		realizada por medio del recurso&#160;<strong>Editar</strong>&#160;presente
		en el menú de acciones del&#160;<strong><em>Widget.</em></strong>&#160;Ejemplos:&#160;<strong><em>Widgets</em>&#160;Editor
			de Contenido</strong>,&#160;<strong>Listas</strong>&#160;y&#160;<strong>Dirección
			WEB,</strong>&#160;entre otros.&#160;A continuación se presentan las
		configuraciones&#160;del&#160;<strong>Widget Dirección WEB</strong>&#160;para
		edición:
	</p>
	<p>
		<img class="confluence-embedded-image image-center" width="500"
			src="http://www.tdn.totvs.com/download/attachments/142813325/EnderecoWeb-conf.PNG?version=1&modificationDate=1403720391000&api=v2"
			data-image-src="http://www.tdn.totvs.com/download/attachments/142813325/EnderecoWeb-conf.PNG?version=1&modificationDate=1403720391000&api=v2">
	</p>
	<p style="text-align: center;">&#160;</p>
	<p>
		Otra forma de configurar&#160;<strong><em>Widgets</em></strong>&#160;es
		por medio de la pantalla de edición de página, en el cual todos
		los&#160;<strong><em>Widgets</em></strong>&#160;agregados en la página
		se disponen en modo de edición.
	</p>
	<p>&#160;</p>
	<a name="composition-deck-samples"></a>
	<div id="samples" class="deck" history="false" loopcards="false"
		effecttype="fade" effectduration="0.5" nextafter="0.0">
		<ul class="tab-navigation"></ul>
		<!-- // .tab-navigation -->
		<div class="deck-cards panel" style="">
			<div id="1" class="deck-card  active-pane" style="" cssclass=""
				accesskey="" label="Passo1" title="" nextafter="0"
				effecttype="default" effectduration="-1.0">
				<p>&#160;</p>
				<ul>
					<li><p>
							Para configurar&#160;<strong><em>Widgets</em></strong>, acceda la
							página en la cual este se agregó.
						</p>
						<p>
							<img class="confluence-embedded-image image-center" width="500"
								src="http://www.tdn.totvs.com/download/attachments/142813325/01.PNG?version=1&modificationDate=1404136876000&api=v2"
								data-image-src="http://www.tdn.totvs.com/download/attachments/142813325/01.PNG?version=1&modificationDate=1404136876000&api=v2">
						</p></li>
				</ul>
				<p>&#160;</p>
			</div>
			<div id="2" class="deck-card " style="" cssclass="" accesskey=""
				label="Passo 2" title="" nextafter="0" effecttype="default"
				effectduration="-1.0">
				<p>&#160;</p>
				<div>
					<ul>
						<li><p>
								Los&#160;<strong><em>Widgets</em></strong>&#160;que permiten
								configuración presentan el ícono&#160;<strong><em>Engranaje.</em></strong>&#160;Haga
								clic en ese&#160;<strong>ícono</strong>&#160;y posteriormente
								en&#160;<strong>Editar.</strong>
							</p>
							<p>
								<img class="confluence-embedded-image image-center"
									src="http://www.tdn.totvs.com/download/attachments/142813325/02.PNG?version=1&modificationDate=1404136868000&api=v2"
									data-image-src="http://www.tdn.totvs.com/download/attachments/142813325/02.PNG?version=1&modificationDate=1404136868000&api=v2">
							</p>
							<p>
								<strong><br /></strong>
							</p></li>
					</ul>
				</div>
			</div>
			<div id="3" class="deck-card " style="" cssclass="" accesskey=""
				label="Passo 3" title="" nextafter="0" effecttype="default"
				effectduration="-1.0">
				<p>&#160;</p>
				<ul>
					<li><p>
							El modo de edición del&#160;<strong><em>Widget</em></strong>&#160;se
							abre.
						</p>
						<p>
							<img class="confluence-embedded-image image-center" width="500"
								src="http://www.tdn.totvs.com/download/attachments/142813325/03.PNG?version=1&modificationDate=1404137053000&api=v2"
								data-image-src="http://www.tdn.totvs.com/download/attachments/142813325/03.PNG?version=1&modificationDate=1404137053000&api=v2">
						</p></li>
				</ul>
				<p>&#160;</p>
			</div>
			<div id="4" class="deck-card " style="" cssclass="" accesskey=""
				label="Passo 4" title="" nextafter="0" effecttype="default"
				effectduration="-1.0">
				<p>&#160;</p>
				<ul>
					<li><p>
							Para el&#160;<strong><em>Widget</em>&#160;Dirección WEB</strong>&#160;ingrese
							un título, la URL e informe altura y ancho del <em>widget</em>.
							Después de finalizar haga clic en&#160;<strong>Guardar</strong>.
						</p>
						<p>
							<img class="confluence-embedded-image image-center" width="500"
								src="http://www.tdn.totvs.com/download/attachments/142813325/04.PNG?version=1&modificationDate=1404137051000&api=v2"
								data-image-src="http://www.tdn.totvs.com/download/attachments/142813325/04.PNG?version=1&modificationDate=1404137051000&api=v2">
						</p></li>
				</ul>
				<p>&#160;</p>
			</div>
			<div id="5" class="deck-card " style="" cssclass="" accesskey=""
				label="Passo 5" title="" nextafter="0" effecttype="default"
				effectduration="-1.0">
				<p>&#160;</p>
				<ul>
					<li><p>
							Al guardar se emite un mensaje de que <strong><em>las
									preferencias se guardaron con éxito</em></strong> Haga clic en <strong>OK</strong>,
							y enseguida acceda a la página nuevamente.
						</p>
						<p>
							<img class="confluence-embedded-image image-center" width="500"
								src="http://www.tdn.totvs.com/download/attachments/142813325/05.PNG?version=1&modificationDate=1404137203000&api=v2"
								data-image-src="http://www.tdn.totvs.com/download/attachments/142813325/05.PNG?version=1&modificationDate=1404137203000&api=v2">
						</p></li>
				</ul>
				<p>&#160;</p>
			</div>
			<div id="6" class="deck-card " style="" cssclass="" accesskey=""
				label="Passo 6" title="" nextafter="0" effecttype="default"
				effectduration="-1.0">
				<p>&#160;</p>
				<ul>
					<li><p>
							Note que ahora el&#160;<strong><em>Widget</em>&#160;</strong>posee
							un nuevo contenido.
						</p>
						<p>
							<img class="confluence-embedded-image image-center" width="500"
								src="http://www.tdn.totvs.com/download/attachments/142813325/06.PNG?version=1&modificationDate=1404137213000&api=v2"
								data-image-src="http://www.tdn.totvs.com/download/attachments/142813325/06.PNG?version=1&modificationDate=1404137213000&api=v2">
						</p></li>
				</ul>
				<p>&#160;</p>
			</div>
			<p>&#160;</p>
			<p>&#160;</p>
		</div>
	</div>
	<!-- // .deck -->
	<p>&#160;</p>
	<p>&#160;</p>
	<p>&#160;</p>
	<p>&#160;</p>
	<p>&#160;</p>
	<p>&#160;</p>
	<p>&#160;</p>
	<p>&#160;</p>
	<p>&#160;</p>
	<p>&#160;</p>
	<p>&#160;</p>
	<p>&#160;</p>
	<p>&#160;</p>
	<p>&#160;</p>
	<p>&#160;</p>
</div>

Índice

outline	true
style	none
exclude	.*ndice

Sobre Widgets

Os Widgets são componentes de tela que oferecem funcionalidades específicas na página Home ou para criação de novas páginas 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.

Informações

title	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 Fluig 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:

Image Removed

Documentos Favoritos

Tenha acesso fácil aos documentos mais utilizados no dia-a-dia.

Image Removed

Documentos Populares

Veja quais são os documentos mais acessados.

Image Removed

Processos Favoritos

Inicie novas solicitações dos processos que você mais utiliza.

Image Removed

Mural de Avisos

Exiba avisos em páginas.

Image Removed

Gráficos de Tarefas

De forma visual, veja como estão suas pendências.

Image Removed

Nova publicação

Crie publicações em comunidades.

Image Removed

Timeline

Acompanhe as publicações de uma comunidades.

Image Removed

Visualizador de gráficos

Visualize gráficos de forma fácil e rápida.

Informações

title	Nota

Clique aqui para obter informações sobre como customizar esse widget.

Image Removed

Listar registros de datasets

Visualize registros de datasets em suas páginas ou comunidades.

Image Removed

Endereço WEB

Acesse endereços WEB de forma fácil e rápida.

Image Removed

Editor de conteúdo

Personalize páginas e comunidades com o conteúdo desejado.

Image Removed

Mini launchpad

Tenha acesso rápido à um app do Fluig Identity.

Image Removed

Listas

Visualize perspectivas de listas em suas páginas ou comunidades.

Image Removed

Tarefas Pendentes

Visualize suas pendências de maneira resumida.

Image Removed

Favoritos sociais

Tenha acesso fácil a contatos e comunidades que mais utiliza no dia-a-dia.

Image Removed

Lista de conexões sociais

Visualize suas conexões de comunidades, seguindo e seguidores.

Image Removed

Informações Sociais

Visualize as informações de perfil ou comunidade.

Image Removed

Navegação de comunidades

Navegue nas galerias de comunidades.

Image Removed

Acesso Centralizado

Tenha acesso fácil à rotinas de sistemas integrados ao Fluig.

Image Removed

Analytics

Visualize gráficos e Dashboards do Analytics de forma fácil e rápida.

Image Removed

Consulta Rápida

Tenha acesso rápido à relatórios simplificados.

Widgets Customizados

Os Widgets customizados são criados 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 ERP ou mesmo de outros sistemas de terceiros. É possível citar como exemplo de Widget Customizado, o Widget de Resumo de Pedidos de Venda, que busca informações no ERP e apresenta um totalizador para os usuários:

Image Removed

Informações

title	Nota

Para mais informações sobre criação de widgets customizados acesse o guia Construção de componentes WCM no Fluig Studio.

Utilizar Widgets

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

...

effectDuration	0.5
id	samples
history	false
effectType	fade

...

default	true
id	1
label	Passo1

Para acesso ao modo de edição de uma página, abra ela no menu lateral esquerdo e clique em Configurações localizado no canto superior direito e posteriormente em Editar Página.

Image Removed

...

id	2
label	Passo 2

No modo de edição de uma página, é possível adicionar Widgets aos slots. Observe que em cada slot da página exemplo, já existe um widget adicionado.

Image Removed

...

id	3
label	Passo 3

É possível adicionar mais que um widget a um slot, para adicionar um novo Widget na página, clique Image Removede procure pelo Widget desejado. Posteriormente, basta acessar o botão Adicionar e Fechar.

...

id	4
label	Passo 4

O Widget é adicionado à página.

...

id	5
label	Passo 5

Edite a Widget conforme desejar. Neste exemplo foi adicionada a widget Editor de Conteúdo.
Lembre-se que você pode mover widgets entre slots, neste exemplo, movemos a widget Documentos Favoritos para o Slot A.

Image Removed

...

id	6
label	Passo 6

Após adicionar e configurar os Widgets, e necessário publicar a página para que seus componentes configurados possam ser visualizados. Para isso, no Menu de Configurações, clique em Publicar Página.

Image Removed

...

id	7
label	Passo 7

A página é apresentada.

...

Configuração de Widgets

Alguns Widgets necessitam de configuração para o correto funcionamento. Esta configuração é feita por meio do recurso Editar presente no menu de ações do Widget. Exemplos: Widgets Editor de Conteúdo, Listas e Endereço WEB, entre outros. Abaixo segue as configurações do Widget Endereço WEB para edição:

Image Removed

Outra forma de configurar Widgets é por meio da tela de edição de página, no qual todos os Widgets adicionados na página são dispostos em modo de edição.

...

effectDuration	0.5
id	samples
history	false
effectType	fade

Card

default	true
id	1
label	Passo1

Para configurar Widgets, acesse a página no qual ele foi adicionado.
Image Removed

...

id	2
label	Passo 2

Os Widgets que permitem configuração apresentam o ícone Engrenagem. Clique nesse ícone e posteriormente em Editar.

Image Removed

Card

id	3
label	Passo 3

O modo de edição do Widget é aberto.
Image Removed

Card

id	4
label	Passo 4

Para o Widget Endereço WEB insira um título, a URL e informe altura e largura da widget. Após finalizado clique em Salvar.
Image Removed

Card

id	5
label	Passo 5

Ao salvar é emitida uma mensagem de que as preferências foram salvas com sucesso. Clique em OK, e em seguida acesse a página novamente.
Image Removed

Card

id	6
label	Passo 6

Note que agora o Widget possui um novo conteúdo.
Image Removed

...

Árvore de páginas

Versões comparadas

Versão antiga 1

Nova versão 2

Chave

Índice

Sobre Widgets

Widgets Padrão

Widgets Customizados

Utilizar Widgets

Configuração de Widgets

Árvore de páginas

Histórico da Página

Versões comparadas

Versão antiga 1

Nova versão 2

Chave

Índice

Sobre Widgets

Widgets Padrão

Widgets Customizados

Utilizar Widgets

Configuração de Widgets