Índice
| Índice |
|---|
| outline | true |
|---|
| exclude | .*ndice |
|---|
| style | none |
|---|
|
Sobre Widgets
Los Widgets 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 widget en las páginas es personalizable vía edición de página.
| Informações |
|---|
|
Los Widgets 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. |
Widgets Estándares
Fluig posee diversos Widgets estándares que se pueden utilizar para la composición de una página por parte del usuario. En la tabla a continuación se presentan algunos Widgets disponibles:
 Image Added | Documentos Favoritos |
| Tenga acceso fácil a los documentos más utilizados cotidianamente. |
 Image Added | Documentos Populares |
| Vea cuáles son los documentos más accedidos. |
 Image Added | Procesos Favoritos |
| Inicie nuevas solicitudes de los procesos que usted más utiliza. |
 Image Added | Mural de Avisos |
| Exhiba avisos en páginas. |
 Image Added | Gráficos de Tareas |
| De forma visual, vea cómo están sus pendientes. |
 Image Added | Detalles de la Comunidad |
| Visualice la información de una comunidad. |
 Image Added | Nueva publicación |
| Cree publicaciones en comunidades. |
 Image Added | Informaciones Sociales |
| Visualice sus contactos y comunidades. |
 Image Added | Timeline |
| Siga las publicaciones de una comunidad. |
 Image Added | Lista de Comunidades |
| Consulte las comunidades disponibles. |
 Image Added | Visualizador de gráficos |
| Visualice gráficos de forma fácil y rápida. |
 Image Added | Dirección WEB |
| Acceda a direcciones WEB de manera rápida y fácil. |
 Image Added | Editor de contenido |
| Cree contenidos ricos para su página. |
 Image Added | Mini launchpad |
| Acceda rápidamente a una app de Fluig Identity. |
Image Added | Listas |
| Visualice perspectivas de listas en sus páginas o comunidades. |
 Image Added | Tareas pendientes |
| Visualice sus pendientes de manera resumida a través de un gráfico. |
 Image Added | Favoritos sociales |
| Acceda fácilmente a los contactos y comunidades más utilizados en la vida diaria. |
 Image Added | Navegación de comunidades |
| Navegue en las galerías de comunidades. |
 Image Added | Acceso centralizado |
| Acceda fácilmente a rutinas de sistemas integrados a Fluig. |
 Image Added | Analytics |
| Visualice gráficos y Dashboards de Analytics de forma fácil y rápida. |
 Image Added | Consulta Rápida |
| Acceda rápidamente a informes simplificados. |
Widgets Personalizados
Los Widgets personalizados son creados por el propio usuario por medio de templates de código. Por medio de ellos, el usuario puede suministrar contenido personalizado, renderizar componentes de ERP o incluso de otros sistemas de terceros. Es posible citar como ejemplo de Widget Personalizado, el Widget de Resumen de Pedidos de Venta, que busca informaciones en el ERP y presenta un totalizador para los usuarios:
Image Added
| Informações |
|---|
|
Para obtener más informaciones sobre la creación de widgets personalizados acceda a la guía Construcción de componentes WCM en el Fluig Studio. |
Utilizar Widgets
A continuación visualice cómo utilizar Widgets en una página. Muévase en las pestañas para seguir las instrucciones:
| Deck of Cards |
|---|
| effectDuration | 0.5 |
|---|
| history | false |
|---|
| id | samples |
|---|
| effectType | fade |
|---|
|
| Card |
|---|
| default | true |
|---|
| id | 1 |
|---|
| label | Paso 1 |
|---|
|
Image Added
|
| Card |
|---|
|
Image Added |
| Card |
|---|
|
Edite el Widget como desee. En este ejemplo se agregó el widget Editor de Contenido. Recuerde que usted puede mover widgets entre slots, en este ejemplo, movemos el widget Documentos Favoritos al Slot A.
Image Added
|
| Card |
|---|
|
Después de agregar y configurar los Widgets, es necesario publicar la página para que sus componentes configurados se puedan visualizar. Para eso, en el Menú de Configuraciones, haga clic en Publicar Página.
Image Added
|
| Card |
|---|
|
Se presenta la página.
Image Added
|
|
Configuración de Widgets
Algunos Widgets necesitan configuración para el correcto funcionamiento. Esta configuración es realizada por medio del recurso Editar presente en el menú de acciones del Widget. Ejemplos: Widgets Editor de Contenido, Listas y Dirección WEB, entre otros. A continuación se presentan las configuraciones del Widget Dirección WEB para edición:
Image Added
Otra forma de configurar Widgets es por medio de la pantalla de edición de página, en el cual todos los Widgets agregados en la página se disponen en modo de edición.
| Deck of Cards |
|---|
| effectDuration | 0.5 |
|---|
| history | false |
|---|
| id | samples |
|---|
| effectType | fade |
|---|
|
| Card |
|---|
| default | true |
|---|
| id | 1 |
|---|
| label | Paso 1 |
|---|
|
|
|
| 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 <em><strong>Widgets</strong></em> 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 <em><strong>widget</strong></em> 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> </p>
<h2 id="Widgets-WidgetsPadrão">Widgets Estándares</h2>
<p>Fluig posee diversos Widgets estándares que se pueden utilizar
para la composición de una página por parte del usuario. En
la tabla a continuación se presentan algunos Widgets disponibles:</p>
<p> </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> </p>
<p> </p>
<h2 id="Widgets-WidgetsCustomizados">Widgets Personalizados</h2>
<p>
Los <strong><em>Widgets</em> personalizados </strong>son
creados por el propio usuario por medio de <em>templates</em> de
código. Por medio de ellos, el usuario puede suministrar contenido
personalizado, renderizar componentes de <em>ERP </em>o
incluso de otros sistemas de terceros. <span>Es posible
citar como ejemplo de </span><strong><em>Widget</em> Personalizado</strong><span>,
el </span><strong><em>Widget</em> de Resumen de Pedidos
de Venta</strong><span>, que busca informaciones en el </span><em>ERP</em><span> 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> </p>
<h2 id="Widgets-UtilizarWidgets">Utilizar Widgets</h2>
<p>
A continuación visualice cómo utilizar <strong><em>Widgets</em></strong> en
una página. Muévase en las pestañas para seguir las instrucciones:
</p>
<p> </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> </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 </span><strong>Configuraciones</strong><span> localizado
en la esquina superior derecha y posteriormente en </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> </p>
<div>
<ul>
<li><p>
En<span>el modo de edición de una página, es posible
agregar </span><strong><em>Widgets</em></strong><span> a
los </span><strong><em>slots.</em></strong><span> Observe
que en cada slot de la página ejemplo, ya existe un widget
agregado</span><span>. </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> </p>
<ul>
<li><p>
<span><span>Es posible agregar más de un widget a
un slot, p</span>ara agregar un nuevo </span><strong><em>Widget</em></strong><span> 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>. 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> </p>
</div>
<div id="4" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 4" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<ul>
<li><p>
El <strong><em>Widget</em></strong> se agrega a la
página. 
</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> </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> </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> </p>
<ul>
<li><p>
Después de agregar y configurar los <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> </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> </p>
<ul>
<li><p>Se presenta la página. </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> </p>
</div>
<p> </p>
<p> </p>
</div>
</div>
<!-- // .deck -->
<p> </p>
<h2 id="Widgets-ConfiguraçãodeWidgets">Configuración de Widgets</h2>
<p>
Algunos <strong><em>Widgets</em></strong> necesitan
configuración para el correcto funcionamiento. Esta configuración es
realizada por medio del recurso <strong>Editar</strong> presente
en el menú de acciones del <strong><em>Widget.</em></strong> Ejemplos: <strong><em>Widgets</em> Editor
de Contenido</strong>, <strong>Listas</strong> y <strong>Dirección
WEB,</strong> entre otros. A continuación se presentan las
configuraciones del <strong>Widget Dirección WEB</strong> 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;"> </p>
<p>
Otra forma de configurar <strong><em>Widgets</em></strong> es
por medio de la pantalla de edición de página, en el cual todos
los <strong><em>Widgets</em></strong> agregados en la página
se disponen en modo de edición.
</p>
<p> </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> </p>
<ul>
<li><p>
Para configurar <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> </p>
</div>
<div id="2" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 2" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<div>
<ul>
<li><p>
Los <strong><em>Widgets</em></strong> que permiten
configuración presentan el ícono <strong><em>Engranaje.</em></strong> Haga
clic en ese <strong>ícono</strong> y posteriormente
en <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> </p>
<ul>
<li><p>
El modo de edición del <strong><em>Widget</em></strong> 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> </p>
</div>
<div id="4" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 4" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<ul>
<li><p>
Para el <strong><em>Widget</em> Dirección WEB</strong> ingrese
un título, la URL e informe altura y ancho del <em>widget</em>.
Después de finalizar haga clic en <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> </p>
</div>
<div id="5" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 5" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </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> </p>
</div>
<div id="6" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 6" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<ul>
<li><p>
Note que ahora el <strong><em>Widget</em> </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> </p>
</div>
<p> </p>
<p> </p>
</div>
</div>
<!-- // .deck -->
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
|