Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
HTML

                    <div id="main-content" class="wiki-content group">
                    <h1 id="Widgets-Índice">Index</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'>About widgets</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>1.1</span> <a href='#Widgets-WidgetsPadrão'>Default widgets</a></li>
<li><span class='TOCOutline'>1.2</span> <a href='#Widgets-WidgetsCustomizados'>Custom widgets</a></li>
<li><span class='TOCOutline'>1.3</span> <a href='#Widgets-UtilizarWidgets'>Use widgets</a></li>
<li><span class='TOCOutline'>1.4</span> <a href='#Widgets-ConfiguraçãodeWidgets'>Widget configuration</a></li>
</ul>
</li>
</ul>
</div></p><h1 id="Widgets-SobreWidgets">About widgets</h1><p><em><strong>Widgets</strong></em>&#160;are screen components that offer specific features on the home page or to create new pages for tracking tasks, processes or documents, among others. The organization of each&#160;<em><strong>widget</strong></em>&#160;on the pages is customizable via page editing.</p>    <div class="aui-message hint shadowed information-macro">
                    <p class="title">Note</p>
                            <span class="aui-icon icon-hint">Icon</span>
                <div class="message-content">
                            <p><em><strong>Widgets</strong></em> can display content related to the site created from WCM, ERP components or promote integration with third-party systems.</p>
                    </div>
    </div>
<p>&#160;</p><h2 id="Widgets-WidgetsPadrão">Default widgets</h2><p>Fluig has several default widgets that a user can use to compose a page.&#160;The table below presents some available widgets:</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="attachments/142813325/147095622.png" data-image-src="attachments/142813325/147095622.png"></strong></td><td class="confluenceTd"><strong>Favorite documents</strong></td></tr><tr><td class="confluenceTd"><span>Have easy access to the documents you use the most on a daily basis.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095624.png" data-image-src="attachments/142813325/147095624.png"></td><td class="confluenceTd"><strong>Popular documents</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>See what the most accessed documents are.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095625.png" data-image-src="attachments/142813325/147095625.png"></td><td colspan="1" class="confluenceTd"><strong>Favorite processes</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Start new requests of the processes that you use the most.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095626.png" data-image-src="attachments/142813325/147095626.png"></td><td colspan="1" class="confluenceTd"><strong>Notification wall</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Display notifications on pages.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095627.png" data-image-src="attachments/142813325/147095627.png"></td><td colspan="1" class="confluenceTd"><strong>Task charts</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Visually, see how your pending issues are.</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>Community details</strong></td></tr><tr><td colspan="1" class="confluenceTd">View information about a community.</td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095631.png" data-image-src="attachments/142813325/147095631.png"></td><td colspan="1" class="confluenceTd"><strong>New post</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Create posts in communities.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095641.png" data-image-src="attachments/142813325/147095641.png"></td><td colspan="1" class="confluenceTd"><strong>Social Information</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>View your contacts and communities.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095642.png" data-image-src="attachments/142813325/147095642.png"></td><td colspan="1" class="confluenceTd"><strong>Timeline</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Follow up the posts of a community.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095643.png" data-image-src="attachments/142813325/147095643.png"></td><td colspan="1" class="confluenceTd"><strong>Community list</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>See the available communities.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095618.png" data-image-src="attachments/142813325/147095618.png"></td><td colspan="1" class="confluenceTd"><strong>Graph viewer</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>View graphs quickly and easily.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095645.png" data-image-src="attachments/142813325/147095645.png"></td><td colspan="1" class="confluenceTd"><strong>WEB Address</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Visit WEB addresses in an easy and quick way.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095646.png" data-image-src="attachments/142813325/147095646.png"></td><td colspan="1" class="confluenceTd"><strong>Content Editor</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Create rich content for your page.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095648.png" data-image-src="attachments/142813325/147095648.png"></td><td colspan="1" class="confluenceTd"><strong>Mini launchpad</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Have quick access to a Fluig Identity app.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095649.png" data-image-src="attachments/142813325/147095649.png"></td><td colspan="1" class="confluenceTd"><strong>Lists</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>View lists on your pages or communities.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095650.png" data-image-src="attachments/142813325/147095650.png"></td><td colspan="1" class="confluenceTd"><strong>Pending tasks</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>View your pending issues summarized through a graph.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095651.png" data-image-src="attachments/142813325/147095651.png"></td><td colspan="1" class="confluenceTd"><strong>Social favorites</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Have easy access to contacts and communities that you use the most on a daily basis.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095652.png" data-image-src="attachments/142813325/147095652.png"></td><td colspan="1" class="confluenceTd"><strong>Community browsing</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Browse community galleries.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095653.png" data-image-src="attachments/142813325/147095653.png"></td><td colspan="1" class="confluenceTd"><strong>Centralized Access</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Have easy access to routines of systems integrated to Fluig.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095654.png" data-image-src="attachments/142813325/147095654.png"></td><td colspan="1" class="confluenceTd"><strong>Analytics</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>View graphs and </span><em>Dashboards</em><span> of </span><em>Analytics</em><span> quickly and easily.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095655.png" data-image-src="attachments/142813325/147095655.png"></td><td colspan="1" class="confluenceTd"><strong>Quick query</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Have quick access to simplified reports.</span></td></tr></tbody></table></div><p>&#160;</p><p>&#160;</p><h2 id="Widgets-WidgetsCustomizados">Custom widgets</h2><p><strong>Custom<em>widgets</em></strong> are created by the user themself by means of code&#160;<em>templates</em>. Through them, the user can provide personalized content, render components of <em>ERP&#160;</em>or other third-party systems.&#160;<span>It is possible to cite as an example of a&#160;</span><strong><em>custom&#160;</em>widget</strong><span>, the&#160;</span><strong><em>widget</em>&#160;of sales orders summary</strong><span>, which seeks information in&#160;</span><em>ERP</em><span>&#160;and presents a totalizer for the users:</span></p><p><img class="confluence-embedded-image image-center" src="attachments/142813325/142936577.jpg" data-image-src="attachments/142813325/142936577.jpg"></p>    <div class="aui-message hint shadowed information-macro">
                    <p class="title">Note</p>
                            <span class="aui-icon icon-hint">Icon</span>
                <div class="message-content">
                            <p>For more information about how to create custom widgets, go to the <a href="113803693.html">Building WCM components in Fluig Studio</a> guide.</p>
                    </div>
    </div>
<p>&#160;</p><h2 id="Widgets-UtilizarWidgets">Use widgets</h2><p>View how to use&#160;<strong><em>widgets</em></strong>&#160;on a page. Access the tabs to follow the step by step:</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>To access the edit mode of a page, open it in the left side menu and click&#160;</span><strong>Settings</strong><span>, which is&#160;located in the top right corner, and then on&#160;</span><strong>Edit page.</strong></p></li></ul><p><strong><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/146119582.png" data-image-src="attachments/142813325/146119582.png"></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><span>In the edit mode of a page, you can add&#160;</span><strong><em>widgets</em></strong><span>&#160;to the&#160;</span><strong><em>slots.</em></strong><span>&#160;Note that in each example page slot, there is already a widget added</span><span>.&#160;</span></p><p><span><br /></span></p></li></ul></div><div><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/146119586.png" data-image-src="attachments/142813325/146119586.png"></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>You can add more than one widget to a slot, </span> to add a new&#160;</span><strong><em>widget</em></strong><span>&#160;in the page, click <img class="confluence-embedded-image" src="attachments/142813325/146119587.png" data-image-src="attachments/142813325/146119587.png">and browse for the widget you want</span><span>.&#160;Later, simply access the <strong>Add </strong> button and<strong> Close</strong>.</span></p><p><br /><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/146119593.png" data-image-src="attachments/142813325/146119593.png"></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>The&#160;<strong><em>widget</em></strong>&#160;is added to the page.&#160;</p><p><br /><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/146119594.png" data-image-src="attachments/142813325/146119594.png"></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>Edit the widget as you wish. In this example the Content Editor widget was added.</p></li><li><p>Remember that you can move <strong>widgets</strong> between <strong>slots</strong>, in this example, we moved the <strong>Favorite documents widget</strong> to <em>Slot A</em>.</p></li></ul><p>&#160;</p><p><strong><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/146119599.png" data-image-src="attachments/142813325/146119599.png"></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>After you add and configure the&#160;<strong><em>widgets</em></strong>, you need to post the page so that the components that were configured can be viewed. To do this, on the <strong>Settings menu</strong>, click <strong>Post page.</strong></p><p>&#160;</p><p style="text-align: center;"><img class="confluence-embedded-image" width="500" src="attachments/142813325/146119598.png" data-image-src="attachments/142813325/146119598.png"></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>The page is displayed.&#160;</p><p><br /><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/146119600.png" data-image-src="attachments/142813325/146119600.png"></p></li></ul><p>&#160;</p></div>
<p>&#160;</p><p>&#160;</p></div>
    </div> <!-- // .deck -->
<p>&#160;</p><h2 id="Widgets-ConfiguraçãodeWidgets">Widget configuration</h2><p>Some&#160;<strong><em>widgets</em></strong>&#160;require configuration for correct functioning. This configuration is done via the <strong>Edit</strong>&#160;feature present in the <strong><em>widget</em></strong> actions menu.&#160;Examples:&#160;<strong><em>Widgets</em>&#160;Content editor</strong>,<strong>Lists</strong> and&#160;<strong>WEB address,</strong>&#160;among others.&#160;Below are the settings of the&#160;<strong>Widget WEB address</strong>&#160;for editing:</p><p><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/146119564.png" data-image-src="attachments/142813325/146119564.png"></p><p style="text-align: center;">&#160;</p><p>Another way to configure&#160;<strong><em>widgets</em></strong>&#160;is via the page editing screen, on which all the&#160;<strong><em>widgets</em></strong>&#160;added on the page are placed in edit mode.</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>To configure&#160;<strong><em>widgets</em></strong>, go to the page in which it was added.</p><p><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/147095893.png" data-image-src="attachments/142813325/147095893.png"></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>The&#160;<strong><em>widgets</em></strong>&#160;that allow settings feature the <strong><em>Gear</em></strong> icon.&#160;Click that&#160;<strong>icon</strong> and then <strong>Edit.</strong></p><p><img class="confluence-embedded-image image-center" src="attachments/142813325/147095892.png" data-image-src="attachments/142813325/147095892.png"></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>The edit mode of the&#160;<strong><em>widget</em></strong>&#160;is open.</p><p><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/147095895.png" data-image-src="attachments/142813325/147095895.png"></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>For the&#160;<strong><em>Widget</em> WEB address</strong>&#160;enter a title, URL, and enter height and width of the <em>widget</em>. After finished, click&#160;<strong>Save</strong>.</p><p><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/147095894.png" data-image-src="attachments/142813325/147095894.png"></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>After you save it, you will receive a message saying that <strong><em>the preferences have been successfully saved </em></strong>. Click <strong>OK</strong>, and then go to the page again.</p><p><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/147095897.png" data-image-src="attachments/142813325/147095897.png"></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 that now the&#160;<strong><em>widget</em></strong> has a new content.</p><p><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/147095898.png" data-image-src="attachments/142813325/147095898.png"></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

Índice
outlinetrue
stylenone
exclude.*ndice

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
titleNota

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 RemovedDocumentos Favoritos
Tenga acceso fácil a los documentos más utilizados cotidianamente.
Image RemovedDocumentos Populares
Vea cuáles son los documentos más accedidos.
Image RemovedProcesos Favoritos
Inicie nuevas solicitudes de los procesos que usted más utiliza.
Image RemovedMural de Avisos
Exhiba avisos en páginas.
Image RemovedGráficos de Tareas
De forma visual, vea cómo están sus pendientes.
Image RemovedDetalles de la Comunidad
Visualice la información de una comunidad.
Image RemovedNueva publicación
Cree publicaciones en comunidades.
Image RemovedInformaciones Sociales
Visualice sus contactos y comunidades.
Image RemovedTimeline
Siga las publicaciones de una comunidad.
Image RemovedLista de Comunidades
Consulte las comunidades disponibles.
Image RemovedVisualizador de gráficos
Visualice gráficos de forma fácil y rápida.
Image RemovedDirección WEB
Acceda a direcciones WEB de manera rápida y fácil.
Image RemovedEditor de contenido
Cree contenidos ricos para su página.
Image RemovedMini launchpad
Acceda rápidamente a una app de Fluig Identity.
Image RemovedListas
Visualice perspectivas de listas en sus páginas o comunidades.
Image RemovedTareas pendientes
Visualice sus pendientes de manera resumida a través de un gráfico.
Image RemovedFavoritos sociales
Acceda fácilmente a los contactos y comunidades más utilizados en la vida diaria.
Image RemovedNavegación de comunidades
Navegue en las galerías de comunidades.
Image RemovedAcceso centralizado
Acceda fácilmente a rutinas de sistemas integrados a Fluig.
Image RemovedAnalytics
Visualice gráficos y Dashboards de Analytics de forma fácil y rápida.
Image RemovedConsulta 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 Removed

Informações
titleNota

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:

 

...

effectDuration0.5
idsamples
historyfalse
effectTypefade

...

defaulttrue
id1
labelPasso1

 

  • Para el acceso al modo de edición de una página, ábrala en el menú lateral izquierdo y haga clic en Configuraciones localizado en la esquina superior derecha y posteriormente en Editar Página.

Image Removed

Card
id2
labelPasso 2

 

  • Enel modo de edición de una página, es posible agregar Widgets a los slots. Observe que en cada slot de la página ejemplo, ya existe un widget agregado.

     

Image Removed

...

id3
labelPasso 3

 

Es posible agregar más de un widget a un slot, para agregar un nuevo Widget en la página, haga clic 

...

 

...

id4
labelPasso 4

 

El Widget se agrega a la página. 

...

id5
labelPasso 5

 

  • 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 Removed

...

id6
labelPasso 6

 

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 Removed

...

id7
labelPasso 7

 

Se presenta la página. 

...

 

 

 

 

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 ContenidoListas y Dirección WEB, entre otros. A continuación se presentan las configuraciones del Widget Dirección WEB para edición:

Image Removed

 

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.

 

...

effectDuration0.5
idsamples
historyfalse
effectTypefade
Card
defaulttrue
id1
labelPasso1

 

  • Para configurar Widgets, acceda la página en la cual este se agregó.

    Image Removed

 

...

id2
labelPasso 2

 

Los Widgets que permiten configuración presentan el ícono Engranaje. Haga clic en ese ícono y posteriormente en Editar.

Image Removed

Card
id3
labelPasso 3

 

  • El modo de edición del Widget se abre.

    Image Removed

 

Card
id4
labelPasso 4

 

  • Para el Widget Dirección WEB ingrese un título, la URL e informe altura y ancho del widget. Después de finalizar haga clic en Guardar.

    Image Removed

 

Card
id5
labelPasso 5

 

  • Al guardar se emite un mensaje de que las preferencias se guardaron con éxito Haga clic en OK, y enseguida acceda a la página nuevamente.

    Image Removed

 

Card
id6
labelPasso 6

 

  • Note que ahora el Widget posee un nuevo contenido.

    Image Removed

 

 

 

 

...